Find the Delay Behind a Slow Product Page
Use a mobile load trace to see whether the main image starts late, downloads slowly, or waits to appear.
On a mobile product page, the main photo might take 400 milliseconds to download and still appear after four seconds. In that case, check when the browser discovered the photo and when the page let it appear. Those two timestamps can save you a round of compressing a file that already downloads quickly.
I used AI assistance to adapt my Traditional Chinese SEO glossary entry into this English walkthrough.
Get YuTing Chiu’s stories in your inbox
Join Medium for free to get updates from this writer.
Largest Contentful Paint, or LCP, measures when the largest visible image or text block is rendered during loading. A product photo is a good candidate, but check the trace to see which element actually counted. For real visits, Google’s web.dev guide recommends 2.5 seconds or less at the 75th percentile. A single trace helps you investigate one load. Field data tells you what happened across real visits.
Read four timestamps before choosing a fix
In Chrome DevTools, record a page load at a mobile viewport. Find the LCP element, then check when the HTML response began, when the image request started, when the download finished, and when the element appeared. In a hypothetical trace, those milestones might be 0.7, 2.4, 2.8, and 4.0 seconds. The browser waited 1.7 seconds to start the image request and another 1.2 seconds to paint it. The download itself took 0.4 seconds.
For a late request, compare the initial HTML with the rendered page. If a carousel script inserts the first photo, test putting that image in the initial markup and loading it eagerly. If the request starts promptly and the transfer dominates, check whether the delivered image is larger than the mobile layout needs. If the download finishes early, investigate what holds up rendering. A carousel that hides its first slide until initialization gives you a concrete place to look.
Give the next person a before-and-after trace
Save the tested URL, viewport, LCP element, HTML evidence, and the interval you want to reduce. Change one thing, repeat the trace under comparable conditions, and check that the expected interval moved. If you have field data, track the real-visit measure separately. The handoff should say what changed and what you can verify from the trace.
Original Traditional Chinese glossary entry · Download the basic page markup check (MK-322) · ThinkWithBlack English methods
