News Blog: WordPress & Joomla Extensions

Image Loading - Progressive Lazy Loading on WordPress

Cover

Media turns a sterile WordPress blog into a living, bustling website, but the hard truth is that files and SEO do not go well together. There just is not much to say to the contrary - slower loading times lead to lower SEO scores. However, not all hope is lost. A few months ago we talked about how WP Speed of Light mitigates the issues with lazy loading. Now, we are going a step further.

 

As a reminder, lazy loading does not load all of the images in a WordPress post or page as soon as the user lands on the page. Instead, WP Speed of Light waits until the images come into view to download them. That way, the page loads much faster initially, helping SEO while making the experience more pleasing to readers on slower internet speed.

 

In version 2.5 of the WordPress plugin, the lazy loading feature has been improved to be a little bit more reactive to your audience’s devices and their limits. WP Speed of Light’s latest iteration of lazy loading is more responsive, particularly to users on lower-end mobiles or slow internet speed.

Instead of seeing no images and then having them load abruptly, your WordPress users will initially see a low-res, blurred version of the media file. When it finishes downloading, the image fades into focus. In this way, readers will know that an image exists, and they can either wait for it to load or continue reading and go back to it later.

 

Images Demystified

What is the best thing about the latest update to WP Speed of Light? If you have the pro addon for the WordPress plugin, you need barely budge a finger. To set up lazy loading, head to the WP Speed of Light’s speed optimization menu. From there, enably image lazy loading from the speedup tab.

If you want greater control, check out our previous post, but that should do it to test out lazy loading’s latest feature. In fact, that is practically it. With image lazy loading enabled, media files will load only if and when necessary with the new blurring feature to boot.

 

progressive-lazy-loading-activation

 

As shown above, your images will initially display a low-res placeholder image on slow networks, blurred to be more aesthetically pleasing. WordPress loads - or rather, lazy loads - the full-resolution image in the background without interrupting the reader. When the image finishes lazy loading, the placeholder image gives way to the full image.

 

Progressive Lazy Loading and SEO on WordPress

The million dollar question, though, is how this new image lazy loading affects SEO. After all, wouldn’t the blurred image placeholder add more loading time? In reality, yes. In practice, not at all. WP Speed of Light’s placeholder is a tiny, 20 pixels image that takes negligible time to load, adding no overhead to your SEO loading times. At the same time, the blurring hides the pixelated artifacts of the low-quality image.

And like in the previous version of the lazy loading all image SEO HTML elements are loaded on first shot (not lazy loaded). Therefore, the Google bots and other can read the image file name, title, alt tag.

 

image-lazy-loadin-seo

 

SEO is important, but it should be secondary to user experience. WP Speed of Light’s latest update takes this principle to heart, but combines the functionality that benefits SEO with the aesthetics that make readers keep coming back - all at no extra cost to SEO. Check the rendering of a progressive lazy loading here:

 

image-lazy-loading

 

If you want to deploy the progressive lazy loading on your WordPress website, just follow this link: https://www.joomunited.com/wp-speed-of-light

3
How to redirect a 404 error or make a custom redir...
How to Help with WordPress Plugin Debugging
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Tuesday, 22 October 2019
If you'd like to register, please fill in the username, password and name fields.

Captcha Image