How we passed Core Web Vitals — LCP — preloading images

2 min readApr 14, 2021

TL:DR we preloaded our main image as early as possible to improve LCP

What is preloading?

Preloading allows you to start downloading resources to the browser before they are requested from the HTML.

or as web.dev tells us
By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page.

How we did it

Preloading was quite easy to implement, you add an element to the page with

<link rel="preload" as="image" href="<img_url>" importance="highest">

In our Rails application we only wanted it to download this image if we were on the page that we needed the image so we wrapped the preload in an if. In this case we want to preload our Product Detail Page (PDP) image.

<% if on_pdp? %>
  <link rel="preload" as="image" href="<%= pdp_main_photo(@listing) %>" importance="highest">
<% end %>

Complications

We had added this change months before and had seen no impact. We later discovered we were losing most of its value due to domain sharding which you can read about here. The impact below is when we resolved this domain sharding issue for PDP.