shinsenter/defer-wordpress

🔌A Wordpress plugin integrating my beloved "defer.js" library into your websites. Hope you guys like it.

Hello, world! 👋

Nice to meet you!

I'm Tan 👋🏻, a software engineer from Vietnam 🇻🇳 passionate about PHP, JavaScript, and modern frameworks.

My specialty is crafting high-performance, user-friendly solutions. By continuously learning and integrating innovations, I propose optimal approaches using the latest technologies. Smooth communication and collaboration are important to me.

I'm currently residing in Japan 🇯🇵, immersed in the culture during my free time.

---

🎄 What I'm currently working on

• shinsenter/php - 📦 Simplified PHP Docker images for effortless customization and extension setup. (2 days ago)
• shinsenter/docker-imgproxy - 🌐 An ultra fast, production-grade on-the-fly image processing web server. Designed for high throughput with Nginx caching. Powered by imgproxy. (2 weeks ago)
• laravel/framework - The Laravel Framework. (1 month ago)
• shinsenter/defer.js - 🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals. (1 month ago)
• shinsenter/defer-wordpress - 🔌A Wordpress plugin integrating my beloved "defer.js" library into your websites. Hope you guys like it. (2 months ago)
• dunglas/frankenphp - 🧟 The modern PHP app server (2 months ago)
• shinsenter/docker-squash - A simple shell script provides an alternative to Docker's experimental --squash option for building optimized Docker images by squashing layers. (2 months ago)
• shinsenter/defer.php - 🚀 A PHP library that focuses on minimizing payload size of HTML document and optimizing page speed. (8 months ago)

---

🎄 My latest projects

• shinsenter/docker-squash - A simple shell script provides an alternative to Docker's experimental --squash option for building optimized Docker images by squashing layers.
• shinsenter/playground - My playground with code.
• shinsenter/php - 📦 Simplified PHP Docker images for effortless customization and extension setup.
• shinsenter/docker-imgproxy - 🌐 An ultra fast, production-grade on-the-fly image processing web server. Designed for high throughput with Nginx caching. Powered by imgproxy.
• shinsenter/defer-laravel - 🚀 A Laravel package that focuses on minimizing payload size of HTML document and optimizing processing on the browser when rendering the web page.
• shinsenter/defer-wordpress - 🔌A Wordpress plugin integrating my beloved "defer.js" library into your websites. Hope you guys like it.
• shinsenter/defer.php - 🚀 A PHP library that focuses on minimizing payload size of HTML document and optimizing page speed.
• shinsenter/defer.js - 🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.

---

🎄 Latest releases I've contributed to

• laravel/framework (v11.7.0, 4 days ago) - The Laravel Framework.
• dunglas/frankenphp (v1.1.4, 2 weeks ago) - 🧟 The modern PHP app server
• shinsenter/defer.js (3.8.0, 1 month ago) - 🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.
• shinsenter/php (5.0.3, 2 months ago) - 📦 Simplified PHP Docker images for effortless customization and extension setup.
• shinsenter/defer-wordpress (2.9.0, 2 months ago) - 🔌A Wordpress plugin integrating my beloved "defer.js" library into your websites. Hope you guys like it.
• shinsenter/defer.php (2.5.0, 8 months ago) - 🚀 A PHP library that focuses on minimizing payload size of HTML document and optimizing page speed.

---

🎄 Latest PRs I published

• [11.x] Prevent crash when handling ConnectionException in HttpClient retry logic on laravel/framework (1 month ago)
• [11.x] Fix Call to undefined method Illuminate\Http\Client\ConnectionException::toException() on laravel/framework (1 month ago)
• For 3.8.0 on shinsenter/defer.js (1 month ago)
• [5.x] Add Sulu CMS on shinsenter/php (2 months ago)
• For 2.9.0 on shinsenter/defer-wordpress (2 months ago)
• For 2.8.0 on shinsenter/defer-wordpress (2 months ago)
• For 3.7.0 on shinsenter/defer.js (2 months ago)
• docs: remove unnecessary parenthesis on dunglas/frankenphp (2 months ago)
• docs: remove unnecessary parenthesis on dunglas/frankenphp (2 months ago)
• Fixes #59 on shinsenter/php (2 months ago)

---

🎄 Recent stars

• awesome-selfhosted/awesome-selfhosted - A list of Free Software network services and web applications which can be hosted on your own servers (1 month ago)
• binhnguyennus/awesome-scalability - The Patterns of Scalable, Reliable, and Performant Large-Scale Systems (2 months ago)
• microsoft/OMS-Agent-for-Linux (3 months ago)
• dunglas/frankenphp - 🧟 The modern PHP app server (4 months ago)
• shinsenter/docker-squash - A simple shell script provides an alternative to Docker's experimental --squash option for building optimized Docker images by squashing layers. (4 months ago)

---

---

🤝 Support development

If you find my projects helpful and wish to support continued development, I welcome donations or other contributions.

Donate

I appreciate monetary contributions via PayPal to help fund development costs. Your support is greatly appreciated.

Contribute

If you have suggestions, spot issues, or can contribute code changes, please open GitHub issues or pull requests on my projects. I welcome community input to help expand capabilities and fix problems!

---

📫 Contact me

• Twitter: https://twitter.com/shinsenter
• Linkedin: https://www.linkedin.com/in/mai-nhut-tan

Together we can build better tools for working. Thank you!

defer-wordpress's Issues

Version demo

Mình nghĩ plugins này tác giả cũng phải có 1 bản demo riêng cho nó trên WordPress, để người dùng họ dễ xem trước và so sánh hơn. Ví dụ như trang chưa cài DeferJS thì như nào, và sau khi cài DeferJS thì trang sẽ như nào.

Move `defer-wordpress` page inside Tools or Settings

It shouldn't have its own icon on the admin sidebar since it's something most users won't have to interact with and it doesn't have any sub-pages.

How Can I Trigger Lazyloading For Ajax Content?

Thank you very much for this awesome plugin.

I have a question: in combination with the BeRocket woocommerce-ajax-products-filter plugin, the WooCommerce product images are not loaded after a page switch (as they are served via Ajax, I believe Defer.js does not detect them to be images to be checked for whether they are in the viewport).
How can I tell the plugin to re-initialize/re-check for new images etc.?

Currently, my solution is to just query all images and replace the data-src attribute after new content is loaded, but this kind of destroys the idea of lazy loading...

Thanks for a hint!

const images = testElement.querySelectorAll( 'img' );
images.forEach( ( img ) => {
	if ( img.getAttribute( 'data-src' ) ) {
		img.setAttribute( 'src', img.getAttribute( 'data-src' ) );
	}
} );

Minify HTML conflicting with Yoast SEO schema markup

Hi, after enabling the Minify HTML option, the Google Webmaster Tool started notifying the error "Invalid top-level element: null".
looking at the source code I was able to locate the problem, which is in conflict with Yoast SEO:

the easiest solution for me was to disable the Minify HTML option in the plugin and the problem was solved, but I thought it prudent to warn you of the conflict.

Defer Offscreen images

Seems like lazy load has stopped working, Pagespeed insights is now showing defer offscreen images even though Lazy Loading is on for images, iframes and videos?

It was working all good before the last update today.

Not working

Hi, I tested the defer-wordpress plugin on the Astra theme and it worked.
Helium theme did not work, could you help me solve it?
Thanks, Ricardo / Brazil

Is defer responsible for the default tiemzone warning in WordPress?

This appeared around the same time I enabled defer for my production site. Do you have this, too?

interferes with wordpress builder theme, how can I disable deferring certain scripts?

im using a wordpress builder theme, and unfortunately deferring jquery makes the editor break, is it possible to disable optimizations for logged in users, or to exclude certain urls from deferring?

Allow opting-out of video lazy-loading

Both <picture> and <video> use the same <source> element but there still should be a way of not lazy-loading videos separately than images since they natively support [preload="none"].

image tags have incorrect sources

With defer enabled, some images have a weird source:

src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1024'%20height='617'%3E%3C/svg%3E"

The images are fine with defer disabled.