How to speed up external featured images in WordPress
Learn how to speed up external featured images load times in WordPress sites.
2020-12-13
1. Get an image URL
To begin, let's look for an image. In this example, I generated my image using Vampixel, but you can get your image in some other way. Copy the image address, as it will be used to define our featured image.
2. Create a new post
Let's create a new post now. To do this, access your WordPress site and click on "Posts" in the left side menu. Your latest posts will be listed on the right and the "Add New" button will also appear. Click on that button.
3. Add title and paste the image URL
Here I added the title "How to speed up external featured images in WordPress" and then I pasted the image URL in the "featured image" field. If the second "featured image" box does not exist on your website, you can install it using the Featured Image from URL (FIFU) plugin.
4. Publish
Time to publish the post. And notice that because we are using an external featured image, thumbnails will not be created in our media library. The optimization of this image will happen in a different way, as we will see below.
5. Install Jetpack plugin
Access the "Plugins" option in the left side menu of WordPress. Then click on "Add New" and search for "Jetpack". Install and activate the plugin. We will use it basically to optimize our images, although it has some resources for anti spam, backup and SEO.
6. Configure Jetpack
Access Jetpack performance settings now. The only option that we will enable is "Speed up image load times". Jetpack will automatically save the images on its own server, where it will start the optimization. The images will then be converted into smaller files, without much loss of quality. And from there every time someone accesses a post on your website the image will no longer be loaded from your media library or from the server where the image is hosted (in the case of an external image), but from the Jetpack global network of servers. Inspecting your website code, you'll see that image addresses now begin with https://i.wp.com/.
7. External thumbnails
Another advantage of Jetpack is that it serves dynamic images. This means that if you access your website on a smartphone, the image file loaded in the browser should be smaller than if you access it on a desktop. In short, with Jetpack you will have external optimized thumbnails. And, as you can see, FIFU is integrated with Jetpack. So this is how your external featured images can be optimized.
A. Performance test on single posts
With Jetpack running, my WordPress post was loaded on average in 1.36 seconds. Without Jetpack, it was loaded on average in 1.51 seconds. The gain was only 11%, which does not seem very significant. In fact, a real gain will be noticed only on a page with several images, as shown below.
A.1. Performance test on homepage
With Jetpack working, my WordPress homepage, with only 3 images, was loaded on average in 1.68 seconds. And without a Jetpack, it was loaded on average in 2.19 seconds. This represents a 30% gain, which could be even greater if we had more images.
