Updated: May 2018
Mobile Speed

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.

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 anyway).

★★★★★
Lazy Load by WP Rocket
Active installs:
10,000+
Zip download size:
92k
All Time Installs: 92,829
Retention rate: 11 percent (medium)

What we like most: No JavaScript library such as jQuery is used and the script weight is 1k to 6k. Fast. And, it defers about 500k video page weight on heavy pages.

Go to Settings > LazyLoad and check the 3 boxes to activate. This will then 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 conflict with other plugin’s shortcodes on a page or post. Sadly, it doesn’t work with Elementor page builder.

Using the Lazy Load for Videos plugin can save 500 to 700 milliseconds in page load time. Studying 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.”

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
Zip file size: 271k
Active Installs: 7,000+
All Time Installs: 80,403
Retention: 9%

One thing we’ve found is an option to “Hide-related Videos” with a checkbox. This sounds like a good thing if you don’t want to send viewers off to watch competitors YouTube videos. This function is available in Elementor’s video provisions, also.

End of YouTube video attempts to entice visitors away from your site. Sometimes to competitor sites. Bad! Defeating this *non-feature* is an option with the Lazy Load for Videos plugin. There are other methods but we’ve found this the simplest way to keep visitors engaged with your site content.

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 break. The cure is simply disable the extension. Or like us, don’t use Jetpack! This is a known issue published in the read.me file.

BEFORE: lazy load for video plugin installed. The test page has 13 one- to seven-minute duration videos. Pingdom is a best-case scenario. Load time is 3.15 seconds. Using WebPagetest.org, the test page loaded in over 7 seconds (worst-case).

 

AFTER: lazy load for video plugin installed. Same test page. Pingdom is a best-case scenario is now 1-second with unprimed cache. With cache, page load is 853 milliseconds.

We’ve also found this good lazy load plugin:

★★★★
Lazy Load XT
Active installs: 3,000+

Zip file size: 29k
All Time Installs: 20,413
Retention: 15%

The plugin author claims this is the fastest and lightest lazy load plugin in the WordPress Plugin Directory. You can lazy load images, YouTube and Vimeo videos, and iframes. We’ve been testing it for several months and find it a good alternative when the other Lazy Load for Videos plugin conflicts with other plugins. We’re find this a common problem and it explains the low retention rate. Lazy Load XT appears a little slower in the view screen when loading images and video. It uses a fade in method. This plugin does work with Elementor page builder.

Both plugins enqueue jQuery, a negative effect for speed. If your theme isn’t loading that JavaScript library, we recommend selective activation of these plugins only on the pages where needed. This will keep your site running fast. Also, use WP jQuery Plus to keep things fast.

Here’s a comparison on a bare-bone GeneratePress theme with Gutenberg page-builder plugin – and a YouTube video embedded.

NOTE: If you use a page builder like Elementor, Lazy Load for Videos will load but doesn’t work to reduce load time. But LazyLoad XT, works fine. Go figure. Both work with Gutenberg.

No lazy load base line.

Page load time: 1.5 seconds. Page  weight: 720k. The video weight is 526k – 72 percent of total weight.

Lazy Load for Video Plugin

Page load time: 815 milliseconds. Page  weight: 94k.

LazyLoad XT Plugin

Page load time: 735 milliseconds. Page weight: 724k.

BJ Lazy Load Plugin

Page load time: 691 milliseconds. Page weight: 724k. Using Elementor instead of Gutenberg as on other tests.

Even though LazyLoad XT and BJ Lazy Load are faster loads, their page weight and bandwidth consumption for mobile is 7X higher. This makes Lazy Load for Video plugin more attractive for mobile experience. All these plugins video preview and play button are scalable and optimized for mobile devices.

Lazy Load for Videos plugin is our prefer plugin between these two. Both work and if one has a conflict – try the other one. You can use both these plugins with selective activation if your posts have shortcode conflicts. We prefer the UX behavior of Lazy Load for Videos.

If you load both plugins simultaneously, Lazy Load for Videos will take precedence since it loads first. Page weight is increased by these plugins. Both plugins load globally. Loading an embedded YouTube video without lazy loading, doesn’t enqueue jQuery. But this small gain is swamped by the huge video load time.

There’s not too much overhead for a single video. What happens when you have a video library or a blog with multiple videos?

YouTube loads a number of files (8 requests) with each iframed video. Web pages with multiple Youtube videos slow down due to these multiple HTTP requests and downloads. Preventing or delaying embedded YouTube video player loads is the speed goal.

The fastest websites have no JavaScript, no CSS, and require no database calls. YouTube does all this and preloads third-party ad stuff you’ll see at the end of the video (related videos).

Video-loads slow a page down by a half-second typically. It’s only a big deal if a half second is important to you. Our goal is a 2-second load time. If you put a video on a home page, boom! Potentially, 25 percent of performance budget is shot.

One example is the very video page where you saw the robots. Before plugin: 3.15 seconds. After: 1.03 seconds. Supposedly, it should be worse – but caching seems to help YouTube somehow. There are 13 videos on that page. Do people do that cramming? Yes. A video library page is common practice.

Is a 2-second differential important? Not if your target is an average 8-second page load.

It’s not really about measuring speed. It’s about human attention span and expectation. 2 seconds is the sweet spot for page loads (today). But one second feels seamless. User experience is then optimal.

If you want excellent pages (we mean in the top 1-percent quality range or under 1-second page loads), you have to take video into consideration. What if a form is also on the page? And there is HTTPS/SSL? Then videos just add to the speed overhead.

How good is good enough is always a compromise. Can you get 2-second load times on shared hosting? Yes.

Speed is just a feature. Make your website fast and useful, too. If it’s not useful, who cares if it’s fast.

September 2016 report – Average load time for mobile sites is 19 seconds over 3G connections.

Do website owners have anxiety about a half second? Yes. That’s a major problem (they think). But not for someone on a desktop with fiber connections.

REFERENCES:
https://wpspeedguru.com/speed-up-wordpress-using-video-lightboxes/

https://www.mainstreethost.com/blog/light-youtube-embeds-faster-page-load/

“A single YouTube embed can load up to 400KB of data before you even hit the play button.”

From surveys, the top three biggest challenges for WordPress users are: 52% performance issues, 41% security issues, 35% site-breaking updates. NOTE: These are all fear related – not reality related.

Most common goals for WordPress websites in 2018:
64% increase traffic,
43% increase revenues,
39% become more efficient at running a site.

All these three are profit related.

https://pagely.com/blog/wordpress-survey-2018/

ABOUT INFINITE SCROLL

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 plugins are hard to get to work with some themes. We’ve never had success with them on stripped-down speed themes. But we’ll keep trying. Here’s a list:


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+


OFFSITE LINK ABOUT LAZYLOADING PLUGINS

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Steve is straight-up, competent and insightful. Rather than ‘a one size fits all’ service, he identified solutions and priorities relevant to my unique situation. I respect his scrupulous and ethical approach. I commend him to anyone looking for unbiased and effective speed help." Prime Architecture New Zealand

by - Paul King

How Elementor page builder affects mobile page speed.
Evergreen Content: Expired dates diminish site credibility.

Leave a Reply

Your email address will not be published. Required fields are marked *