lazysizes

Description

lazysizes is a WordPress plugin for the fast (jank-free), SEO-friendly and self-initializing lazyloader with the same name. Support includes images (including responsive images with srcset and the picture tag), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.

This plugin works by loading the lazysizes script and replacing the src and srcset attributes with data-src and data-srcset on the front end of a WordPress site. When a post or page is loaded, the lazysizes javascript will load the images and iframes dynamically when needed.

Thanks to aFarkas and contributors for making the lazysizes project possible, and for letting me use the same name.

Also thanks to dbhynds for making the Lazy Load XT plugin this plugin is based on.

Installation

  1. Install and activate the plugin through the ‘Plugins’ menu in WordPress

or

  1. Download and unzip lazysizes.
  2. Upload the lazysizes folder to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

Why aren’t my images lazy loading?

Lazysizes filters images added to the page using the_content, post_thumbnail_html, widget_text and get_avatar. If your images are added using another function (wp_get_attachment_image for example), lazysizes does not filter them. However, you can filter the HTML yourself by passing it to get_lazysizes_html.

For example, if a theme has:
echo wp_get_attachment_image($id);
Changing it to the following would lazy load the image:
echo get_lazysizes_html( wp_get_attachment_image($id) );

But this plugin looks like Lazy Load XT!!

Yes, it does. The PHP code for this plugin is heavily based on that of Lazy Load XT.
The main difference is that this plugin is a bit simplified, and is using a completely different lazy loading library, with no jQuery dependency.

Thanks to dbhynds for making the Lazy Load XT plugin. Without that project, this one would not be possible.

Why is this plugin called the same as the lazysizes JS library?

There are a couple of reasons:

  1. I like the name. It’s good.
  2. I’m hoping it will help people discovering the plugin. I originally tried searching for a WordPress plugin using the library myself, and other people might be trying the same.

If you are wondering, this plugin is not affiliated with the lazysizes project. I got permission by aFarkas to use the name, but that’s as far as any connection between the two go.

Reviews

30. travnja 2019.
Works great, even with picture tags! The fade-in effect of the lazyloaded images is really nice! And the developer is really active and helped me a lot! Thanks again, Patrick 🙂
22. prosinca 2018.
As a developer I knew the lib js that does a very good job. So I'm not surprised to have a plugin that does a good job too. (Except, video loading does not work)
01. studenoga 2018.
I already tested some other plugins against this plugin for my site load speed and request counts. This plugin is greatly reducing my page load speed I really don't know why they couldn't beat this plugins performance on gtmetrix. Performance is really high as author mentioned!
03. rujna 2018.
LazySizes is lazyloading done right. I've used it before and was pleased to see that it's now available as a WordPress plugin. For me, this is the best lazy-load script on the planet. I've tried many WordPress plugins and all failed except LazySlides. Excellent!
Pročitajte svih 5 recenzija

Suradnici i Programeri

“lazysizes” is open source software. The following people have contributed to this plugin.

Contributors

“lazysizes” has been translated into 2 locales. Thank you to the translators for their contributions.

Prevedite “lazysizes” na svoj jezik.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.1.0

  • Upgrade lazysizes library to version 5.0.0.
  • Add experimental support for native lazy loading.
  • Fix fatal error during ajax processing. Thanks to @eastgate for reporting.
  • Fix PHP warning on certain pages, like the events page from the plugin The Events Calendar. Thanks @julian_wave for reporting.

1.0.0

Big thanks to martychc23 and dutze for their help and patience in making this release as good as it is.

  • Proper support for the picture tag, by popular request. Big refactoring of the HTML transforming code was done to make picture element support possible.
  • Improve and fix support for audio/video elements. The plugin now handles the preload attribute and leaves the src attribute alone on source elements inside video/audio.
  • Opt-in support for get_attachment_image. Please note that the plugin cannot add a no-js fallback for images lazy-loaded using this method.
  • Add option to enable/disable noscript fallback
  • Fix plugin action links
  • Several fixes to improve compatibility

0.3.0

  • Add support for the aspectratio plugin for lazysizes, which makes images have the right height while loading. Thanks to Teemu Suoranta (@teemusuoranta) for implementing.
  • If Javascript is turned off, the image tag that would normally be lazy loaded is now hidden properly. Thanks to @diegocanal for reporting and fixing.

0.2.0

  • Update the lazysizes library to version 4.1.5
  • Fix lazy loading of elements without a class attribute, like some iframes
  • Fix translation loading

0.1.3

  • Remove unused code for advanced settings

0.1.2

  • Fix text domain loading

0.1.1

  • Updated readme

0.1.0

  • Initial version of the plugin