Optimize rich media by first identifying the page’s actual Largest Contentful Paint (LCP) element, then making that resource discoverable and appropriately sized, reserving space for images and embeds, and checking the result in field data. Do not lazy-load the LCP image. Core Web Vitals’ “good” thresholds are LCP at or below 2.5 seconds, Interaction to Next Paint (INP) at or below 200 milliseconds, and Cumulative Layout Shift (CLS) at or below 0.1, assessed at the 75th percentile separately for mobile and desktop users. web.dev’s Web Vitals guidance explains the metrics and thresholds.
Find the failing metric and the media element that matters
Start with field data for the affected page or template. LCP measures loading, INP measures responsiveness, and CLS measures visual stability; a poor score in one does not establish that images are the cause of another. Review mobile and desktop separately at the 75th percentile, rather than relying on a single lab run or an average.
As an Amazon Associate I earn from qualifying purchases.
Identify the actual LCP candidate before changing assets. It may be an image, a video poster or first frame, a CSS background image, or a text block. It can differ by viewport and visit, so confirm the candidate under the conditions you are trying to improve. web.dev’s LCP overview describes the candidate, while its LCP optimization guide, last updated March 31, 2025, covers improving its loading path.
- If LCP is poor and the candidate is media, investigate discovery timing, priority, and transfer size.
- If CLS is poor, look for media or third-party content appearing without reserved space.
- If INP is poor, inspect the scripts and interactions associated with players, widgets, or other media features; smaller image files alone may not fix responsiveness.
Field experience varies with device capability, network conditions, other running processes, and user interactions. Lab tools are useful for isolating likely causes and validating changes, but they do not represent the full range of real-user conditions.
Make the LCP image or video start loading early
Expose the resource in the initial HTML
For an LCP image, make its URL discoverable in the initial HTML response—for example, through the image’s src or srcset. If JavaScript inserts the image later, the browser may not begin fetching it until that code runs. If the LCP is a CSS background, consider whether an ordinary image element is more appropriate; where discovery remains delayed, the LCP guide describes using preload or a high fetch-priority hint.
Do not lazy-load the LCP image
loading="lazy" defers a request until the browser determines that the image is in or near the viewport. That can add avoidable delay for the image that determines LCP. Use lazy loading selectively for below-the-fold images instead, and reserve their layout space as described below.
Use priority hints selectively
For a genuinely important image, fetchpriority="high" can signal that the browser should prioritize fetching it. Treat this as a targeted hint, not a blanket setting for every image: confirm that it addresses a measured discovery or prioritization problem and recheck the field result.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
- Used Book in Good Condition
Serve an image sized for its rendered slot
Responsive image markup lets the browser choose a suitable candidate for the display size and device. Use srcset to provide candidate files and sizes to describe the rendered slot at different viewport widths. For example:
<img
src="/images/feature-960.jpg"
srcset="/images/feature-480.jpg 480w,
/images/feature-960.jpg 960w,
/images/feature-1440.jpg 1440w"
sizes="(max-width: 600px) 100vw, 960px"
width="1440"
height="900"
alt="A description of the feature image">Replace the example paths, dimensions, and slot sizes with values that match your actual files and layout. The browser uses the candidates and slot description to select an image; responsive markup does not itself create optimized variants, so those files must exist and be appropriate. The web.dev responsive-images guide reports that serving desktop-sized images to mobile devices can use 2–4 times more data than needed. This is a general estimate, not a guaranteed saving for a particular page.
Choose a rendition that provides enough pixels for the displayed size without routinely sending a desktop-scale file to a small slot. Balance transfer size with visual quality: overly aggressive compression or an undersized candidate can make the image visibly poor without solving the underlying loading delay. See web.dev’s responsive-images lessons for the browser-selection model.
Rank #3
- Used Book in Good Condition
Reserve layout space for images, video, and embeds
Give images and video dimensions that reflect their aspect ratio so the browser can allocate space before the asset arrives. The web.dev guidance is: “Always include width and height size attributes on your images and video elements.” CSS aspect-ratio can also reserve a box. For example:
Recommended Free Tools
<img src="/images/article.jpg" width="1200" height="800" alt="A description">
<video controls width="1280" height="720">
<source src="/video/demo.mp4" type="video/mp4">
</video>
.embed-frame {
aspect-ratio: 16 / 9;
}Use dimensions or an aspect ratio that match the selected source. If responsive images use different crops or shapes, reserving the wrong ratio can still cause a layout shift when the actual content is rendered. web.dev’s CLS guide covers reserving space and other common shift causes.
Third-party embeds, ads, and iframes need the same attention. Allocate a predictable box before their content loads where possible. If a third party can return variable dimensions that you cannot control, design the surrounding layout so its arrival is less likely to push important visible content around.
Keep media features from hurting responsiveness
A player, gallery, embed, chat widget, or plugin may add scripts and main-thread work beyond the cost of the media file itself. If INP is the problem, inspect whether delays follow interactions with those features and whether their code is necessary. Remove unused widgets or plugins and review whether a feature can be deferred or simplified. web.dev’s Core Web Vitals guidance for business decision makers discusses reviewing scripts and features that can affect performance.
Do not assume that every rich-media issue is a file-size issue. A media element can affect loading, layout stability, or responsiveness through different mechanisms; match the change to the failing metric.
Re-measure the change with field data
- Record a baseline. Note the affected page or template, metric, and mobile or desktop segment from field data.
- Diagnose in a lab. Use a controlled run to inspect the LCP candidate, when its request starts, image selection, layout shifts, and scripts involved in interactions.
- Change one relevant cause. For example, expose a late-discovered LCP image, remove lazy loading from that image, correct responsive candidates, or reserve space for an embed.
- Validate the implementation. Check that the browser selects the intended candidate, the image or video has the correct reserved dimensions, and no new layout or interaction problem was introduced.
- Compare field results. Revisit the same page or template and the same metric, comparing mobile and desktop independently at the 75th percentile. A better lab run is a useful diagnostic signal, not proof that real users improved.
Use ScreenshotNeo to capture visual checks without browser setup
For repeatable before-and-after visual checks, ScreenshotNeo is a website screenshot API and MCP server. A screenshot can help inspect whether media appears and whether layout space is reserved, but it is not a substitute for Core Web Vitals field data.
Best Value
Or skip the browser setup
One GET request returns a screenshot; the example saves a WebP capture. See the ScreenshotNeo documentation for API options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners are accepted and removed before capture, along with known newsletter popups and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides screenshot tools for AI agents, including Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.
Frequently Asked Questions
Can compressing images improve INP?
Not necessarily. INP concerns responsiveness; if it is poor, investigate scripts and interaction work associated with media features rather than assuming image transfer size is the cause.
Does a good lab score mean field Core Web Vitals are good?
No. Lab runs help diagnose controlled conditions, while field data reflects real users across devices, networks, and interactions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
