Images can affect your site’s overall performance even more so if you have large images size which is one of the main causes of slow loading times. Furthermore, if you place the image on your home page or you set the image on all your posts as background, you might want to ensure that your website LCP (Largest Contentful Paint) is optimized for Google’s Core Web Vitals to provide the best User Experience.
One of the website optimizations for the image you can use is by preloading it. Preload lets you tell the browser to load the image you want before they are discovered in HTML, so this is will be very helpful for background images that are not easily discoverable as soon as possible.
This tutorial will show you how to add “preload” to a particular image you want to load as soon as possible when visitors visit the page with the image. If you’re using Elementor or Divi to build your website, you can directly go to their respective tutorial below.
How to Add Preload a Certain Image
Preloading Image in Gutenberg
To preload the image on the default WordPress Block Editor (Gutenberg), you’ll need to add code snippets to your theme functions.php file. Therefore, you may want to back up your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme. If you don’t mind adding one plugin to safely add custom code to your WordPress theme, you can use the Code Snippets plugin as it is an easier and faster way to add custom codes and manage them.
Once you’re ready, start by navigating to Appearance → Theme File Editor from your WordPress admin dashboard (if you’re using a block theme, the Theme File Editor is under the Tools menu) then copy the following code to the bottom of functions.php file on the Theme Files list.
function wpp_preloadimages() {
echo '
<link rel="preload" as="image" href="image-1-url" />
<link rel="preload" as="image" href="image-2-url" />
<link rel="preload" as="image" href="image-3-url" />
';
}
add_action( 'wp_head', 'wpp_preloadimages' );
Once you’ve placed the code in the file, replace “image-1-url” with the URL of the image you want to preload. And you can preload more than 3 images that we showed in the snippet above by adding more <link> to the snippet.
Once you’ve finished adding the image you want to preload to the snippet, save the changes by clicking the Update File button.
By now, the image you’ve placed in the snippet will have rel="preload" added to them like our background image below.
Preloading Image in Elementor
If you’re using Elementor to build your website, adding “preload” to a certain image can be done quickly and easily. To do so, Navigate to Elementor → Custom Code then add a new code by clicking the Add New button from the top of the page.
On the New Code page, add a title in Add title field, select “<head>” for the Location, leave the Priority at 1, and add the following HTML to the editor.
<link rel="preload" href="your-image-url" as="image">
Replace “your-image-url” with the URL of the image you want to preload. You can also add more images to preload by adding more lines with the same format as the HTML above and using the respective image URL. Then click on the Publish button to save your changes and apply the HTML to the head element of your website.
Select where you want to run the code, this time we select the Entire Site to let it run on the entire website. Then finish it by clicking the Save & Close button.
And that’s it to preload image in Elementor.
Preloading Image in Divi
Preloading images in Divi can be achieved with just by few simple steps from your WordPress admin dashboard. Start by navigating to Divi → Theme Options, from there, click on the Integration tab then add the following HTML to the “Add code to the <head> of your blog” editor.
<link rel="preload" href="your-image-url" as="image">
Continue by replacing “your-image-url” with the URL of the image you want to preload. You can also add more images to preload by adding more lines with the same format as the HTML above and using the respective image URL.
And once you’re ready, launch the code by clicking on the Save Changes button.
If you want to preload images on other Divi-powered WordPress websites, using Divi Cloud will save you a lot of time.
The Bottom Line
Adding “preload” to an image lets you tell the browser to load it before they are discovered in HTML, so this will be very helpful for background images that are not easily discoverable to load as soon as possible. This tutorial showed you how to add “preload” to a certain image you want to load as soon as possible when the page is visited.
