A complete list on how to improve your WordPress image loading times and better user experience.
The process of optimizing images in WordPress may require you to compress the images through an image compress plugin or a web app. If you have your images in a reasonable size and properly compressed, you may jump to lazyload, CDN, and preloading processes.
1. Lazyload images and remove lazyload from elements above the fold
Lazyload your images. Lazyloading is when you delay the load or initialization of assets until they’re needed to improve the performance.
Avoid lazyloading the logo and any above-the-fold assets, by adding them to the exceptions list on Wp Rocket if you’re using it. Another tip is to consider lazyloading the background images too.
WordPress 5.9 update brings a new logic for lazyload wichs improves a lot the way it loads images. WordPress will now skip the very first “content image or iframe” on the page from being lazy-loaded. This improvement depends on how many images your website loads.
As told WordPress 5.9 has native and improved lazyload support but WP Rocket has lazyload with an option to remove unwanted lazyloading images, such as logo and other images that may be degrading the LCP(Largest Contentful Paint) on its UI, facilitating for non-developers people:
Other lazyload plugins:
- Lazyload (Wp Media) – Free plugin with filter to remove unwanted images from lazyloading(Improper lazyload leads to bad LCP).
- Lazy Load Elementor Background Images – Free plugin that lazyloads Elementor backgrouns images.
2. Use a CDN
CDN is a Content Delivery Network, which is loading assets from distributed servers to speed up the load time.
We have a list of free image CDNs. Consider using Jetpack plugin and their free unlimited CDN for uploading your images and serving them freely by Jetpack, reducing servers cost.
3. Cut, compress and use a different image for the mobile
Cut the size of your images and use a smaller image for the mobile viewport. Modern themes have built-in UI to change responsive images.
Resizing or cutting the size of images to improve load time isn’t always necessary as using a modern compressed image format like Webp or AVIF. When using these two formats, the image will maintain its quality but reduce the load time.
If the lazyload is done correctly, the remaining images of the page won’t interfere with the page initial load, but only on server costs.
4. Convert PNGs and JPEGs to Webp format
Convert your PNGs or JPEGs images to a modern image format such as WebP to improve on size but keep the quality. The AVIF format is still not popular but as more WordPress plugins add support, you should consider it.
Consider our Imagify vs Smush vs Optimole post on choosing the best plugin for converting your images to webp.
The WordPress Performance team recently released a free plugin that does create webp versions from new jpegs images, it’s in beta use at your own risk. Download Performance Lab. This improvement will be later merged on WordPress Core.
5. Preload images and/or preload only when necessary
Avoid preloading images when it’s not necessary, use a WordPress function to preload the image only in the specific pages it appears.
Use Perfmatters and its conditional preloading to preload assets only on certain parts of your website, or its “Preload Critical Images” beta feature that will automatically preload the number of leading images that you choose (0-5).
Get your Core Web Vitals optimized