[Performance] Improve Home Page Performance (layer5.io) #6924
Description
Description
The Desktop site https://layer5.io/
currently shows low performance scores on PageSpeed Insights Score (
Here’s a detailed report highlighting the issues causing the page to lag: Report
Insights (Opportunities for Improvement)
| Audit Title | Est. Savings / Score | Relevance | Status | Details |
|---|---|---|---|---|
| Use efficient cache lifetimes | 1,477 KiB | LCP, FCP | 🔴 Fail | Resources from layer5.io (2,167 KiB total transfer size) are only cached for 4 hours. Increase the Cache TTL for these immutable assets to improve repeat visits. (Gatsby: Configure caching for immutable assets) |
| Layout shift culprits | Total: 0.332 | CLS | 🔴 Fail | Major shift caused by: section.partnerSectionstyle... (0.260 score) and Unsized image elements. |
| Forced reflow | – | – | 🔴 Fail | JavaScript queries geometric properties after DOM state changes, leading to performance issues. Top functions are in /framework-00cd734...js:3:2836 (40 ms) and unexplained tasks (89 ms). |
| LCP request discovery | – | LCP | 🔴 Fail | The Largest Contentful Paint (LCP) element (a video preview div) is not optimized for quick discovery. Action needed: fetchpriority=high should be applied. (Gatsby: Use gatsby-plugin-image with loading="eager") |
| Improve image delivery | Est. savings of 390 KiB | LCP, FCP | 🟡 Average | The image /static/meshery-dashboard-hero-image...png (459.1 KiB) is too large for its displayed size (1467x994 for an 850x500 display). Use modern formats (WebP/AVIF). |
| Duplicated JavaScript | Est. savings of 1 KiB | LCP, FCP | 🟡 Average | Duplicate modules found, most notably: node_modules/react-dom (20 KiB duplicated across two files). |
| Avoid serving legacy JavaScript to modern browsers | Est. savings of 2 KiB | LCP, FCP | 🟡 Average | Small savings possible by avoiding unnecessary polyfills and transforms for modern JS features. |
| Defer offscreen images | Est. savings of 7 KiB | LCP, FCP | 🟡 Average | Offscreen images (mostly SVGs in banners) are not lazy-loaded. They should be deferred to improve Time to Interactive. |
| Minify CSS | Est. savings of 3 KiB | LCP, FCP | 🟡 Average | Small savings available by further minifying CSS files. |
| Reduce unused CSS | Est. savings of 35 KiB | LCP, FCP | 🟡 Average | 24.1 KiB unused in primary CSS and 10.9 KiB unused in accordion CSS. (Gatsby: Use PurgeCSS plugin) |
Expected Behavior
The website should implement the optimizations suggested by PageSpeed Insights.
Screenshots
Steps to Check Page Performance Scores
-
Open PageSpeed Insights
-
Enter the website URL.
-
Check the performance scores for both Mobile and Desktop.
-
Scroll down to review detailed insights and recommendations for improving page performance.
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
- 📚 See contributing instructions.
- 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.
Join the Layer5 Community by submitting your community member form.