Does removing or dropping the featured image below the fold help LCP
LCP is essential to the user experience. People don’t like to wait for a page to start loading or see a blank page before the main contents load when they could immediately get a faster experience elsewhere.
Page performance analysis tools tell your LCP metrics per page, and as a website owner, you should be concerned with keeping the LCP below 2.5 seconds to load your main content as fast as possible.
In our previous article, we discussed good and bad LCP, reasons that can harm your page LCP, and typical methods to reduce your LCP timing. Today, let’s talk about the featured image, its impact on LCP for your post-type pages, and ways to fix it because they usually receive the most traffic.
Impact of the Featured image in LCP
The featured image is loaded above the fold of your page, which means the browser has to load the image file, and if the file is large in size or your server response time is not fast enough, your page may suffer an LCP issue.
The above-the-fold image asset can be a hero image, a banner, or a carousel. Google considers <img> or <image> element inside an <svg> element for the Largest Contentful Paint. Hence you must optimize these images for a better LCP.
A size of 100+kb image above the fold usually requires a couple of milliseconds and often appears to be the primary reason for LCP. When you need your LCP metrics to remain under 2.5 seconds, every millisecond count, you should consider optimizing it.
Here is an example of a site with a featured image above the fold. The featured image file is the source of LCP, but because all the assets are well optimized and served via CDN, the pages are able to get a much lesser LCP 1113ms than the critical point.
So, if the featured image is causing LCP, does removing it help?
Removing the featured image improves the LCP metric by reducing the couple of milliseconds required to render the image file. If your featured image was heavy in size, say > 500kb, you should get a decent upgrade in terms of LCP after removing it from above the fold.
Then when it comes to mobile devices, where the network and compilation are usually slower, it becomes even more difficult to tackle LCP issues with an image of large-size loading in the first print.
It’s not that after removing the featured image, your site will eliminate the LCP issues. The texts will cover the space and featured image used to cover, and you will still need to optimize your fonts. However, it’s easier to serve optimized fonts than a featured image in terms of performance.
A featured image makes your page look better and adds a nice touch for the visitor to get an idea of what they will find on the page. But when you have to balance performance and design, you could opt for a solution that maintains both conditions.
- Drop the featured image from above the fold.
- Have the featured image on your page, but below the fold.
Shifting your featured image below a few paragraphs (I usually add it below the 2nd paragraph) has helped many sites we have worked on. It maintains the visual image that describes the page and allows the font to load as the largest contentful paint. Then we preload the most important fonts for the browsers to load them as soon as possible.
Is there a way we can keep the featured image for desktop devices and remove it on mobile?
Yes, keeping the featured image above the fold on desktop (if LCP is not an issue on desktop) and removing or shiting it below the fold on mobile can be an excellent solution to tackle your site’s LCP issue.
This will require a simple CSS selector to be used:
@media (max-width: 480px){ .entry-content img {
display: none;
}
}
The @media (max-width: 480px) will trigger for all devices with screen width =< 480px, and then it will select the featured image with .entry-content img and set the display rule to null.
You can try to shift the featured image with the same selector and replace the display:none with the right CSS code to display it below a couple of paragraphs to ensure it appears below the fold.
Note: here, we are discussing the impact of featured images on LCP, so by no means this piece of content intended to say that featured images are responsible for LCP issues on your site. There are many other reasons why a page is suffering from LCP. I have added a couple of other reasons that help LCP to rise.
Here is a test report for a website where we have not changed anything else but dropped the featured image below 3rd paragraph, and that resolved the LCP issues it had by a couple of milliseconds.
Additional reasons for poor LCP
Apart from the featured images on most pages, there are other things that are responsible for LCP. Anything that slows down the page rendering process could be the reason for the LCP issue on your pages.
These elements usually take a lot of specs, unoptimized assets, assets with loading delays, assets with 3rd party connections, advertisements, lots of unoptimized javascript on the head section, etc. We can’t forget about the core server’s response time.
1. Slow Server Response Times
Server response time is a critical factor of LCP. If your server is not fast enough, it might fail to serve above-the-fold assets in under 2.5 seconds. Hence while considering your website host, it’s important to avoid hosts that are not reliable and fast enough.
Bad server back-end infrastructure, unoptimized databases, and longer time to resolve API requests are often the reasons for slow server response time. Always go for a performance-optimized host if you want your website to be fast, web vital compatible, and favorites of search engines with good quality content.
2. Render blocking Javascript and CSS
Javascript and CSS help improve your site design and functionality, but it’s important to optimize them for your host to serve them per request in a way that does not prevent the loading of primary content.
Loading too many Js and CSS codes at the head might increase render-blocking issues. Render blocking is directly proportional to page LCP; hence, you should reduce render blocking as much as possible without breaking your site’s functionality.
3. Slow Resource Load Times
If you have resources loading above the fold that are large in file size, have dense visual elements, are not optimized, videos & gif files, or have lots of text contents, it will affect the page LCP. Consider optimizing those assets or removing/reducing them from the top of your page.
4. Client-side Rendering
Client-side rendering can be another reason for LCP issues. Client-side rendering involves the browser collecting and loading javascript before rendering primary content on the page. If the process is complex and device hardware unable to perform memory management, your webpage might struggle on people’s browsers, increasing the chance of LCP.
So consider optimizing or avoiding client-side rendering if possible.
