PageSpeed Insights recommends preloading key requests and your LCP (largest contentful paint) image.
The problem is that some cache plugins (specifically WP Rocket) only preloads fonts/links but doesn’t preload images, CSS, or JavaScript files. Since a big part of LCP is preloading viewport images, this is one reason WP Rocket users have worse LCP scores when testing core web vitals.
FlyingPress and Perfmatters both have a setting to preload critical images which makes this 10x easier than WP Rocket. You just set a number of images that typically load above the fold (usually 2-3), then those images will automatically be preloaded and excluded from lazy load.
Otherwise, you’ll need to follow WP Rocket’s 8-step process to exclude a specific number of images from lazy load, then jump through even more hoops to preload them. This is a classic example why I don’t recommend using WP Rocket for image optimization (since it lacks many features), and instead something like Perfmatters – or do what I did and switch to FlyingPress.
What Does Preloading Key Requests Mean?
Preloading key requests instructs browsers to download critical resources sooner and is often used for images/fonts loading in the viewport, but can also be used for links, CSS, and JS files. Since improving LCP involves loading critical resources sooner, this can improve your LCP score.
<link rel='preload' href='/image.png' as='image'>
<link rel='preload' href='/style.css' as='style'>
<link rel='preload' href='/script.js' as='script'>
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Many WordPress optimization plugins support preloading such as Perfmatters, FlyingPress, and Pre* Party, while other optimization plugins like WP Rocket can’t preload images. Therefore, the “preload largest contentful paint image” recommendation in PSI can’t be fixed using WP Rocket.
1. Preload Viewport Images
All viewport images should be excluded from lazy load and preloaded.
The easiest way to do this is to preload critical images in FlyingPress or Perfmatters. The first step is to count the number of images that typically load in the viewport which is usually 2-3 images. For my blog, this would include 3 images: my logo, top post image, and sidebar image.
Next, add this number to FlyingPress or Perfmatters:
With WP Rocket, you’ll install a helper plugin, open the PHP file in a text editor, and change the “count” to the number of images usually shown in the viewport (you’ll also need to specify the image class). However, this only excludes viewport images from lazy load, but doesn’t preload them. Since WP Rocket can’t preload images, you’ll have to do it manually with code or use a plugin like Pre* Party Resource Hints. It’s still not preferred because viewport images are often different on each page, so avoid preloading images sitewide if they’re only used on some pages.
<?php
/**
* Plugin Name: WP Rocket | Exclude X first images from Lazy Load by Attribute
* Description: Disables lazy load for the first X images by Attribute.
* Plugin URI: https://github.com/wp-media/wp-rocket-helpers/tree/master/lazyload/wp-rocket-exclude-x-first-images-by-attribute/
* Author: WP Rocket Support Team
* Author URI: http://wp-rocket.me/
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*
* Copyright SAS WP MEDIA 2018
*/
namespace WP_Rocket\Helpers\lazyload\exclude_by_attribute;
// Standard plugin security, keep this line in place.
defined( 'ABSPATH' ) or die();
// EDIT ANY OF THE FOLLOWING AS NEEDED
// change class="ct-image to attribute of your choosing
$pattern = 'class="ct-image';
// change 2 to the how many images need to be skipped from the lazy load
$count = 2;
// STOP EDITING
/**
* Disable LazyLoad on single post views.
*
* @author Adame Dahmani
* @param string $html HTML contents.
*
*/
add_filter( 'rocket_buffer', function ( $html ) use ($pattern, $count) {
$html = preg_replace( '/'. $pattern .'/i', 'data-no-lazy="" '. $pattern, $html, $count );
return $html;
} , 17 );
Elementor widgets and background images are treated differently since Elementor doesn’t use a CSS class in the image tag (so it can’t be specified in the code above). Background images aren’t lazy loaded by default, so you’ll need to preload any background images that load in the viewport as well as lazy load non-viewport background images by moving them to inline HTML.
Or do it manually by adding this code to your header.php file:
<link rel='preload' href='https://onlinemediamasters.com/wp-content/
uploads/2020/03/about-banner.png' as='image'>
Once viewport images are preload, this should be green:
2. Preload Fonts
Fonts loading in the viewport should be preloaded.
Open your GTmetrix Waterfall chart and copy all font files loading in the viewport. Then paste them into your plugin of choice to preload them, or do it manually. If there’s an option in your plugin, use “font” for your “as” attribute and always use crossorigin when preloading fonts.
What it looks like manually:
<link rel='preload' href='https://onlinemediamasters.com/assets/vendor/gstatic/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7j.woff' as='font' crossorigin>
If you see an error for ensure text remains visible during webfont load, it’s likely because you’re preloading a font that shouldn’t be preloaded.
3. Preload WP-Block Library
The Perfmatters documentation shows you how to preload the WordPress Block Library stylesheet by adding wp-block-library.
Check your script manager to see if wp-block-library is loading on every page, then try preloading it while testing whether this makes a positive impact in your Waterfall chart.
4. Preload Links
Some WordPress speed plugins preload links (also called “instant page”) so when users hover over a link, the page downloads in the background so when they click, the page loads instantly.
This improves perceived load time, but not core web vitals.
5. Plugins To Preload Key Requests
Some cache plugins can only preload fonts/links, but they can’t preload images or CSS/JavaScript files. In this case, I suggest either Pre* Party Resource Hints or Perfmatters.
Preload images | Preload fonts | Preload CSS/JS | Preload links | |
---|---|---|---|---|
Perfmatters | ✓ | ✓ | ✓ | ✓ |
Pre* Party | ✓ | ✓ | ✓ | x |
FlyingPress | ✓ | ✓ | x | ✓ |
WP Rocket | x | ✓ | x | ✓ |
LiteSpeed Cache | x | x | x | ✓ |
6. Test Impact Of Preloading
Always check your Waterfall chart (i.e. using GTmetrix) to make sure preloading something makes it faster, since preloading too many resources can sometimes have a negative impact.
Also check for preload errors in the Console section of Chrome Dev Tools.
In this example, I didn’t specify my logo as an “image” and preloaded a font that wasn’t being used. Check for errors on several pages especially if you’re using multiple fonts across your site.
What does preload key requests mean?
Preloading key requests tells browsers to download critical resources sooner, which are usually files loaded in the viewport (such as your LCP image, fonts, or WP Block Library).
How do I preload key requests in WordPress?
FlyingPress, Perfmatters, and Pre* Party Resource Hints are solid plugins to preload key requests. These arguably do a better job than WP Rocket since most of them can preload critical images by number (much easier for preloading images) as well as preload CSS/JS.
How do I preload key requests in WP Rocket?
WP Rocket can only preload fonts/links, but it can't preload CSS/JS files. You would also need to use a helper plugin and edit a PHP file to preload images, such as the LCP image.
How do I preload key requests in LiteSpeed Cache?
LiteSpeed Cache only preloads links, but it doesn't preload fonts, images, and other files. You'll need to add the preload code manually or use a plugin like Pre Party Resource Hints.
That’s it for this one!
Cheers,
Tom
Hi, Thanks for this post on preloading assets. Kindly let me know if the LiteSpeed Cache plugin has the Preload feature. Thanks.
Doesn’t look like it. May need to do it through manual code or with something like Perfmatters or Pre Party.
great guide but where did you do the preload LCP image at(Preload Your Largest Contentful Paint Image
) ? I that a plug in, is it part of SG optimizer? The images show what to click, but not what your clicking in. I am assuming this is a plugin of some kind?
The screenshot is from Pre* Party Resources Hints. Some speed plugins let you preload images but I don’t think SG Optimizer does. Perfmatters for example has an option to “preload critical images” which will do it too, or you can add the preload hints manually.
Online Media Master is a rock. Every time audience get a solution…
On the topic of Preloading Your Largest Contentful Paint Image manually. Where do I place the I am using Wordpress. Functions.php?
All browser resource hints should be added to header.php.