Lazy-loading for better WordPress performance
Websites must load fast
It's important for your website to load fast. People just don't want to wait a long time for any website to load, it's just dissatisfying and in this day in age we expect information from the internet to be practically instant. Websites that load slowly can also lead high bounce rates and a decrease in SEO.
It’s also important that your website has lots of images, because images can really make any website engaging, and websites that are engaging can also lead to having low bounce rates and an increase in SEO.
But that’s a dilemma, because the more images your website has, the more it must load, the more it must load, the slower it'll load.
How can you improve the speed of your WordPress site?
Optimise images for the web
You can get a plugin like WP Smush or EWWW Image Optimizer, these plugins simply strip out data from the image files, so the only data that is on the file is the data required to have the image. Examples of data that'll be stripped out would be extra spaces and formatting, meta data that's generated by other apps for record and index keeping purposes).
Caching
Caching is whenever a website is loaded, all of it's images are downloaded onto the computer, so the next time we view that same website again we see the images that we've already downloaded. Without caching everytime we load that same website we have to wait for the images all over again, so it's much quicker for a website to load when images are cached. By default web browsers like Chrome already come with caching, but when you can get a plugin like W3 Total Cache or WP Super Cache you can take caching to a whole new level!
The web hosting service that you're using may already come with it's own caching service, so ask your web hosting service provider for more info.
CDN (Content Delivery Network)
You can ask your web hosting provider to have your website hosted on a CDN. This is when your website is hosted not on one but on multiple servers. So when somebody views your website in Singapore, they will view the website hosted on the Singapore server, when somebody views your website in LA, they will view the website hosted on the LA Server. This is just a very rough example to help you undertand, with a CDN people will load your website from a server thats closest to them. The closer you are to the server, the more faster your website will load. Without a CDN the website may be faster for someone in LA, but slow for somone all the way in Singapore.
Once again the web hosting service that you're using may already come with it's own CDN service, so ask your web hosting service provider for more info. Otherwise a good place to look is CloudFlare.
But I've already got all of those things but it's still not fast enough?
There are also a number of other improvements that can be made to your WordPress theme either by editing the code and in some cases it can be achieved by a plugin. These things may include but not limited to;
- Concatenating and minifing scripts and styles
- Load scripts at the end of the </body> tag (instead of the <head> tag).
- Use of CSS sprite
However when it comes to image-heavy websites, all the images can use around 1MB to 4MB of the page loading time, whilst all the other files combined can use only around 800KB to 1MB. If we're gonna aim for a page loading speed of 3 seconds or less, you really need to consider lazy-loading!
What is lazy loading?
Lazy-loading is simply loading only the images that are inside the viewport.
Let's imagine that we have a webpage with 7 images. And just for the sake of understanding, let’s say that each image takes about 1 second to load.
Now let’s see what happens when we load it in our browser.
Without lazy-loading: The browser waited for all 7 images to finish loading before it is ready for us to view the page. Hence we had to wait 7 seconds.
With lazy-loading: The browser will only loaded the images that are in the viewport. Hence we only had wait 3 seconds!
With lazy-loading, as you scroll down the page, the images will load as they come into the viewport. Lazy-loading saves page loading speed by only loading the images that the user chooses to see.
Now the difference between our two examples is only 4 seconds, but imagine if the page had 100 images to load, with lazy-loading the page speed will always be 3 seconds.
How to code Lazy-loading (for your web developer)
HTML
Instead of coding images like this...
<img src="image-500x500.jpg"
srcset="image-500x500.jpg 1x"
image-1000x1000.jpg 2x"
alt="Image"
width="500"
height="500"
/>
We code it like this...
<img src="image-50x50.jpg"
data-src="image-500x500.jpg"
data-srcset="image-500x500.jpg 1x,
image-1000x1000.jpg 2x"
alt="Image"
width="500"
height="500"
class="lazyload lazy"
/>
As you can see...
- We converted the
srcandsrcsettags into data attribute tags - We add two classes, "lazyload" and "lazy"
- We can even leave the
srctag empty if we want but for SEO, accessibility and general best practices we'll put a placeholder image, in this example a very small version of the image (one that takes a milisecond to load!).
Javascript
Yes you've guessed it, it’s actually quite simple, once the image enters the viewport the src and srcset get replaced by the data attributes.
The "lazy" class also gets removed, hence allowing us to improve the UX (read the next section about CSS).
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = document.querySelectorAll(".lazyload");
var active = false;
function lazyLoad() {
if (active === false) {
active = true;
setTimeout(function() {
for(i = 0; i < lazyImages.length; i++){
if (
(lazyImages[i].getBoundingClientRect().top <= window.innerHeight && lazyImages[i].getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImages[i]).display !== "none"
) {
lazyImages[i].src = lazyImages[i].dataset.src;
lazyImages[i].srcset = lazyImages[i].dataset.srcset;
if (lazyImages[i].complete) {
lazyImages[i].classList.remove("lazy");
} else {
lazyImages[i].addEventListener('load', function() {
this.classList.remove("lazy");
})
}
}
};
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("load", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
In my example I've also made this script trigger not only on a scroll event, but also on load, resize and orientation change events. And because there is a scroll event I added a little throttling to prevent the call stack from overloading.
CSS
Finally we use CSS to improve the user experience. Without CSS we'll simply see images switch from a pixelated image to a high resolution image within a blink of an eye.
So let's add a little filter and transition to make this smoother.
.lazyload {
-webkit-transition(.5s);
transition(.5s);
-webkit-filter: blur(0px);
filter: blur(0px);
}
.lazyload.lazy {
-webkit-filter: blur(5px);
filter: blur(5px);
}
This blur effect is really popular you've probably seen them in Medium articles. With CSS we can be creative and do other things like make the image go from invisible to visible (ie. fade in) or even make the image fade in as it moves up the page...
.lazyload {
-webkit-transition(.5s);
transition(.5s);
opacity:1;
-webkit-transform: translateY(0em);
transform: translateY(0em);
}
.lazyload.lazy {
opacity:0;
-webkit-transform: translateY(50em);
transform: translateY(50em);
}
Ready to add lazy-loading to your WordPress site?
Pretty simple uh. Though we've only scratched the surface. Lazy-loading can also be applied to background images, video and even iframe elements all of which can be even heavier than images.
There are also many other things that you can use do to improve the user experience such as the use of loading icons and animating elements accompanying the image.
I hope your found this article useful, if you need more help I can edit your WordPress theme to have lazy-loading, not only will images within the templates be be lazy-loaded but also the images that you have uploaded into the Content Editor. And if also you need some advice on how improve your WordPress site's peformance I'm here to help.
