How to use Lazy Load in Wordpress

What Will I Learn?

You'll learn how to improve your site perfomance with the well-known lazy load technique.

Requirements

Having installed the CMS Wordpress platform
Plugin BJ Lazy Load installed and activate
Plugin Regenerate Thumbnails installed and activate

Difficulty

Basic

Tutorial Contents

The loading time of web pages is fundamental to ensure a good experience for the user, so it is important to reduce it to the maximum. One way to improve this is to use the Lazy Load technique, which consists of loading content only when it is actually requested by the user. In this tutorial I explain how to use in the wordpress CMS platform.

Let's start by setting up the plugin to apply lazy load to our content on our site.

Go to the menu "Settings"
Click in "BJ Lazy Load"
Apply to content: it'll be applied to the content of the site. This is a < div id = "content" class = "site-content"> ... </ div>
Apply to text widgets:apply the lazy load technique to all widgets containing texts (in my case: yes)
Apply to post thumbnails: (in my case: yes)
Apply to gravatars: (in my case: yes)
Lazy load images:apply the lazy load technique to all images in your web site (in my case: yes)
Lazy load iframes:(in my case: yes)

Change the placehold.

In all the images that do not want to be applied the technique of lazy load I will put the class "no-lazy"

For example:

< img src="/pexels-photo-733533.jpeg"  width="1123" height="750" class="no-lazy" / >

Proximity of the viewport element must be loaded. In pixels.

Use low-res preview image: To use this functionality you need to install and activate the Regenerate Thumbnails plugin. (in my case:yes)

So let's now compress our images to be able to have low resolution images before we appreciate them with good quality.

Go to the menu "Tools"
Click in submenu "Regenerate Thumbnails"
Regenerate Thumbnails forl all attachments

If we want to change the measurements of the thumbnails we can go to settings and make the change.

Go to the menu "Settings"
Click in submenu "Media"
Change thumbnails measurements
Save Changes.

Now that it is set up we can test the images on a test page.

If you don't want the page to use the lazy load technique, you can disable the plugin's use on the page itself.

With these steps all completed already is applied in its pages the technique of lazy load.

After rendering a page they can see in the code the images with these attributes:

data-lazt-type
data-lazt-src
data-lazy-srcset
data-lazy-sizes


< img src="http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680.jpeg" data-lazy-type="image" data-lazy-src="http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680.jpeg" alt="" width="1125" height="750" class="lazy alignnone size-full wp-image-97 lazy-loaded" data-lazy-srcset="http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680.jpeg 1125w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-30x20.jpeg 30w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-300x200.jpeg 300w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-768x512.jpeg 768w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-1024x683.jpeg 1024w" data-lazy-sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" srcset="http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680.jpeg 1125w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-30x20.jpeg 30w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-300x200.jpeg 300w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-768x512.jpeg 768w, http://localhost/wp/wp-content/uploads/2018/01/pexels-photo-696680-1024x683.jpeg 1024w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" >

Source image: 1

Curriculum

In my curriculum find tutorials on wordpress as it is my daily work tool. Many more will be made.

Posted on Utopian.io - Rewarding Open Source Contributors