[Enhancement]: Improve Changelog Page Loading Time #121
Description
Describe the enhancement
Optimize the /changelog page performance to reduce the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times. Proposed improvements include:
- Implementing code-splitting and lazy-loading for heavy components.
- Reducing JavaScript bundle size by tree-shaking unused dependencies.
- Optimizing images and assets using next-gen formats like WebP and proper compression.
- Enabling server-side rendering (SSR) or static generation where possible to pre-render content.
- Implementing caching strategies with service workers and CDN for frequently accessed data.
- Monitoring and minimizing Time to First Byte (TTFB) with backend optimizations and efficient API endpoints.
Current vs. improved behavior
-
Current:
- First Contentful Paint: 4.52s
- Largest Contentful Paint: 4.52s
- Time to First Byte: 3.65s
- Real Experience Score: 67 (Needs Improvement)
-
Improved:
- FCP & LCP < 2.5s
- TTFB < 1.5s
- Real Experience Score > 90 (Great experience)
- Ensures smoother, faster page loading for users.
Additional context
- RES metrics indicate that less than 75% of visits have a great experience, primarily due to high paint and TTFB times.
- Prioritize optimization for desktop but also monitor mobile performance.
- Reference: [Google Web Vitals Documentation](https://web.dev/vitals/)
Screenshots
Prerequisite Checklist
- ⭐ Starred [Helixque Repo](https://github.com/HXQLabs/Helixque/)
- ⭐ Starred [Helixque Landing Repo](https://github.com/HXQLabs/helixque-landing/)
- 📘 Read and understood [Contributing Guidelines](https://github.com/HXQLabs/Helixque/blob/main/CONTRIBUTING.md)
- 💬 Joined [Discord Channel](https://discord.com/invite/dQUh6SY9Uk)
- 🌐 Explored and signed up on [helixque.netlify.app](https://helixque.netlify.app)
✅ Issues will be assigned once all checklist prerequisites are verified.
Important
🛑 Contribution Guidelines — Please Read Before Proceeding
- Any PR raised for an unassigned issue (even if the issue number is mentioned in the PR) will not be merged and will be closed automatically.
- If your issue is valid but not yet assigned, please ping the Project Maintainers in the [Discord Channel](https://discord.com/invite/dQUh6SY9Uk) to get it assigned before starting work or submitting a PR.
- Only Code Owners or Project Maintainers have the authority to verify, approve, and assign issues.
- Do not self-assign issues — any self-assigned issue will be reviewed, and the final decision will rest with the Code Owners.
Thank you for helping shape HelixQue’s future this Hacktoberfest 🙌