How to Lazy Load Images in WordPress without Plugin

Introduction :
No one wants a slow website, in this article I will introduce some tips for speeding up website using “lazy loading” on images. In order to provide a better user experience for your audience, a faster website is needed.

What is Lazy loading ?
Lazy loading loading is a concept that accepting the content of the website when it requires, instead of doing it all at once. It is called Lazy loading because, as a lazy person, you continue to postpone the performance of something that you do not want. The contradiction is Eager Loading, where you immediately download something, long before you need it.

Why Lazy loading ?
No need to waste your time, memory, bandwidth, etc. you might not need. Then, when you need it, it will take more time, but it is normal. Consider also an application that requires a lot of time. This application can work with lots of eager loadings, images from disk and doing calculations and what is not long before it is ever needed.

How lazy loading works ?
If you notice that pictures takes time to load it onto the site when compared with other items in any website. If you add more pictures to an article, each picture enhances the time of page load. Instead of loading all the pictures at the same time, “lazy-loading” is just the picture displayed on the user’s screen, and replaces all the other pictures with the picture placeholder.

How to implement lazy loading ?
There are many libraries and plugins that allow you to be lazy loading to your site. but here I used the simple jQuery libraries Lazy Load XT and jQuery Lazy to add lazy loading to your site, please follow the code snippets below. To perform these tasks, enter this code into the current theme function.php or add it to the new plugin or click the github button below to get the full source code.

1.We are going to use jQuery library to implement lazy loading,i have provided here two options any one we can use, each one have there own pros and cons, you can enhance this code your self based on your need, here the options – “lazy_xt” or “lazy”

2.Create a “js/custom.js” file based on usage (i.e theme or child theme or plugin), example if your going to use on theme just create an js folder on active them and create a custom.js and place following code on it.

3.Enqueue required JavaScript libraries to implement lazy loading, make sure here we need set custom js script file path properly based on script usage, i have provide usage options coden with comments.

4.Find the images on WordPress content and add lazy load image placeholders on it, to implement lazy loading, thats all lazzzy loading …. ¬†loading …. images applied to your¬†WordPress website.

Hopefully, in this article, you have learned how to add “lazy loading” for your WordPress website, then please Subscribe to ScriptHere.Com by Email. You can also find us on Facebook and Twitter

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.