halbritter-lab / gene-curator

Gene Curator is an open-source platform for managing and curating genetic data. It facilitates gene data analysis, entry, and reporting, serving genetics researchers with tools for efficient data handling.
MIT License
5 stars 1 forks source link

Feature Request: Optimize Application Performance through Lazy Loading and Asset Optimization #66

Open berntpopp opened 9 months ago

berntpopp commented 9 months ago

Summary

Enhance the overall performance of the Gene-Curator web app by implementing lazy loading and optimizing the sizes of bundles and images. Focus on improving key performance metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Speed Index (SI).

Description

The current version of the Gene-Curator web app experiences performance issues, particularly in load times and responsiveness. These issues are partly due to large bundle sizes and unoptimized images. Implementing lazy loading and reducing asset sizes will significantly improve the application's performance, leading to a better user experience.

Acceptance Criteria

User Stories

Implementation Details

Potential Additional Optimizations

Code Snippet

// Example of lazy loading a Vue component
const MyComponent = () => import('@/components/MyComponent.vue');

// Example of Webpack code splitting
export default {
  components: {
    MyComponent: () => import(/* webpackChunkName: "my-component" */ '@/components/MyComponent.vue')
  }
};