You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
3
+
🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.
[](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
> 💡 [View document in other languages](#documentation-in-other-languages)
16
12
17
13
## Introduction
18
14
19
-
Lagging Big CSS files, slow JavaScript, or bulky media resources can cause issues with your website's Web Vitals, leading to a slow and frustrating user experience. But what if you could fully defer these resources and improve your website's load speed?
20
-
21
-
By using Defer.js, you can say goodbye to these issues! With its lazy loading capabilities, dependency-free design, lightning-fast performance, and hard-won experience, Defer.js is the perfect solution for optimizing your website's Web Vitals. Whether you're using a modern or legacy browser, Defer.js makes it easy to enhance your website's user experience with lightning-fast loading times.
> [NEED HELP] Let's make the documentation and examples better together!
15
+
Sluggish Big CSS files, slow JavaScript, or bulky media resources can negatively impact your website's Web Vitals, leading to a slow and frustrating user experience. But what if you could seamlessly defer these resources and boost your website's load speed?
I would like to express warm thanks to [@Ataruchi](https://twitter.com/Ataruchi), [@HeavyPeat](https://twitter.com/HeavyPeat) and [Limosuki](https://www.limosuki.com/) for their articles in Japanese.
48
-
49
-
***
17
+
By utilizing Defer.js, you can bid farewell to these issues! With its lazy loading capabilities, dependency-free design, lightning-fast performance, and hard-won experience, Defer.js is the ultimate solution for optimizing your website's Web Vitals. Whether you're using a modern or legacy browser, Defer.js makes it a breeze to enhance your website's user experience with blazing-fast loading times.
50
18
51
19
## Why Choose Defer.js
52
20
53
-
- 🧩 Lazy load almost anything with ease
54
-
- 🚀 Lightweight and fast, with no dependencies
55
-
- 🤝 Effortlessly integrates with your favorite frameworks
21
+
- 🧩 Effortlessly lazy load almost anything
56
22
- 🔰 Easy to use, even for beginners
23
+
- 🚀 Lightweight and blazingly fast, with no dependencies
57
24
- ⚡️ Super tiny (minzipped size is around 1KB)
25
+
- 🤝 Seamlessly integrates with your favorite frameworks
58
26
- 🦾 Optimized for the latest Web Vitals standards
59
27
- 📱 Optimized for use on smartphones
60
-
- ✅ Supports legacy browsers like Internet Explorer 9
28
+
- ✅ Supports legacy browsers like Internet Explorer 9 <sup>[(*)](#browser-support)</sup>
29
+
30
+
## Contributing
61
31
62
-
<sup>*Legacy browsers like Internet Explorer 9 require `IntersectionObserver` polyfill.</sup>
Defer.js is compatible with all modern browsers, including:
67
-
- 🖥 IE9+ / Edge
68
-
- 🖥 Firefox 4+
69
-
- 🖥 Safari 3+
70
-
- 🖥 Chrome
71
-
- 🖥 Opera
72
-
- 📱 Android 4+
73
-
- 📱 iOS 3.2+
40
+
If you find the project useful, please give it a star or consider donating via [PayPal](https://www.paypal.me/shinsenter).
41
+
You can also [open a discussion](https://github.com/shinsenter/defer.js/discussions/new/choose) on Github if you have any idea to improve the library.
74
42
75
-
---
43
+
[](https://www.paypal.me/shinsenter)[](https://code.shin.company/defer.js/stargazers)[](https://code.shin.company/defer.js/discussions/new/choose)
76
44
77
-
## Known issues
45
+
Your support helps maintain and improve these project for the community.
In iOS Safari, the first `click` event may not work when using `Defer.all()` with the `waitForUserAction` argument set to `true` and one of deferred scripts make a DOM change.
47
+
I appreciate you respecting my intellectual efforts in creating this library.
48
+
If you intend to copy or use ideas from this project, please give proper credit.
81
49
82
50
---
83
51
84
-
## Getting started
52
+
## Getting Started
85
53
86
54
Defer.js is an easy-to-use library that will help boost your website's performance by reducing loading times. Here's how to get started:
87
55
@@ -95,15 +63,15 @@ Add the Defer.js library to your page by including a `<script>` tag just below t
To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the [defer.min.js](https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer.min.js) and replacing the comments in the script tag with its content.
74
+
To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the [defer.min.js](https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer.min.js) and replacing the comments in the script tag with its content.
107
75
108
76
```html
109
77
<head>
@@ -117,34 +85,33 @@ To save an HTTP request, you can even inline the entire Defer.js library by copy
117
85
</head>
118
86
```
119
87
120
-
### Compatibility with older versions
88
+
### Compatibility with Older Versions
121
89
122
-
If you're using an older version of Defer.js, you can use `defer_plus.min.js` instead of `defer.min.js`.
90
+
If you're using Defer.js v1.x, you can use `defer_plus.min.js` instead of `defer.min.js` without wondering about migrations.
To enhance performance for legacy browsers that don't support the `IntersectionObserver` feature, you can load the IntersectionObserver polyfill library after the `defer.min.js` script tag.
139
107
140
108
```html
141
109
<script>/* Defer.js content */</script>
142
110
143
111
<!-- Add the IntersectionObserver Polyfill for legacy browsers -->
*NOTE*: Modern browsers support the `IntersectionObserver` feature, so you don't have to worry about adding the polyfill if you don't have legacy browsers in mind.
0 commit comments