Skip to Main Content

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 field data, webpagetest result, and web-vitals JS data, you can decide whether it is the best decision to preload the hero image or not. From my research, preloading critical resources like web fonts, and above-the-fold images improves LCP and you can see the result in the conclusion.

Setup

This is a test between-
  1. loading=”lazy“
  2. loading=”eager” and
  3. loading=”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 (CDN) and Cloudinary for image optimization & Image CDN (Referral Link). I use Fast 3G for my testing. After all, I usually test it in extreme cases because I can’t expect everyone will be using a 4G connection when they visit my website. See the screenshot below for the last 30 days. Effective Connection type in firebase performance monitoring js

Environments:

Things you need to considered before complaining are-

  1. There are lots of rendering Blocking resources
  2. Inconsistency in CDN cache hit ratio.
  3. Because the page is tested in fast 3G, it means there are 100 to 500ms latency it means larger the file sizes it will take more time to parse and download the resources.

Chrome Dev tools

With fast 3G connection without cache.

With Fast 3G connection set up while testing

WebPageTest

With fast 3G connection without cache.

WebPageTest environment while testing

Different loading Attribute:

Loading=”lazy”:

By default, WordPress will lazyload 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 and when the image is fully loaded LCP is also triggered. See the screenshot below

Waterfall showing feature image is loading at 36 row mark
Webpagetest Largest Contentful paint Event with loading="eager" attribute

Loading=”eager”:

You can see the waterfall chart, my featured image is loading at 29 marks in WebPageTest results which is far better than the loading=”lazy” attribute counterpart and we can see images is loading much earlier even though there are lots of problems to be considered.

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, give were given higher priorities and jump from 36 in waterfall marks to 29

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”

Webpagetest Largest Contentful paint Event

Now we can see the inconsistency in LCP measurement because it can due to CDN cache hit ratio, 3rd parties domain response time ( cloudinary, unpack) and Cloudflare response time.

Loading=”eager” with rel=”preload”:

After implementing loading=”eager” attribute with rel=”preload”, the hero image/featured image is loading much quicker and is visible to the users and it improves LCP.

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”

rel preload with loading equal to eager waterfall
Improve LCP significantly with rel preload and loading eager attribute

Comparison with all the loading attributes:

  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.

Here is the comparison in webpagetest, if you want to see it for yourselves. But the question is still there.

Should I preload hero images? (Dilemma)

Thank you 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 sizes. 

Ways to get the Screen resolution

I assumed most webmasters/ website owners already implemented Google Analytics or any analytics on their websites and collected user data. I am using Google Analytics, so I will demonstrate how to do it-

Universal Analytics (UA) users:

If you’re still using UA and I will recommend you start migrating to GA 4 because All standard Universal Analytics properties will stop processing new hits on July 1, 2023.

If you’re a UA user, 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 fewer 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 or screen size on your Dev tools or use LT Browser and see if your hero image is in the viewport or not.
  2. You can also simulate and test your site in Browserstack or Lambda (Affiliate Link), etc and do the same thing.
  3. Using Web-Vitals JS libraries and sending the debug_target in Google Analytics Events data. And figure out whether it is a good idea to preload a hero image or not.
  4. In Advanced testing, you can use the webpagetest – Desktop Browser Dimensions feature (see the screenshot below).Webpagetest advanced settings in advanced testing

One of the ways I used to identify or debug the Largest Contentful Paint(LCP) is by implementing Web Vitals JS libraries and analyzing the data with the help of Data Studio and Web Vitals report.

—-

I will take remove unused CSS articles as an example to demonstrate because I don’t have enough field data to show you from the above example.

Debug Largest Contentful Paint Elements with Web Vitals JS:

I use Web-vitals JS libraries and send the debug_target (CSS selector) / debug_identifiers events to GA4 and then sent it to Data Studio to visualize the data.

If you do inspect elements on my post and search it with the ‘selector’ below, it will refer to my hero image and title tag.

debug_target from Data studio

First Selector referring to my feature image as an LCP event

div.elementor-widget-container>div.post–wrapper>img.feature-image.skip-lazy.wp-image-5405

The first selector refers to my Feature image because it is the largest element on the page.Heading 1 as Largest elements in the viewport

Debug identifier is referring to me as an H1 tag.

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

2nd CSS selectors refer to my (H1) Heading tag because H1 to H6 are block-level elements and it is visible in the initial viewport of the post.

Plugins Recommendation:

From my understanding, not all people are tech-savvy like me who love digging around, and sometimes it is not possible to what I did on my landing page or blog post, so it means your best way is to implement it with the help of 3rd parties plugins that will automatically preload critical resources (like CSS, fonts, etc):

  1. FlyingPress

FlyingPress- preload critical images

  1. Swift Performance Pro (Affiliate Link): See Version 2.3 (beta) ([NEW] Preload Images) to learn more (if you have a screenshot referring to preloading, please send it to me) (Probably out of beta release right now)

Preloading images in Swift Performance

  1. Automatically Preload “Featured image“ with PHP: Only works with feature images (Attachment below), not with any images visible in the initial viewport or above the fold.

Feature image

        
        add_action('wp_head', 'preload_featured_image', 1); 
            function preload_featured_image(){ 
                if ( has_post_thumbnail() ){ 
                    $id = get_post_thumbnail_id(); 
                    $src = wp_get_attachment_image_src( $id, 'large' ); 
                    $srcset = wp_get_attachment_image_srcset( $id, 'large' ); 
                    $sizes = wp_get_attachment_image_sizes( $id, 'large' ); 
                    echo '<link rel="preload" as="image" href="'.$src[0].'" imagesrcset="'.$srcset.'" imagesizes="'.$sizes.'"/>'; 
                } 
            }
  1. Perfmatters(Affiliate Link):
Preloading resources from Perfmatters
Credit to Perfmatters: https://perfmatters.io/features/
  1. Autoptimize 

Autoptimize metabox

Conclusion:

I have over 4K users that use 1920×1080 screen resolutions accordingly to Google Analytics that are a huge user base.

Please keep this mind that my Google Analytics Data might be inaccurate because of:

  1. Bots can inflate my data.
  2. Adblocker can block any tracking, Analytics JS, etc so it means some data might not send by the browsers.
  3. Disabling JS entirely.

—-

So I decided to test my article removed unused CSS in the webpagetest with many different screen resolutions and turn out my feature image (screenshot or links below) triggers my Largest Contentful Paint elements.

Feature image is my Largest Contentful paint

Recommendation

The best way to figure out the largest Contentful paint (LCP) elements is by monitoring and gathering real user data with the help of web-vitals JS libraries and deciding properly. Because Preloading and Pre-connect can become a double-edged sword if you didn’t do it properly.

You can see the full comparison in full detail (data is unavailable) I have tested on the webpagetest. I hope it helps you too

if you love this kind of post and gave you insights on whether to preload or not preload feature images.

You can support me by buying a cup of coffee or using any of my Affiliate links presented in the post or hiring me. (This commission comes at no additional cost to you but it will keep the website a little help and write more comprehensive articles just for you)

  1. Thank you Gijo Varghese for reviewing my post and providing me FlyingPress image.
  2. Thank you Nicola Caldognetto for sharing the PHP code on the WP Speedmatters’s Facebook Group.

Thank you for reading till this end. Stay safe and don’t forget to post comments if you find this helpful 🙂

Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.

Scroll up further to Load all the comments...

DISCLAIMER: Our Affiliate Links

If you purchase any Products from the list below and in the paragraph, please use my Affiliate links, this commission comes at no additional cost to you but it will keep the website a little help and write more in-depth content.

Meet the Elementor Cloud Upgrade to Elementor Pro