Preloading images used in LCP elements in WordPress

LCP, known as Largest Contentful Paint, is an important measure of a web page's loading performance, which represents the speed at which the page's main content loads. Specifically, LCP measures the time from when a user starts loading a page to when the rendering of the largest image or block of text in the viewport is complete. In order to provide a great user experience, websites should strive to achieve an LCP of 2.5 seconds or less for at least 751 TP3T of page views.

In many WordPress sites, a larger image is used as a background or Slider on the first screen of the page to attract user attention. Before these images are loaded, the area occupied by the image will show a blank or alternative color background, which is not a good user experience. In some themes, "Site Loader" will be used to optimize this aspect of the user experience, but it will reduce the opening speed of the entire page, it is difficult to say whether it is positive or negative optimization of the overall user experience.

Use the rel=”preload” attribute to preload key site images

In fact, using the HTML rel=”preload” attribute, we can preload these images, so that users can open the website page, in time to see these Banner images. To achieve this is very simple, take a look at the following code at a glance.

<link rel="preload" as="image" href="path/to/your/image.jpg">

In addition to preloading image resources, we can also preload videos, font files, CSS and JS files, which are static resources that need to be used in the first screen of the page.

Related resources

• For more information on optimizing your LCP, check out Google's article onOptimize Largest Contentful PaintThe article.
• For more information about rel=”preload”: see MDN Documentation on rel=preload