The perception of speed: lazy loading and infinite scroll.

Reading Time: 3 minutes
Reading Time: 3 minutesCreative Speed Strategy using free plugins and free themes.

Save the Internet from WordPress speed abuse.

Lazy loading is a technique for deferred loading of page content. It’s loaded when it’s needed rather than all at once – typically by scrolling through the page.

With lazy loading, pages are created with placeholder content which is  replaced with actual content when the user needs it. Lazy loading is a technique that increases user time spent on page because new content loads automatically.

As the name suggests, Infinite Scroll continuously loads content as the user scrolls down the page. The page’s footer – normally inaccessible in an infinitely loading web page – is displayed as an overlay beneath the scrolling content. WordPress claims that users read more posts when Infinite Scroll is enabled, as opposed to the traditional page-based approach.


Infinite-Scroll
(download 287k)

Last Updated: 4 years ago
Active Installs: 20,000+


Ajax Load More – Infinite Scroll
(download 927k)

Last Updated: 2 days ago
Active Installs: 20,000+


Ajax Pagination and Infinite Scroll
(download 34k)

Requires some code knowledge to work for most site. Unless you are using a default WordPress theme like Twenty-fifteen, etc. Adds about 40k to global page weight (site drag) and a few HTTP requests.

Last Updated: 1 month ago
Active Installs: 2,000+


WP EasyScroll Posts
(download 807k)

Last Updated: 6 months ago
Active Installs: 300+


Infinite Scroll and Load More Ajax Pagination
(download 48k)

Last Updated: 11 months ago
Active Installs: 1,000+


YITH Infinite Scrolling
(download 1.3M)

Last Updated: 7 months ago
Active Installs: 7,000+


Lazy Loading is good because it delays loading of images below the fold. It’s a good trick. But it can give us lousy UX as slow images on mobile devices leave blank spaces. Images eventually appear when scrolling. (We use lazy loading wherever and whenever possible). Get lazy loading for free:

Free plugin suggestion:  Rocket Lazy Load >


Lazy Loading YouTube or Vimeo videos

We have also experimented with Lazy Load for Video plugin. We like the plugin. But have found it can have conflicts with other plugin’s shortcodes on a page or post.

Using the Lazy Load for Videos plugin can save 500 to 700 miliseconds in page load time. Studying of plugin blog reviews about the Lazy Load for Video plugin, we learned the following about the settings:

There is an option to load CSS/JS only when needed. It should improve load time. It is not declared but is apparently a minification technique since the blog author warns that it could break the site. Just like any other minification plugin can. If so, we just deselect the option.

Responsive Mode: It is recommended.

Play Button: The author gives 5 different options. We prefer using the one with the most “YouTube-looking” interface. But it’s not the fastest. “CSS only” setting means code is loaded (faster) because there is no image to load. We don’t know if the speed gain would be significant.

Thumbnail Size: It can be set to “Standard” or “Cover.” We couldn’t tell any difference and used “cover.”

“Update Posts” button at the bottom. The blog review said, “If you are having trouble seeing your video change then you probably need to click this button. Especially right after configuring the plugin for the first time.”

hide-related-videos

If should be labeled, “always push this” instead of “if nothing is wrong” push this. We suspect it’s some kind of purge of cataloged pages or posts (like a cache or database).

After installing, we did have trouble with plugin activation on some videos. We clicked the button and it fixed the problem. We knew nothing about this button’s purpose. It isn’t mentioned in the plugin read.me documentation!

Lazy load for videos
Last Updated: 3 months ago
Active Installs: 5,000+
All Time Installs: 61,506
Retention: 8.2%

We’re still discovering more about the Lazy load for videos plugin. It appears a more recent version is on GitHub – even though the version number is the same. We saw a blog mentioning that the WordPress repository version wasn’t being updated. But that may be gossip.

One thing we’ve found is an option to “Hide-related Videos” with a checkbox. The feature was added in the last update. This sounds like a good thing if you don’t want to send viewers off to watch competitors videos.

The Lazy Load for Videos plugin read.me file claims videos on posts and pages are both activated.

Of interest: Jetpack by WordPress.com offers an extension called Shortcode Embeds. It makes Lazy Load for Videos always break. The cure is to simply disable the extension. This is a known issue published in the read.me file.

Steve Teare
performance engineer

Creative Speed Strategy using free plugins and free themes.

What others think of us:


"That's very helpful. What a thorough report. I already implemented some of these changes. Thank You Steve!" comelody.com, Tiberius, Israel

by - Shlomi Tsur