Table of Contents
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.
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-
WebPageTest-
Testing
Loading=”lazy” attribute:
By default, WordPress will lazy load above-the-fold images too by implementing the 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)
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.
The featured image is loading at a 4.22sec mark in Chrome Dev tools Network panels.
Waterfall chart
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.
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”
Comparison:
- First Screenshot: with loading=”lazy” attribute.
- Second screenshot: with Loading=”eager” attribute
- Third screenshot: With loading=”eager” + rel=”preload”
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
- Audience
- Technology
- Select the date and choose Screen resolution:
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
- Tech
- Overview
- Select the date and set it to last 28 days or 30 days or more, this way you will see more data
- Screen Resolution
Scroll down you will see ‘Screen resolution’ and click the ‘view screen resolution’ button.
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?
- You can simulate Screen resolution on your Chrome Dev tools and see if your hero image is in the viewport or not.
- You can simulate and test your site in Browserstack or Lambda (Affiliate Link), etc
- 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).
div.elementor-widget-container>div.post–wrapper>h1.post–title
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
If 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:
- Swift Performance Pro: See the Version 2.3 beta to learn more
- Unlimited Elements addons for Elementor.
- Code Snippet Plugin: My PHP skill are pretty bad.
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.
