[WordPress / Display speed] What is lazy loading of off-screen images? / Page Speed Insights

When using Page Speed Insights, you may see an issue that says "Lazy loading of offscreen images".

What exactly does this mean? I will tell you the method that leads to explanation and solution.

Anyway, for those who want to know the meaning roughly and respond immediately

First, I will briefly summarize for those who want to take immediate action.

  • The instruction content is "Please give priority to the image of the displayed page and load it."
  • Supported by default in WordPress.ver 5.5
  • Plugin"Lazy Loader"or"AutoptimizeEasy response
  • Enable "Autoptimize", check "Settings" ▷ "Lazy loading of images" and save it.

If you can update WordPress, it is also a good idea to check the compatibility of plugins etc. while making a backup and support the update.

You can insert a plug-in and proceed with the settings according to the instructions, or you can check "Lazy loading of images" for such plug-ins, so I think that you can handle it there.

For those who want to understand firmly

Here, I will also touch on the meaning of the instructions and detailed words.

Please see here if you want to respond politely ▼

What is lazy loading of off-screen images?

Lazy loading of off-screen images is a technology for increasing the display speed by not loading the images on the page at once. Also known as "lazy load" or "lazy load".

Basically, image files are large, so if you try to load all the images at once, it will take time, and there is a concern that the display speed will be affected.

At the time of the first view that the user first sees, it does not load all the images on the page, but downloads the images little by little as you scroll.

Are there any disadvantages?

If you know the contents of lazy loading, I feel that it is a very convenient way to deal with it.

However, even though the site isn't that big, unnecessarily lazy loading can be counterproductive.

This is because the library is used for lazy loading of images, so it takes time to communicate with the outside.

Keep in mind that if you force lazy loading of an image without a major cause, it may lead to a slower display speed.

Can you handle it with a plug-in?

The easiest and most recommended plugin is the "Autoptimize" plugin.

The nice thing about Autoptimize is that it's easy to set up.

Install and activate.

Check "Settings" ▷ "Images" ▷ "Lazy loading of images".

This completes the settings.

How to not use plugins

There are mainly two steps: adding to the img tag and loading the library.

Change img tag

Change the src attribute of img for lazy loading to data-original and add class = ”lazy” as a class attribute.

<img data-original="sample.jpg" class="lazy">
Code language: JavaScript (javascript)

Loading the library

From the perspective of first view fast loading</body>Read just before. Here, jQuery.js and lazyload.js hosted on the CDN (Contents Delivery Network) are loaded. Start lazyload after loading the library.

<!-- jQueryライブラリの読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- lazyloadライブラリの読み込み --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.min.js"></script> <!--Lazy Loadの起動 --> <script> $(function() { $("img.lazy").lazyload(); }); </script>
Code language: HTML, XML (xml)

If you download Lazyload.Js and put it on the server before loading it, replace the loading part of the Lazyload.Js library with the following.


<script src="js/lazyload-min.js"></script>
Code language: HTML, XML (xml)

* The link is below.
* Please change the path according to your environment.

Library download

There are two types of lazyload.js, 1.x series and 2.x series. The 1.x series requires Jquery, while the 2.x series works independently. Here, it is implemented by the method using 1.x system.

From Mika Tuupola's project page on GitHublazyload.js (1.x)Download. After decompressing the Zip file, store "lazyload.min.js" (4KB) in the js file storage of your site.

summary

After finishing this implementation, please measure the speed again.

When you touch the file, make a backup and check the operation in detail.

I hope this article will be of some help to you.
If you have any questions after reading the article, feel free to Twitter (@kaznak_com) Etc., please ask.

see you.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"