Ways to Lazy Load Images to Speed Up Your WordPress Site

For websites, an effective user experience plays a significant role in monitoring site’s performance. Web Load Speed is quite critical as far as the user experience is concerned. If your website takes more than 3 seconds to load, the visitor’s long gone. The average attention span of visitors has rapidly shrunk over the last few years. With millions of websites, tens of thousands of informative pages, dozens of which cover the topic at hand, it’s nonsensical to wait for a page to load.

Especially for e-commerce shops, page load time is very important. As per statistics, slow e-commerce websites sell a lot less than fast websites. According to a survey by Akamai,

If an e-commerce website brings in $100,000 per day, a one-second page delay could cause it to lose $2.5 million every year.

Over the years, many techniques have been developed to improve the performance of a page. One such intuitive technique is called lazy loading of images. In this post, you will learn what is the lazy loading of images and WordPress plugins to lazy load them.

What Is Lazy Loading of Images?

Websites are no longer text-based. They have become even more sophisticated and complex. Several components are incorporated which greatly affect page load speed. Web pages with lots of images can easily cause it to slow down. Every single image requires one additional HTTP request to be processed. The more the images, the more HTTP requests needs to be processed. This means the more time it will take for it to load fully. So what’s the remedy? The solution is to lazy load images.

Lazy loading is a technique to force the images to load when they are in user’s view. The images that are not in the “above the fold” will not be loaded unless the user scrolls down to them. This significantly improves the performance of an image-heavy page.

Consider a web page with 10 images. When a visitor visits the page, it will load faster because not all the images are being rendered simultaneously. Only the images in “above the fold” part of the page will load. The remaining images will only load once they are in the user’s browser window.

Let’s look at some of the pros and cons of this technique.

Pros

• Improves Speed: By its essence, it improves a website’s page speed by only displaying content that’s in view.
• Save Server Resources: Since not all visitors necessarily view all images on a page, it makes no sense to load them all and overburden the server’s bandwidth. With lazy loading technique, you’ll be saving hosting fees.

Cons

• Bad user experience: Often, the image being lazy loaded is unnecessarily large. So it may take time before it’s loaded, making for compromised user experience.
• SEO rankings: Lazy loading text is ridiculous and causes search engines to perceive a page as empty. So that affects SEO. However, lazy loading images should not hurt rankings as long as title & Alt tags are set up.

Ways to Lazy Load Images in WordPress

Most of the times with WordPress, there are two ways of doing things:

• With code: You can code a script like unveil.js to lazy load images. It takes an advanced understanding of JavaScript and technical prowess.
• With plugins: You can just install a useful WordPress plugin to make things work for you.

WordPress Plugins to Lazy Load Images

Lazy Load

Lazy Load plugin enhances the page’s performance by only displaying images which are visible to the visitor. It is one of the most popular and free WordPress plugins to lazy load images. It utilizes jQuery.sonar to operate. With over 90,000+ active installs, it is a robust solution to improve website’s page speed.

Features

• Free: Unlike a few solutions on this page, it comes absolutely free of cost. No pro version, nada.
• Simple to use: Just install the plugin, activate it and you are already using it. No configuration needed.
• By Automattic: Automattic is the parent company of WordPress.com. They are the builders of this plugin. Suffice to say; you can trust it.

WordPress Advanced Image Lazy Load

WordPress Advanced Image Lazy Load takes care of image intensive sites. It helps improve page performance by displaying images only when they are being viewed. Aside from images added via JavaScript events, all <img> tag based images can be delayed using this plugin.

Features

• Search friendly: It claims to be search friendly, however, gives no evidence of how.
• Use instantly: As soon as it’s activated, it becomes functional. No need to edit each post or page to enable it.
• Full control: Enable/disable its functionality for posts, pages, specific posts and their specific images.
• Can work with theme images: It can also be be customized to effect theme based images.

Animate Lazy Load WordPress Plugin

Animate Lazy Load WordPress Plugin claims to improve the page performance by 6 times. It is a premium CodeCanyon plugin and has over 100 sales as of this writing. With several useful features, it is a comprehensive lazy loading solution. For example, the image displaying animations can be customized to your liking.

Features

• Browser Compatibility: It is compatible with most major browsers including Chrome, Firefox, Safari, Opera, and Internet Explorer.
• Google Maps: Google Maps embeds tend to slow down pages dramatically. This plugin is capable of lazy loading these maps too.
• NextGEN support: If you are using NextGEN plugin to display image galleries, you can lazy load them using this plugin.
• Videos & iframes: With Animate Lazy Load, videos and iframes can also be lazy loaded and can drastically reduce page load time.

Conclusion

Speed plays an integral role in the user experience of visitors. It takes no more than a few hours optimization to improve your website page speed. Most people don’t seem to care.

What do you think about the lazy loading technique? Do you wait for websites to load? Share your experience about it and drop in your feedback in the comment box below or reach out to me via Twitter @MaedahBatool.