General Info
The Product Detail Page on saclab.com has a Largest Contentful Paint (LCP) of 5.2 s on mobile – which exceeds the recommended target of 2.5 s.
The Lighthouse report confirms the hero bag image is the likely LCP element but is being lazy-loaded or discovered late, delaying final rendering.
Other issues on the product page include: unnecessary legacy scripts, third-party scripts like CookieYes and HiPay running on non-checkout pages, render-blocking CSS, and missing static caching headers.
User Story
As a customer viewing a product, I want the main bag image and details to appear immediately so I trust the site’s quality and feel ready to buy.
Acceptance Criteria
|
ID |
Scenario |
Details |
|---|---|---|
|
01 |
Scenario: Hero product image loads eagerly and is preloaded Given the bag image is the LCP element When the page loads Then the hero image is not lazy-loaded and is preloaded properly |
Evidence: largest-contentful-paint.numericValue = 5200 ms shows hero image discovered late. Why: Lazy-loading above-the-fold images delays discovery, hurting LCP and FCP. Action direction: Exclude hero image from lazy-load, use loading="eager", fetchpriority="high", and add <link rel="preload" as="image"> in <head>. Devs should confirm this works with the theme. |
|
02 |
Scenario: Product hero image uses next-gen format Given the hero image is JPEG When the page loads Then it’s served as WebP where possible |
Evidence: “Serve images in next-gen formats” could save ~30–40% on hero images. Why: Smaller image payload improves LCP. Action direction: Auto-Convert hero images to WebP; test for color accuracy. |
|
03 |
Scenario: Render-blocking CSS is eliminated Given large CSS blocks the paint When the page loads Then only critical CSS is loaded upfront |
Evidence: “Eliminate render-blocking resources” flags ~150 KB CSS. Why: Blocking styles delay FCP/LCP. Action direction: Use WP Rocket’s Inline Critical CSS and Remove Unused CSS. Dev to test styling carefully. |
|
04 |
Scenario: Cookie and chat scripts run only when needed Given they run immediately When the page loads Then these scripts are deferred or delayed |
Evidence: “Minimize main-thread work” – CookieYes adds ~200 ms CPU time on load. Why: Third-party scripts slow Time to Interactive. Action direction: Use WP Rocket’s Delay JS Execution for consent/chat scripts; confirm they run on user interaction instead. |
|
05 |
Scenario: HiPay SDK only loads where needed Given payments happen in checkout only When the product page loads Then HiPay scripts do not run |
Evidence: hipay-sdk.js visible in product page network log. Why: Adds 200–300 KB unused JS. Action direction: Wrap enqueue for is_checkout() only; or manage via Asset CleanUp. |
|
06 |
Scenario: Static assets have efficient caching Given cache headers are missing When user revisits Then static assets are reused from cache |
Evidence: “Serve static assets with an efficient cache policy” flagged; TTL is 0 for key files. Why: Poor caching wastes bandwidth. Action direction: Use Cloudflare or server headers to apply long TTLs for images, CSS, and JS. |
Implementation Note:
Each recommendation explains why it matters and what to aim for, but the dev team should adjust the best technical solution, verify on staging, and test across breakpoints. The goal is to bring LCP below 2.5 s, reduce Time to Interactive, and improve perceived speed.
Leave a Reply
You must be logged in to post a comment.