2 min readAn original planning guide. Use the linked primary documentation for platform details and the supported procedure for your environment.
Identify the measured element
Confirm whether the main image is actually the page's LCP element under the chosen test conditions. Record the current source and dimensions.
Inspect delivery choices
Check requested file size, responsive candidates, compression quality, and whether the browser discovers the image promptly.
Review loading and layout
Avoid unnecessarily deferring essential visible content. Reserve appropriate space and check the crop and alternative text in real contexts.
Compare a controlled revision
Test the chosen change under the same conditions, then inspect visual quality, mobile layout, and the measured loading result.
Worked scenario
See the plan in practice.
A visually small hero still downloads a very large source. Responsive candidates may address transfer without changing the page's design.
Review your result
Your acceptance checklist
Element confirmed- Delivery inspected
- Quality checked
Use these checks to identify gaps in your image improvement plan. Assign an owner to any unresolved item before the next dependent step.
The terms behind the task
- Largest Contentful PaintLCP reports when the largest eligible visible content element in the initial viewport is rendered.
- Responsive imagesImage markup that lets a browser select suitable sources for layout size, resolution, or art direction.
- Lazy loadingThe deferral of nonessential resource loading until the resource is needed or near use.
Primary references
For the underlying concepts and current platform details:
