Skip to content
SilktideHelp

Preloaded LCP image

Silktide checks whether the main image on your page - the largest thing visitors see when it loads - could appear sooner if the browser were told to fetch it earlier. Pages feel loaded when their biggest content appears, so this one image often decides how fast the whole page feels.

The moment that image appears is measured as Largest Contentful Paint (LCP), one of Google's .

Why this matters

Browsers download files roughly in the order they discover them, and the main image is often discovered late - buried behind stylesheets and scripts, referenced from , or inserted by a script. The result is a page that builds its frame quickly and then leaves a hole where the most important content should be.

Because visitors judge speed by when the main content appears, and Google factors LCP into search ranking, telling the browser to prioritise this one file is among the highest-value speed fixes available.

How to fix it

  1. Preload the image so the browser fetches it from the very start of the load:
<!-- In <head>: fetch the hero image immediately -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
  1. Alternatively, if the image is a plain <img> element, add fetchpriority="high" to it directly.
  2. Never this image - loading="lazy" on the main image delays exactly what should come first.
  3. Prefer a plain <img> element over a CSS background image for the main visual, so the browser can discover it early on its own.

How Silktide tests this

  1. Load the page in a real browser, using the device type, connection speed, and test location configured for your speed tests.
  2. Identify the largest content element visible as the page loads. If it is an image, check when the browser discovered and downloaded it.
  3. If fetching the image earlier would make it appear sooner, report it with the estimated time saving.

Troubleshooting

The main image changes between pages or devices

Preload hints are per page, and the "largest" element can differ between desktop and mobile layouts. Template logic can emit the right preload per page, and the hint's media and imagesrcset attributes handle responsive variants.

I preloaded the image but the finding remains

The preload URL must exactly match what the page ultimately renders - a different size variant or a URL rewritten by a does not count. Also check the hint is in the page's head itself, not added later by a script, which defeats the purpose.

Learn more

Last updated

Was this page helpful?