General Info
The homepage’s LCP is above 5s on mobile. Lighthouse confirms the hero image is discovered late, blocking CSS/JS, legacy polyfills, and the HiPay SDK load are all hurting performance.
User Story
As a first-time visitor landing on the homepage, I want the hero image and key content to appear instantly so I feel confident to explore the site.
Acceptance Criteria
|
ID |
Scenario |
Details |
|---|---|---|
|
01 |
Scenario: Hero image loads eagerly and is preloaded Given the hero image is the LCP element When the page loads Then it is discovered early and fetched as priority |
Evidence: Lighthouse: “Preload the Largest Contentful Paint image” flagged; delays LCP by ~5s. Why: Lazy-loading the hero image delays browser discovery. Action direction: Exclude from lazy-load, use loading="eager", fetchpriority="high", and add <link rel="preload"> in <head>. |
|
02 |
Scenario: Render-blocking CSS eliminated Given main CSS blocks first paint When the page loads Then only critical CSS is loaded upfront |
Evidence: “Eliminate render-blocking resources” for main.css (~114 KB). |
|
03 |
Scenario: Non-critical JS is deferred Given JS blocks interactivity When the page loads Then non-essential scripts load deferred |
Evidence: Lighthouse: “Defer parsing of JavaScript” – total JS ~512 KB. |
|
04 |
Scenario: Legacy JS polyfills removed if not needed Given modern browsers dominate When the page loads Then no unnecessary legacy JS loads |
Evidence: “Avoid serving legacy JavaScript to modern browsers”. core-js polyfill seen. Why: Legacy scripts inflate bundle size. Action direction: Remove or conditionally load polyfills only if browser checks require them. |
|
05 |
Scenario: HiPay SDK only loads where needed Given HiPay is for checkout only When the homepage loads Then HiPay scripts do not run |
Evidence: hipay-sdk.js (~200–300 KB) loaded on homepage. Why: Unnecessary third-party scripts waste bandwidth and CPU. Action direction: Wrap enqueue logic in if ( is_checkout() ) or unload globally via plugin. |
|
06 |
Scenario: Static assets have efficient cache policy Given repeat visitors should benefit from cache When they revisit Then assets are reused |
Evidence: “Serve static assets with an efficient cache policy” – TTL near zero. Why: No cache means repeated downloads. Action direction: Use Cloudflare/Page Rules to set proper TTL for images, CSS, JS. |
Leave a Reply
You must be logged in to post a comment.