Images have always been an important part of web design — at least since we stopped using marque text and garish GIF animations. But in recent years they’ve become even more important, with large, frequently full-bleed images dominating the pages of trend-leading sites like Medium. They’ve become an increasingly important part of blogs, too, and it’s been shown time and again that users tend to engage more with image-heavy articles than those just presenting a block of text. Large images are also important for attracting attention on social media. Having a large, high-quality image embedded in a post that will be displayed prominently on Facebook and other networks is a great way to stand out from the crowd and increase click through.
Unfortunately, large high-definition images are a sizable addition to the page’s bandwidth requirements, and the more images a page has, the more requests a browser will have to make while loading the page — both of which can increase latency from the perspective of visitors. Slow pages mean fewer ad impressions, lowered conversion rates, and elevated bounce rates. The ideal solution would be one that lets us keep our beautiful images, while mitigating some of the performance issues that come with them.
Lazy loading can help do just that. Lazy loading is a process whereby a resource is loaded only when it’s needed. Instead of loading all the images at once, a site with lazy loading capability loads them only as they are about to come into view. Only images in the area within the browser window are loaded initially. As the user scrolls, images are loaded as they come into view. Ideally, they load just before they are needed so that the user is never aware, but on some sites that use lazy loading, if you scroll down quickly, you’ll catch images as they are loading.
As you’d expect, there are several lazy loading plugins available for WordPress. I’ll highlight three of them here.
BJ Lazy Load
BJ Lazy Load is my favorite lazy loading plugin. It’s very simple to use, and will cause post images, thumbnails, gravatars, and iframes within content to only be loaded when they are needed. Additionally, it’s capable of serving scaled down images for responsive designs when the image is viewed on smaller screens and high-DPI images on retina screens.
Rocket Lazy Load
Rocket Lazy load is even simpler than BJ Lazy Load. There are no configuration options; simply install the plugin and you’re good to go. This plugin is also very lightweight, with no JQuery dependency and code that weighs in under 2 KB.
WPSocialite
It’s not only images that can benefit from lazy loading. Modern web sites are expected to provide a multitude of different social media sharing options — each of which can require the loading of JavaScript files and calls to the social network’s servers. Social media widgets can really slow a site down. WPSocialite is a WordPress plugin implementation of the SocialiteJS script, which is an excellent lazy loading solution for social media widgets.
About Matthew Davis — Matthew works as an inbound marketer and blogger forFuture Hosting, a leading provider of VPS hosting. Follow Future Hosting on Twitter at @fhsales, Like them on Facebook and check out their tech/hosting blog, http://blog.nexcess.net/.
The post Use Lazy Loading To Speed Up Your WordPress Site appeared first on Le Geeks.
No Comments