Lazy Load – Reduce HTTP Requests and Page Load Time

Lazy Load Comparison

Lazy Load is a smart technique which reduces the page load time.

I wanted to start with a comparison image to show the benefit of the Lazy Load. As you can see in the picture, Lazy Load reduces the number of request and the size of the page.

Image Placeholder

You can choose which source is used on the Lazy Load. There are 3 cased.

1. Default: If you choose it, the default blank image is used as below. The url may be long and it increases the size of html a little.

2. This option is almost the same with the default option. The source url is so little so it does not increase the size of html.

3. Base64: The base64 code is used. It increases the size of html a little and it does not reduce the http requests on the pingdom tool.

– What is Lazy Load?

Here is an animation to understand how Lazy Load works.

What is Lazy Load?

Without Lazy Load: When a visitor opens a webpage, all the sources of the page are loaded and rendered.

With Lazy Load: When a visitors open a webpage, the sources which are seen by the visitor are loaded and rendered.

– Problem with SEO?

A common pitfall of lazy loading is its impact on a website’s ranking in search engines because the search engines cannot crawl the images of a post or a page.

Our Lazy Load feature does not have an impact on Search Engine Optimization because the images in post are not loaded via Lazy Load.

– Which Images are loaded via Lazy Load?

1. Full Size: They are NOT loaded via Lazy Load

2. Medium Size and Thumbnail: They are loaded via Lazy Load

3. Recent Posts and Related Posts: They are loaded via Lazy Load

4. Third party images: They are loaded via Lazy Load