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

[berntpopp]

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

• [ ] Implement lazy loading for components and routes to reduce initial load time.
• [ ] Optimize the size of JavaScript bundles through code splitting and tree shaking.
• [ ] Compress and optimize image sizes without compromising quality.
• [ ] Measure and improve key performance indicators like LCP, TBT, and SI.
• [ ] Ensure that the optimizations do not affect the application's functionality or user experience.
• [ ] Conduct thorough testing to validate performance improvements.

User Stories

• As a user, I want the application to load quickly and be responsive, so that I can use it efficiently.
• As a developer, I need to optimize the app’s assets and loading strategy to enhance performance and user satisfaction.
• As an administrator, I expect the application to be fast and efficient, ensuring a smooth experience for all users.

Implementation Details

• Utilize Vue.js features and best practices for lazy loading components and routes.
• Analyze the current JavaScript bundles using tools like Webpack Bundle Analyzer and implement optimizations like code splitting.
• Use image compression tools to reduce image file sizes and consider using modern image formats like WebP.
• Set up performance monitoring using tools like Lighthouse and Google PageSpeed Insights to track improvements.
• Ensure backward compatibility and that the user experience remains consistent across all devices and browsers.

Potential Additional Optimizations

• Review and optimize CSS and fonts loading strategy.
• Evaluate and implement caching strategies for static assets.
• Explore server-side rendering (SSR) or static site generation (SSG) for further performance gains.

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')
  }
};