Summary: The “First Contentful Paint” delay in WordPress is often due to the lazy loading feature. Our goal is to disable lazy loading on the class of the image causing the issue, by simply adding a piece of code.
What is First Contentful Paint (FCP)
“First Contentful Paint (FCP)” is a fancy term Google uses to describe how long it takes for the first piece of your webpage (like text or an image) to appear on the screen when someone visits. Think of it like waiting for the first brush stroke to show up on a canvas when an artist starts to paint. Google’s timer starts as soon as the page starts to load and stops when something - anything - from your page is visible. This could be a piece of text, an image, or even some graphic designs.
Usually, lazy loading function is the reason shown in Google Page Speed Insights. Lazy loading is a technique used to speed up website loading times. Instead of loading every image on a webpage right away, images are only loaded when they’re about to be displayed on the screen. This means if a user doesn’t scroll to the bottom of a page, images at the bottom won’t load, saving data and speeding up the initial page load.
However, if the very first image or piece of content that should be displayed on your website uses lazy loading, there might be a slight delay before anything appears on the screen. This delay can increase the time it takes for the “First Contentful Paint” (the first piece of content to appear). In turn, tools like Google’s PageSpeed Insights may flag this as a performance issue, because the visitor is left waiting longer than expected to see the first visible content.
So we need to fix this by preventing the lazy loading function for that image class. This tutorial in particular is for WordPress users.
How to fix Google Page Speed First Contentful Paint in WordPress
When using Google PageSpeed Insights, you might notice an image flagged as the cause of a “First Contentful Paint” delay. It’s crucial to understand that it’s not just that particular image causing the slowdown. The tool highlights it because that’s the page you tested. In reality, every image of that specific type or style across your website can contribute to the issue.
The solution? We target the ‘class’ of the image. Think of a class as a label or tag given to certain types of images on your website. By addressing the class, we’re essentially addressing all images labeled with that class, helping to speed up the loading time across multiple pages.
Step-by-step Guide:
Step 1: Find the Troublesome Image Class
Visit the page on your website that’s showing the error. Right-click on the image that’s causing the slow load and select “Inspect” or “Inspect Element”. Look for the class attribute of the image. It’ll look something like class="example-class". Note down the example-class part (or whatever it is named in your case).
Step 2: Paste this code to your themes’s functions.php
Or you can use a plugin such as Code Snippets if you don’t want to modify theme files.
add_filter( 'wp_lazy_loading_enabled', 'disable_lazyload_for_specific_class', 10, 3 );
function disable_lazyload_for_specific_class( $default, $tag_name, $context ) {
if ( 'img' === $tag_name && false !== strpos( $context, 'class="YOUR-IMAGE-CLASS-HERE"' ) ) {
return false; // Disable lazy loading
}
return $default; // Otherwise, use the default setting
}
Replace YOUR-IMAGE-CLASS-HERE in the provided PHP function with the class name you noted down in Step 1.
Again, here are the 2 ways you can add the code:
-
Using a Plugin: Install the Code Snippets plugin from your WordPress dashboard. After activating it, create a new snippet, paste the code you crafted, and activate the snippet.
-
Directly in Theme: Navigate to
Appearance>Theme Editor>functions.php. Paste the code at the bottom of this file. Caution: Mistakes can cause issues on your site. Ensure you have a backup.
After making the change, revisit Google PageSpeed Insights and test your page again. From my experience you will not see the results right away, it’s better to check for a similar page and make sure to empty cache. The “First Contentful Paint” error should now be improved or resolved.
Conclusion
There you have it! A simple step-by-step guide to address the lazy loading issue for specific images on your WordPress site. So you can use it for any kind of context not just for the “First Contentful Paint” error. Always remember to backup before making changes.
demo Mediumish - our most loved WordPress theme
