layer5io
[ Performance ] Improve Event page Performance
Description
In Mobile Site of Events currently shows low performance scores on PageSpeed Insights 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 | Est savings of $877 \text{ KiB}$ | LCP, FCP | Fail 🔴 | Multiple first-party resources (scripts, images, fonts) from layer5.io have cache lifetimes of only 4h; one script has 47m 40s. |
| Forced reflow | N/A (Performance Issue) | N/A | Fail 🔴 | A major reflow event spent 65 ms in framework-00cd734….js. Total unattributed time is $68 \text{ ms}$. |
| Network dependency tree | Max critical path latency: $229 \text{ ms}$ | LCP | Fail 🔴 | Critical chain ends with a font file (QanelasSoftSemiBold….otf), delaying page rendering. |
| Reduce JavaScript execution time | Total CPU Time: $2.7 \text{ s}$ | TBT | Fail 🔴 | Dominated by YouTube scripts ($2,028 \text{ ms}$) and layer5.io scripts ($1,878 \text{ ms}$). |
| Minimize main-thread work | Total Time: $4.2 \text{ s}$ | TBT | Fail 🔴 | High work with Script Evaluation ($1,812 \text{ ms}$) and Parsing/Compilation ($1,039 \text{ ms}$). |
| Reduce unused JavaScript | Est savings of $1,608 \text{ KiB}$ | LCP, FCP | Fail 🔴 | Largest savings are from YouTube ($1,477.1 \text{ KiB}$) and /app-612514b….js ($130.7 \text{ KiB}$). |
| Some third-party resources can be lazy loaded with a facade | Main-Thread Blocking Time: $1,208 \text{ ms}$ | TBT | Fail 🔴 | The YouTube Embedded Player is loaded immediately, adding significant blocking time. |
| Avoid enormous network payloads | Total size was $3,785 \text{ KiB}$ | N/A | Average 🟠 | Largest payloads are from YouTube ($2,096.3 \text{ KiB}$) and first-party assets ($888.1 \text{ KiB}$). |
| Improve image delivery | Est savings of $355 \text{ KiB}$ | LCP, FCP | Average 🟠 | Several images are much larger than their displayed dimensions (e.g., $1934 \times 1094$ used for $372 \times 210$). |
| Render blocking requests | Transfer Size: $1.2 \text{ KiB}$ | LCP, FCP | Average 🟠 | The Cloudflare email-decode.min.js script blocks initial render. |
| Duplicated JavaScript | Est savings of $1 \text{ KiB}$ (Duplicated bytes: $20 \text{ KiB}$) | LCP, FCP | Average 🟠 | node_modules/react-dom is duplicated across multiple bundles. |
| Reduce unused CSS | Est savings of $11 \text{ KiB}$ | LCP, FCP | Average 🟠 | Unused CSS rules were found, primarily in a large CSS block. |
| Does not use passive listeners to improve scrolling performance | N/A | N/A | Average 🟠 | An event listener in www.youtube.com/…/base.js is not marked as passive. |
| Avoid serving legacy JavaScript to modern browsers | Est savings of $19 \text{ KiB}$ | LCP, FCP | Average 🟠 | Transpiled legacy JavaScript found in both YouTube and first-party bundles. |
| Layout shift culprits | Total Score: 0.014 | CLS | Informative | The largest shift (0.013) is tied to a web font loading in a div.blog-slider. |
| LCP breakdown | Element render delay: $2,040 \text{ ms}$ | LCP | Informative | The LCP element (a text paragraph) is heavily delayed in rendering after resource loading. |
| 3rd parties | YouTube: $2,275 \text{ KiB}$, $1,598 \text{ ms}$ | N/A | Informative | YouTube is the dominant third party in terms of size and main thread time. |
| Avoid long main-thread tasks | 10 long tasks found | TBT | Informative | The longest tasks are dominated by YouTube scripts (e.g., $350 \text{ ms}$ and $347 \text{ ms}$). |
| User Timing marks and measures | 63 user timings | N/A | Informative | Custom marks and measures recorded for various events. |
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.
Hello @Rajesh-Nagarajan-11, I would like to work on this issue. Please assign it to me
Hey @Vaibhavsg17 thanks for volunteering. Please confirm that you have built and can run the site locally.
@Rajesh-Nagarajan-11 I am already part of the layer5 community. Will my contribution be considered for Hacktoberfest 2025?