Loading speed is essential for your WordPress site. The modern user wants attention grabbing content and they want it now! Users prefer large pages full of images or video opposed to pages that are text heavy. However, images and videos make up most of the loading weight of a page and if a site is slow to load, users are more likely to bounce.
Positively, WordPress makes it easy to implement media files into your site’s design. Even for non technical business or blog owners, adding images and videos into your posts and your theme is really easy. The consequence? Your site loading speed may be reduced, which stops visitors from viewing the content you’ve invested a lot of time in.
The solution to media rich WordPress sites that load slow is lazy loading. Lazy loading is an optimization technique that first loads the content a user will first view. Content that requires scrolling to view is delayed. It’s a technique that both your viewers and Google will like, takes a split second and works in the following way:
- Your browser downloads the Document Object Model (DOM), but doesn’t begin downloading media immediately
- Using Javascript, code will determine which images or videos need to become visible first, downloads them instantly and then preloads any following media which may be viewed
- Any media which needs to be scrolled to see will download and render instantly when the user scrolls
*To get maximum value out of this article you should first understand image optimization. Every image that features in your WordPress site should be optimized to assist loading speed. Read this eCommerce image optimization guide to learn more.
Lazy loading can provide a significant improvement in loading speed for sites that are rich in media. Especially for those sites that are full of high resolution images or videos. Here it’s important to understand that the need for lazy loading is contextual. For example, the WordPress site of a Wedding Videographer is likely to be full of high resolution media, especially if the site features a work portfolio—here lazy loading is likely a valuable technique.
How Much Can Images and Video Really Slow Down Your Site?
It’s important you understand what the current definition of a slow site actually is. In 2020, Google recommends that your site speed is under 2-3 seconds, Google itself aims for under half a second. Every second after “3,” the bounce rate increases exponentially.
So, 3 seconds is your base site speed, if your site’s loading speed is already that fast, you don’t have a problem. Lazy loading isn’t necessary, but you should strive to get as close to that half second as you can.
The average site speed for top ranking websites in Google is below three seconds. Web pages that predominantly have to load text will usually weigh less than 500kbs and should easily load in less than a second. However, when adding a dozen images and video content, your web page will likely weigh between 2-4mb. This is where your loading speed will start to breach the 3 second threshold. It’s massively important for your revenue, the bounce rate of web page pages that take between 0-3 seconds to load is 30%, while 3-5 seconds can raise your bounce rate to 90%.
How to Begin Lazy Loading Your WordPress Site
If you want to use lazy loading in WordPress, the process is the same for most WordPress solutions, you’ll need to install a plugin. There are many free plugins you can install to begin lazy loading, I recommend you try one of the following popular plugins below:
This plugin has over 100,000 active installations with a 4 out of 5 star rating. This plugin works on all thumbnails, images in a WordPress post, and any media that can be found in widget text. It also allows you to replace Youtube iFrames with a preview thumbnail. The script to run the plugin itself weighs 10kb.
Works with the following languages: English, Spanish, Dutch and Swedish.
Impressively, A3 Lazy load has over 200,000 active installations and is rated 4.5/5 stars. This plug is mobile oriented and allows you lazy load images in all content areas (posts, custom post types and pages. It can also lazy load widgets, post thumbnails and gravatars. Uniquely, this plugin also supports lazy loading for horizontal scrolls!
For video optimization, YouTube, Vimeo and HTML5 embeds are supported. Similar to image support, videos in all content types, widget types, text widgets and HTML widgets are supported.
This plugin is the last popular on the list, with only 2000+ active installations. But, it is still very well reviewed and is rated 4.5/5 stars. Many people who found that the above more popular plugins didn’t work the way they wanted found Speed Up to be the solution.
How Will Lazy Loading Affect Your SEO?
Google loves pages that load fast. Faster site speeds means a more positive user experience and this can increase your SEO ranking.
However, there are potential ways lazy loading can actually hurt your SEO if you’re not thorough in its implementation.
- Crawlability
It’s important to make sure search engines can still crawl your sites. To check if your web pages are still being crawled properly, you can use the ‘Fetch as Google’ tool in Google Search Console. If you can still see all of your media in the pages source code, your page should be fine.
- Alt Tags
Ensure all of your images have accurate and brief alt text. This helps crawlers know what images are being instantly loaded as well as those that may be loaded.
Lazy Loading Plugins and WordPress Development
Whenever you’re installing a new plugin there’s the chance that your plugin will cause your site to crash or cause other plugins to crash. New plugins need to be maintained with each WordPress update. To get the best possible site speed and functionality of your WordPress site, your lazy loading plugin, as well as other plugins, extensions add ons and your theme will require customization. Therefore many WordPress users will hire WordPress developers when wanting to grow their site, scale efficiently and keep all features maintained. If you too are looking to expand your WordPress site, I would recommend the eCommerce development services at CodeClouds. They are WordPress development experts — all their developers have at least 5 years experience working with WordPress and their portfolio is abundant with previous WordPress projects.
