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. 

  1. Drop the featured image from above the fold.
  2. 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.

Page-speed-insight-LCP

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.

Read More

How To Detect LCP Elements On Your Website

We can’t discuss fixing web vitals without discussing one key factor called LCP, the Largest Contentful Paint. LCP is essential to the user experience. People typically don’t like to wait for a page to start loading when they could immediately get a faster experience elsewhere. 

LCP tells you how long it takes to load the main contents of your page and become readable to the users. The faster the LCP is, the better-performance impression a user gets on your website. 

The largest Contentful Paint is considered one of the main factors on the web vital and starting to play a vital role in your page rank on the SERPs. To be in favor of Google and have pages that deliver a better experience for the visitors, it’s important to remain on top of your LCP.

Poor LCP can be one of the reasons for higher bounce rates, ranking issues, or even lower conversion rates.

What is a Good Or Bad LCP?

According to Google, the main content of a page should load within 2.5 seconds when a user tries to visit a page, which refers to having a good LCP. If the main content takes more than 5 seconds, people are likely to exit from your site and be considered poor LCP. 

Usually, when a page can maintain a good LCP (main content load time under 2.5 seconds) for 75% of the time, the performance is considered good in Google Search Console.

This image explains how LCP ratings are categorized. 

Google-Largest-Contentful-Paint
Image credit: Semrush.com

What can cause poor LCP and how to detect it?

There’s not a definite element that is responsible for LCP. Anything that slows down the page rendering process could be the reason for the LCP issue on your pages. Usually, the elements that take up a lot of space, media players, unoptimized images, social media buttons with 3rd party connections, and newsletter sign-up forms can increase your page’s load time.

If we dive deeper to find the primary reasons for LCP, they can be classified this way.

1. Slow Server Response Times

Regardless of how much you try to optimize your website, if you have a slow server, its response time will slow down your page loading matrices. This will definitely result in a poor LCP record.

Bad server back-end infrastructure, unoptimized databases, and longer time to resolve API requests are often the reasons for slow server response time. 

So the first step towards improving your LCP records is to host your website on a fast web server. 

2. Slow Resource Load Times

Resources that are large in file size or have a dense visual impact will take longer to load. Unoptimized images, GIF files, videos, and many text content above the fold will affect your LCP record. 

The best way to take care of your LCP is to compress file size, ensure loading only necessary elements above the fold, and avoid video or large image files in the first print.

3. Render blocking Javascript and CSS

CSS and Javascript play a significant role in how they are being served. Adding javascript and CSS to make a fancy-looking web page will eventually cost your page performance. 

It’s true that without CSS and javascript codes, we can’t add dynamic, interactive, and attractive elements to our websites. But the timing of execution for these files should be taken care of. If you load them in head and they take longer execution time, it will block other website assets from loading. 

Reducing render-blocking assets can significantly boost your pages in terms of LCP. Still, you must remember while fixing render-blocking, you are not shifting important libraries and javascript & CSS codes to the footer. This might end up with a broken web page or an accessibility issue.

4. Client-side Rendering

Rendering web pages in the browser with JavaScript is a popular web development method. Client-side rendering can be one of the main reasons for LCP issues if your pages use this method. 

Client-side rendering involves the browser collecting and loading javascript before rendering primary content on the page. The webpage might struggle to pass LCP matrices depending on the rendering time and complexity.

So when you are concerned about your LCP and have client-side rendering on your site, consider optimizing or avoiding client-side rendering if possible. 

How to discover LCP elements on your page?

To fix LCP issues, you need to know what your LCP is. I have ordered the steps we follow to analyze the LCP of a web page and have the plan to take necessary action to fix it.

1. Use Google Search Console

A good way to confirm your page has LCP issues is by checking Google Search Console’s web vital section. The web vital section displays URL’s performance status collected across real users’ devices. You will have a unique report for desktop and mobile versions. 

When the URLs are good, your site LCP has to be good. But when they are marked as “need improvement” or “poor,” you might need to check which web vital metrics are actually flailing & need rechecking.

web-vitals-google search-console

2. Use page speed insight

Page speed insight is a dedicated tool to instantly check the web vitals of a page over the latest 28-day collection period and via live test. When the origin data in page speed insight has an LCP of less than 2.5 seconds means it’s in a safe range.

Origin-Page-Speed-Insght-

It’s the more than 2.5 sec LCP when you should be concerned and try to fix it. The instant test of Page Speed Insight should help you identify elements that are responsible for LCP.

Steps – 

  1. Go to page speed insight
  2. Perform a test on your page.
  3. Scroll down to the “Diagnose performance issues” section.
  4. Then set the “Show audits relevant to” to LCP.
  5. You will be displayed the opportunity to improve LCP and diagnostics.
LCP-shortlist

3. Use Ezoic’s Browser Extension

Another easy way to inspect your LCP elements is via the browser extension by Ezoic. Usually, this extension is useful for creating ad and video placeholders on your pages. You can adjust those placeholders and test different configurations to boost Ezoic revenue.

There is another section called LEAP where you can perform performance-related alerts, debug CDN on a page, analyze the LCP and highlight LCP elements. After analyzing a page, make sure to toggle the “Highlight LCP element” for the plugin to highlight the LCP element in yellow.

Ezoic-browser-extension

4. Test Your Page On Web Page Test

Webpagetest.org is a page performance testing tool that provides in-depth insights. When you scan a page for web vitals, this tool will give you the scores and elements responsible for LCP. 

This is a handy tool to inspect layout shifting issues as well; you can see which element is responsible for the layout shifts on your pages, making it easier for you to fix it. 

The web Page Test report will highlight the LCP elements with green and provide the timing.

Once you are aware of the reasons for LCP, you can proceed to optimize the LCP content to fix LCP issues on your page if any. Here are a couple of tips on fixing LCP issues.

Few Tips To Fix LCP Issues On Your Page:

1. Optimize your images: Make sure your images are lightweight while the quality is intact. I prefer to keep images between 50 – 100 Kb whenever possible, and it’s quite achievable if you are not running a photography website, portfolio website, or any sites where images are a priority. 

2. Preload your logo: Preloading the logo does not add much to performance, but you would want to load your site logo as soon as possible. This usually gives a 2-5% of boost to LCP timing when done right.

3. Avoid using too many fonts: Fonts make a site attractive but loading too many font files will increase the asset load chain and may be responsible for the late printing of texts on a web page. 

4. Localize and preload above-the-fold fonts: Although google fonts are fast, my favorite strategy that seems to work every time is localizing above-the-fold fonts and preloading them. While preloading, you need to be sure that these font files are not too heavy. In addition, your web server’s speed needs to be fast for localized font files to be served faster.

5. Optimize Javascripts: To optimize your JavaScripts remove unused codes, make sure the code is up to date and compatible with modern browsers, use modern JavaScript libraries and try reducing payloads. A caching plugin with javascript management options makes the job easier for you.

6. Optimize CSS codes: Compressing CSS files and implementing critical CSS often solve render-blocking issues related to CSS. Removing unused CSS files from your WordPress site can help scale down the LCP metric.

Relevant posts:

  1. Case Study – Article to Video by Ezoic and Its Impact  
  2. Ezoic Site Speed Accelerator Price Review and Test
  3. 5 Best WordPress Speed Optimization Services You Can Hire

Read More

How to Speed Up a WordPress Website Running Ezoic Ads

Website performance has evolved as an important aspect not only for SEO but to provide a fast & smooth user experience which will eventually help your site to be in favor of search engines. 

Benefits of a fast site:

  1. Better crawling rate for crawlers. 
  2. Better page experience. 
  3. Less bounce rate.
  4. More page views.

While we have the advantage of CDNs, Caching plugins, and VPS servers for WordPress sites, I encounter many people posting difficulties in passing speed tests and web vitals for sites with Ezoic ads.

With Ezoic connected to a site, it acts as a proxy between the website site and its users. They use a custom CDN that is augmented to improve performance for sites using the platform. Although Ezoic claims that typical caching plugins such as WP rocket, W3 Total Cache, and Siteground optimizer work on sites that are name server or Cloudflare integrated, you might not see an upgrade unless you decide to scale down the heavy assets from your website.

Scaling the impact of your website assets on performance is not straightforward. It might depend on various factors such as your host, theme, plugins, 3rd party codes, image formats & sizes, use of multiple CDNs, etc.

Here’s when the Ezoic’s LEAP’Technology scans come in handy. The technology scanner provides you with an overview of the various technologies being used on your site and their impact on your site’s performance. 

ezoic-technology-review

* Keep in mind that you may not eliminate all of these warnings or replace them with alternatives. But it will give you an idea of which technologies on your site needs to be withdrawn and ensure your site passes the web vital metrics for good.

Here are a couple of tips we internally use in SpeedySite to make websites compatible with performance and web vitals. 

Recognition: Speedy Site is a WordPress performance optimization service that is now helping people overhaul their existing asset-heavy websites to give you a lean, best-in-class solution. If you have sites lying around that need a significant overhaul, have an outdated theme or plugin bloat, failing all google user experience metrics, you can reach out to the site overhaul service on SpeedySite.

1. Use Name Server or Cloudflare Integration On Ezoic

Ezoic lets you integrate your website via different options.

  • Cloudflare Integration (this means Cloudflare runs the DNS server)
  • DNS Server integration (this means Ezoic runs the DNS server)
  • WordPress Plugin (we did not find this option useful for performance)

Using the Cloudflare integration is recommended because a CDN like Cloudflare can speed up your site significantly and take the load off your origin server. In addition, you can customize your Cloudflare settings according to your need when required, unlike Ezoic DNS server integration.

Although, DNS server integration does a great job and manages all the records and server configurations without needing your action.

2. Use a lightweight & SEO-friendly theme

A website’s theme affects your site performance and search engine rankings. Having a well-coded and lightweight theme will help your site’s accessibility, SEO, and speed. We use Generatepress with custom premade templates + hooks, and blocks to reduce page size, so a good-looking, clean design is intact. 

Ezoic Technology library can provide you with a list of fast themes compatible with their platform.

Ezoic-Technology-Library

3. Unload plugins & replicate the functionality with custom elements

Plugins are very helpful in extending your website’s functionalities. But overusing plugins can harm your website performance. Try using fewer plugins as long as possible while ensuring your website has crucial active functionalities.

For example, we build author bio blocks, Social share buttons, review blocks, and comparison blocks using WordPress hooks and have them running only where it’s required to avoid installing individual plugins for each feature. This gives us full customization ability in terms of appearance as well. 

Now, this might not be a feasible option for everyone – hence we try to share tutorials on such topics in this weekly email. A few tutorials are instantly available in our previous emails as well. Additionally, you can reach out to SpeedySite for such modules, but that comes with a complete overhaul package.

Like themes, you can identify plugins that can severely impact site performance and find alternatives via the Ezoic technology section.

Ezoic-plugin-list

4. Remove or host Google Fonts Locally

Google fonts can harm your site performance if not used properly. If you don’t want to miss out on the extra level of elegance, it adds you can host the Google fonts locally. In Generatepress, we host the fonts locally using its built typography manager, but you can also utilize the OMGF plugin for this purpose.

If you don’t want Google fonts on your site, check this guide with multiple options to remove Google fonts from your site. 

5. Avoid large images above the fold & optimize fonts

Loading heavy assets on the website head or within the first print is a bad practice. Although, an element with a background image loaded instead of a CSS gradient that occupies the entire viewport is not considered a candidate for LCP issue. 

You would want to load the lightest possible assets in the first viewport of a page. Here are a few tips:

  1. Have your logo compressed and preloaded (if it’s an image).
  2. Optimize page title font size for mobile.
  3. Add a gradient cover or background image to the page title if you want to.
  4. For the background image, compress the size without losing the image quality.
  5. Preload the fonts that are in use within the first viewport.

6. Host Google Analytics Locally  

Hosting Google Analytics locally can help speed up your site by reducing extra DNS lookups. The analytics script warns about caching because they have their HTTP caching header expiration set short. 

When you host it yourself, your CDN or server’s HTTP caching headers will automatically be applied. In other words, you have complete control over the caching of the script. You can use Flying Analytics plugin by Gijo Varghese to host analytics on the server.

7. Load 3rd party & custom javascript at footer

Putting Javascript in the footer of an HTML document is good practice for performance. This is not the case for libraries like jquery because some other javascript might be dependent on that. However, we should design the site so that the maximum javascript code is placed in the end to reduce. 

You can use the Header & Footer plugin or use Element on Generatepress and set them to load on the footer. Even some CSS files that are not loading above the fold can be set to the footer. However, you will need to ensure the stylesheet loads before the ad scripts start loading.

8. Enable LEAP & Ezoic CDN

Next, you should take advantage of Ezoic’s CDN and have the cache settings values configured as below.

  • Enable Caching For Cookies – ON
  • Default Cache Age (s) – 2592000
  • Override Cache-Control Headers – ON

You can keep the rest of the values as default. Once you are done with the cache settings, you must adjust the LEAP settings under the optimize section. This varies from site to site and needs proper testing to understand which configuration will work best for your site.

If you have configured it before but haven’t gotten a positive output, you can reach out to SpeedySite professionals

9. Additional Tip To Improve Web Vital Score With Ezoic

This is not something related to performance tweaks, but when you enable Ezoic’s Interstitial ads, which basically are full-screen ads that cover the interface when you visit another page on the same website, it improves your overall web vital record, especially LCP and FCP. 

This is because when a user tries to visit the next page and the interstitial ad loads, the target page is actually loading behind the ad cover. Users can see the page almost instantly when they cancel the ad. 

This is a similar concept related to link preload or instant click mechanism used in most of the caching plugins but with the additional advantage of an ad being displayed for a revenue boost.

Summary: With such steps combined, we successfully passed web vitals with Ezoic ads running on our sites, even though these sites are not entirely lightweight. Here’s how our site recovered from vitals & page experience issues.

Read More

How To Check SEO and Web Best Practice Compatibilities

We want our site to be flawless to avoid penalties or compatibility issues with search engines. Rectifying technical SEOs, Removing possible accessibility issues, and following best practices of web development are tiny details that can decide your site’s performance on search engines.

To secure these criteria, the basic step is to identify the issues on your page. While we usually lean towards great tools like Ahref and Semrush to scan for page-related issues, one quicker and more efficient way to do this is to perform lighthouse scans via your web browser.

Lighthouse, previously known as the “Audits tool,” is a tool to identify and fix common problems that affect your site’s performance, accessibility, and user experience.

These are the simple steps to run a lighthouse scan on pages across your site:

  • Open an incognito browser window and click on the three dots in the top right corner.
  • Open your website page where you want to carry out the test. 
  • From there, navigate to More tools > Developer tools.
incognito-mode
  • Next, select the lighthouse tab on your Dev toolbar. (click on the drop-down icon if Lighthouse is not listed among the visible tabs)
  • Under the “generate lighthouse report” section, set the Mode to “Navigation,” select your preferred device type for testing, and check Performance, Accessibility, Best practices, and SEO under Categories.
Lighthouse_test
  • Once done, click on Analyze page load (the test should take a couple of seconds based on your site speed and asset count)
  • When the test is complete, Lighthouse will rate your page per category and display technical faults, if there are any, similar to this example.
Lighthouse-scan-result
  • Lighthouse reports are great and let you find critical issues on your pages that you might have never thought existed. I encounter many silly mistakes on various page tests, and fixing those issues has been helpful to those sites (personal sites).
  • Moving forward, you can switch the available reports to find individual flows in each category. 

Once you know where the issue is, it becomes easier to resolve it yourself or hire someone to fix it. In addition, performing a lighthouse test takes just a couple of minutes, which can be an essential step towards improving your site to be more favorable to search engines. 

You will receive some recommendations on where to start, and getting these small details resolved will definitely boost the site’s overall impression for real users and search engines.

Similar articles:

  1. 5 Best Free Plagiarism Checker Tools You Can Try
  2. How to set up a WordPress multisite [step-by-step tutorial]
  3. Free Amazon Affiliate WordPress Plugins [2022 Update]
  4. Few Ways To Optimize Images Without Using Plugin 

Read More

Best Autoptimize WordPress Plugin Configuration Tutorial for 2021

Since you have already searched for a WordPress Autoptimize tutorial on Google, you are certain you want to know how to configure an Autoptimize WordPress Plugin to make your website faster.

Read More