An efficient lazy loader (defer.js)

Description

⚡️ A native, blazing fast lazy loader. ✅ Legacy browsers support (IE9+). 💯 SEO friendly. 🧩 Lazy load almost anything.

This plugin helps you to optimize everything like image tags, video, audio, iframes as well as stylesheets, and JavaScript.

This plugin incorporates tips used a lot by experienced web experts, as well as making the most of the latest web technologies in lazy-loading resources on the page.

Rate 5 stars (⭐️⭐️⭐️⭐️⭐️) if you guys like it.

Good points

  • ⚡️ Native API, blazing fast
  • 👍 Legacy browsers support (IE9+)
  • 🥇 SEO friendly
  • ✅ Very easy to use
  • 💯 No dependencies, no jQuery
  • 🤝 Works well with your favorite frameworks
  • 🧩 Uses IntersectionObserver API for optimized CPU usage
  • 🏞 Supports for responsive images, both srcset and sizes attributes

💡 Tip: To archive better result, you should consider disabling all optimization features (Eg. lazy-loading, HTML minification, JS minification, etc.) by other plugins.

We recommend you use it with another page-caching plugin for best performance.

Browser support

Available in latest browsers. This library also works perfectly with Internet Explorer 9 and later.

  • 🖥 IE9+ / Microsoft EDGE *
  • 🖥 Firefox 4+
  • 🖥 Safari 3+
  • 🖥 Chrome *
  • 🖥 Opera *
  • 📱 Android 4+
  • 📱 iOS 3.2+

Powered by defer.php

defer.php is a library that focuses on minimizing payload size of HTML document and optimizing processing on the browser when rendering web pages.

  • [x] Simplify library options
  • [x] Embed defer.js library
  • [x] Normalize DOM elements
  • [x] Fix missing meta tags
  • [x] Fix missing media attributes
  • [x] Preconnect to required origins
  • [x] Preload key requests
  • [x] Prefetch key requests
  • [x] Browser-level image lazy-loading for the web
  • [x] Lazy-load offscreen and hidden iframes
  • [x] Lazy-load offscreen and hidden videos
  • [x] Lazy-load offscreen and hidden images
  • [x] Lazy-load CSS background images
  • [x] Reduce the impact of JavaScript
  • [x] Defer non-critical CSS requests
  • [x] Defer third-party assets
  • [x] Add fallback <noscript> tags for lazy-loaded objects
  • [x] Add custom HTML while browser is rendering the page (splashscreen)
  • [x] Attribute to ignore optimizing the element
  • [x] Attribute to ignore lazyloading the element
  • [x] Optimize AMP document
  • [x] Minify HTML output

Keep in touch

Released under the GNU General Public License v2 license.
https://github.com/shinsenter/defer-wordpress/blob/master/LICENSE

Copyright (c) 2019 Mai Nhut Tan <shin@shin.company>

Screenshots

  • Scoring 100/100 in Google PageSpeed Test!
  • Defer almost anything, easily speed up your website.

Installation

  1. Upload defer-wordpress to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

This library still supports PHP 5.6, but we recommend that your server should be running PHP version 7.3 or greater for better performance.

FAQ

What is defer.js?

🥇 A super tiny, native performance library for lazy-loading JS, CSS, images, iframes… Defer almost anything, easily speed up your website.

Why should I lazy-load my content?

The loading of contents on web page may make your load speed more slow, no one likes staring at a blank white page; users are impatient and will leave quickly.

Lazy loading content on web page can help reduce resource contention and improve performance.

Why should I use this plugin?

This plugin supports you to handle some common tips to help your website optimize the download of on-page resources.

These tips are published at following website by Google Developers, if you are interested you can consult to understand more about website optimization.

You can also manually implement these tips your-self, but it takes a lot of time and requires a lot of expertise.

How does this plugin work?

This plugin helps you to optimize everything like image tags, video, audio, iframes as well as stylesheets, and JavaScript.

This plugin incorporates tips used a lot by experienced web experts, as well as making the most of the latest web technologies in lazy-loading resources on the page.

Among them are creating “data-src” attributes to laza-load the media, even the loading=”lazy” feature recently introduced by Google Developers.

High performance and accuracy

In addition, this plugin uses DOM to process the website structure so it produces accurate results and is faster than any other plugin that uses HTML text processing.

You can give it a try and I believe you will be surprised by the results it brings to your website.

How about performance and compatibility?

We have tested this plugin with quite a few others and have not found any significant conflicts.

For best use of this plugin, you should consider disabling all optimization features (Eg. lazy-loading, HTML minification, JS minification, etc.) by other plugins.

We recommend you use it with another page-caching plugin for best performance.

Reviews

September 26, 2020
Specifically the svg placeholder option is a gem, we have been using this technique for quiet some time and it's good at preventing layout shift if used properly. Remember to always provide a width & height for your images so this could work!
Read all 37 reviews

Contributors & Developers

“An efficient lazy loader (defer.js)” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.0.0-beta Upgraded to v2

1.1.15 Fixed bugs in defer.js 1.1.13, 1.1.14

1.1.14 Improved performance

1.1.13 Fixed some Firefox bugs

1.1.12 Fixed some IE bugs, tested with the latest WordPress version

1.1.11 Fixed security issue (Fixed CVE-2019-18888)

1.1.10+5 Removed external resources

1.1.10 Bug fixes and improvements

1.1.9 Fixed wrong encoding when using mb_detect_encoding() function

1.1.8 Updated defer.php library (v1.0.15)

1.1.7 Fixed issues of FireFox, code improvements

1.1.6 Updated library version, improved javascript execution order

1.1.5 Hotfix: Escape HTML node value

1.1.4 Many improvements

1.1.3 Unify lazy attributes of another plugins

1.1.2 Fixed some known issues with gtm.js, improve library’s caches

1.1.1 Small bug fixes (IE polyfill, missing meta tags, preloading ads)

1.1.0 Added settings page

1.0.9 Improved preloading code

1.0.8 Fixed issues with open web fonts

1.0.7 Optimized scriptloader, polyfill, scrset

1.0.6 Small bug fixes (color placeholders, css)

1.0.5 Migrated with defer.js library

1.0.0 ~ 1.0.4 The first implement