Preload hero image to improve LCP in the Field-data and lab-data

Preload lets you tell the browser about critical resources that you want to load as soon as possible, before they are discovered in HTML. This is especially useful for resources that are not easily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.

Preload hero image to improve Largest Contentful Paint

Whenever I run a Page Speed Insights (PSI) test on my post or page, PSI captures my hero image as the Largest Contentful paint (LCP) element. (See the screenshot below).

What is Largest Contentful paint (LCP)?

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Follow Web.dev article on Largest Contentful Paint in more details.

PSI detect my Hero image or Featured Image as Largest elements on the Viewport (LCP)

The question usually comes to our mind:

  • Whether to preload hero image or feature image?
  • Is it worth preloading or not?

Today in this blog post, I’m going to answer your question with real data or Field data using Google Analytics and web-vitals JS libraries and give you 3rd parties plugin recommendations.

From the data and after the web-vitals JS implementation, you can decide whether it is best to preload the hero image or not.

From my research, preloading critical resources help in improving LCP,  it tells the browsers to load critical resources as soon as possible.

Benefit of Preloading

This is a test between with loading=”lazy”,” eager” attribute and “eager” with rel=”preload”.

In this example, I took the Creative Agency landing page template I created with Elementor with no Optimization other than Cloudflare and Cloudinary for image optimization (Referral Link).

Here the setup I used while testing

What I got in this research might be different than yours because there are lots of variables to consider like response time of a website (Time To First Byte), 3rd Parties JS code, Chrome extension, your connection type, etc.

Environment while testing:

Chrome Dev Tools-

With Fast 3G connection set up while testing

WebPageTest-

WebPageTest environment while testing

Testing

Loading=”lazy” attribute:

By default, WordPress will lazy load above-the-fold images too by implementing the native lazy loading technique.

With browser/native lazy loading technique

The featured image is loading at a 5.72sec mark in Chrome Dev tools Network panels.

Waterfall chart

You can see the waterfall chart, my featured image is loading at 36 marks in WebPageTest results which is kind of bad, and visitors will take 4 to 5 sec to see the featured image and it can hurt Largest Contentful Paint (LCP)

Waterfall showing feature image is loading at 36 row mark

Loading=”eager” attribute:

You can see the waterfall chart, my featured image is loading at 36 marks in WebPageTest results which is kind of bad, and visitors will take 4 to 5 sec to see the featured image and it can hurt Largest Contentful Paint (LCP).

FYI: I created Elementor widgets with the help of the Unlimited Elements for Elementor plugin so that I can switch the default loading attribute to loading=”eager” or lazy otherwise I have to use a 3rd party plugin to achieve it.

Eager attribute with hero image

The featured image is loading at a 4.22sec mark in Chrome Dev tools Network panels.

Waterfall chart

With loading="eager" attribute

The featured image is loading at 29 marks in WebPageTest results which is much better than the previous one but can be improved further with the help of rel=”preload”

Loading=”eager” + rel=”preload”:

After implementing loading=”eager” attribute with rel=”preload”, the hero image/featured image is loading much quicker and visible to users and it can improve LCP in the field and lab data.

Eager with Preloading

We can see a huge improvement from 5.72sec to 2.26sec.

Waterfall chart

After setting the loading=”eager” attribute and preloading, my featured image is loading at 8 marks in WebPageTest results which is far better than loading=”lazy” and “eager”

Eager attribute with Preloading on hero image

Comparison:

  1. First Screenshot: with loading=”lazy” attribute.

With browser/native lazy loading technique

  1. Second screenshot: with Loading=”eager” attribute

Eager attribute with hero image

  1. Third screenshot: With loading=”eager” + rel=”preload”

Eager with Preloading
As you can see from the above comparison, there are benefits of preloading the hero image.

But the question is still there.

Should I preload hero images? (Dilemma)

As you know, I was in dilemma too whether to preload my hero image or not on my post, I asked a question on Facebook speed group but denied it because the moderator thinks I was spamming but that was a legitimate question. ( I didn’t get the answer I came for)

But thanks to Phil Walton and Barry Pollard for their incredible tutorials on the web.dev in debugging web vitals in the field and the smashing magazine respectively, their tutorials help me debug the problems and give me insights on what to do.

To answer the question, Yes it depends on your visitor’s “Screen Resolution”.

Ways to get the Screen resolution

I assumed most of the webmasters/ website owners already implement Google Analytics on their website and collected tons of user data.

Universal Analytics (UA) users:

If you’re UA users, you need to click the ‘Audience tab’ this will open the drop-down menu and you need to click ‘Technology’ and choose ‘Browser OS’.

Follow the steps

  1. Audience

Audience tab in Universal Analytics

  1. Technology

Technology in Universal Analytics

  1. Select the date and choose Screen resolution:

Screen Resolution in Universal Analytics

Google Analytics 4 (GA4)

To get your visitor’s screen resolution, head over to the ‘User’ tab then click the ‘Tech’ and click the Overview to view what browsers, OS, Device category your visitors are using, etc.

Follow the steps

  1. Tech

Technology In Google Analytics 4

  1. Overview

Overview in GA4

  1. Select the date and set it to last 28 days or 30 days or more, this way you will see more data

Choose the date

  1. Screen Resolution

Scroll down you will see ‘Screen resolution’ and click the ‘view screen resolution’ button.

Screen Resolution

I used GA 4 for 2 days and discontinued it because GA4 has less features (when I was using) compared to Universal analytics and if I use Google Tag Manager JS to deploy Google Analytics, it will add more weight to my website.

What else can we do with these data?

  1. You can simulate Screen resolution on your Chrome Dev tools and see if your hero image is in the viewport or not.
  2. You can simulate and test your site in Browserstack or Lambda (Affiliate Link), etc
  3. Using Web-Vitals JS libraries.

Other ways to identify is by implementing Web Vitals JS libraries and sending debug information (using Custom Dimension) as an event to Google Analytics JS so we can analyze the data with Web Vitals Report.

I will take remove unused CSS manually as an example to demonstrate because I don’t have enough data to show for the above template.

If you inspect elements on my post and search it with the ‘selector’ below, it will refer to my hero image.( Please watch the video, if you don’t know)

div.elementor-widget-container>div.post–wrapper>picture>div.image-zoom-wrapper>img.image-zoom

(basically above debug identifiers is referring to my hero image and % of page hits on the elements is 31.67% (screenshot below) which is high, so it means eager with preloading is a great idea to implement).

Feature Image Hit

div.elementor-widget-container>div.post–wrapper>h1.post–title

Heading 1 as Largest elements in the viewport

Debug identifier is referring to me as H1 tag.

But I still don’t understand why my code block (screenshot below) that is way below is consider as LCP worthy.

div.elementor-widget-container>pre.wp-block-code>code

LCP worthyIf you know , please let me know and I need to learn.

Not all people are tech-savvy like me and can’t do what I did on my landing page or blog post, so it means your best way to end my post is to recommend 3rd parties plugins that will identify critical resources and preload your critical resources automatically:

  1. FlyingPress.

FlyingPress- preload critical images

  1. Swift Performance Pro: See the Version 2.3 beta to learn more 
  2. Unlimited Elements addons for Elementor.

Preload set up in Unlimited Elements

  1. Elementor Pro – custom Code (affiliate link).

Preloadind in Elementor Pro custom code

  1. Code Snippet Plugin: My PHP skill are pretty bad.

Preloading in Code snippets plugin

  1. WP Rocket

if you love this post and gave you insights about your visitors. Don’t forget to support me by buying a cup of coffee or use my Affiliate link.

Thank you Gijo Varghese for reviewing my post and providing me FlyingPress image.

I got tired of Advertisements & I'm not placing any Adsense Code on my site anymore which means I cut all the money I will get in the future.

If you love the content I wrote, please support me by using buy me a coffee link or any Affiliate links I listed on my Blog post.

Thank you