Why You May Need WordPress Lazy Load to Speed up a Web Page?

Why You May Need WordPress Lazy Load to Speed up a Web Page?

Reading Time: 8 minutes

Why load more data than we can display?

A fast website is more sustainable and generally more efficient in attracting more users who can find what they need quickly and easily. But, if the images are not optimized properly, they can also result in a significant load that can slow down page load, responsiveness, and more.

According to Akamai, 47 percent of the visitors expect a web page to load within two seconds or less. If a page takes more than 3 seconds to load, 40 percent of the visitors will leave the website. Furthermore, a 1-second delay can cost a 7 percent decline in sales. Because:

No one wants to “wait” for a web page to load.

Not only this, the search engine giant, Google, also prefers websites that have fast loading times of less than 2-3 seconds.

Typically, a web or a WordPress post/page consists of multiple page contents that include HTML, CSS, JavaScript, images, videos, comments etc. Generally, there are a number of ways to speed up a WordPress website, but most of the techniques range from minimizing the code to lazy load technique on WordPress.

In this guide, we will explain lazy loading, its advantages/disadvantages, use cases, and then show you how to lazy load WordPress images, videos, comments and use infinite scroll.

What Is a Lazy Load?

When a visitor opens a web page, the entire page’s contents start downloading and rendering, no matter, how heavy the content it has. There are chances that a visitor closes a web page after viewing the first fold only.

Visiting a page consumes bandwidth and uses memory to save the cached data. Quitting the page very quickly may result in wasted memory and bandwidth. This is where lazy load jumps in:

Lazy loading is a technique for loading web content when it’s needed rather than all at once.

By using lazy loading technique, the page contents are loaded only as they become visible in the viewport (screen).

How Does Lazy Loading Work?

Basically, lazy loading put a reference src attribute to the lazily loaded web page resources (image, video, etc.), and add another attribute for the original content, then uses JavaScript to detect the visitors’ scroll position of a page. When the scroll position is nearest to a reference object, it replaces the reference src attribute with the actual src and loads the content.

For instance, if a visitor opens a web page and leaves it immediately, then nothing beyond the top portion of a web page is loaded.

Loading assets on runtime reduce the

[…]

 



This article was written by Mustaasam Saleem and originally published on The Official Cloudways Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top