1. Lazy loading
Not all JavaScript needs to be loaded when the user first opens a website. For example, you might have an email registration feature at the bottom of the page. Unless the user browses here, there is no need to load it. Therefore, many web developers use a lazy loading technique. Compared to loading all JavaScript at once, lazy loading will only load some JavaScript that will be used.
There are many ways to implement lazy loading. For example, some elements do not need to interact immediately, but need to interact as soon as possible. You can wait until the page is loaded to userequestIdleCallback(). Or as we said before, if there is an element that does not allow oppression to interact immediately at the bottom of the page, you can useintersectionObserverListen to the element and load it when the user browses to this element.
Now the question is: How to make the code lazy to load? The best way is: dynamicimport, it is part of ESM. useimport()Can allow you to load JavaScript at any time. For example, this will load a JavaScript when the browser is idle:
requestIdleCallback(() => {
import("/");
});Another way to implement lazy loading is:scriptTagsasyncanddeferproperty. This technology is not scalable, but it can be implemented very simply when the DOM is loaded and loaded JavaScript.
2. Minimize
Minimization is an easy way to improve performance. It is usually done with automatic minimization tools like Terser or ESBuild. These tools narrow down your code by removing spacing, long variable names, and other things that are helpful in development but increase script size in production. For example, suppose I used Terser to reduce this code:
("DOMContentLoaded", (event) => {
const images = ("img");
for (const image of images) {
= 50;
= 50;
}
});The final result is:
("DOMContentLoaded", (e) => {
const t = ("img");
for (const e of t) ( = 50), ( = 50);
});That's the reduction of 67 bytes, from 203 bytes to 136 bytes! This doesn't make a significant difference, but for larger scripts, minimization can have a considerable impact.
3. Bundling
Script size is not the only thing that matters. The number of requests is also important because each request increases overhead. Basically, you want to keep your script count to a minimum. However, splitting code is usually a code practice to keep the code clean. Fortunately, like minifiers, there are automated tools to solve this problem. These are called bundlers. The bundler analyzes your code, see which scripts are importing each other, and figure out how to combine them. The most well-known bundlers are Webpack, Rollup and Vite.
Another benefit of using bundlers is that most bundlers can also be used as build tools, making it easy to do things like reducing and TypeScript compilation. For more information about bundlers, check out my article on bundlers.
4. Code splitting
You might be surprised that this is after packing. "I package my code just to break it apart?" Not necessarily. In fact, this is also a feature of packaging tools. While reducing the number of requests is good, you don't want the user to have to load all the code on your website at once. You can solve this by creating a new full packager for each page, but this will negate some of the benefits of caching (we'll talk about it later). To solve this problem, we have code splitting. Code splitting combines the advantages of packaging and lazy loading, while ensuring that any unnecessary code for the page is not loaded. The packaging tool performs code segmentation by analyzing the imported map and finding out which scripts need to be placed in their own bundles. Most packaging tools are done automatically, although it is helpful to write code that is easier to analyze (for example, use static imports whenever possible).
5. Tree Shaking
Another common feature of the bundler is tree-like shaking. You might import a part of a library, but don't need other parts. However, if you do this without tree shaking, the end user will end up loading the entire library, which may add a lot of JavaScript. Tree Shake solves this problem; a bundler that supports tree Shake automatically deletes unused parts of the library, thus reducing the code you import a lot. For example, look at Lodash (specifically lodash-es), a large library of JavaScript tools. The entire module has almost 100 kilobytes, but if you only use the intersect() function, you will only import 2.7 kilobytes of code. Now, in the case of Lodash, there are some packages that only contain a single function, but if you use a large number of functions, these packages will be more troublesome to use, and many libraries do not.
6. ES module
To make many of the aforementioned features work, ECMAScript Modules (ESM) are very useful, and even essential. ESM is a module specification developed to regulate the code sharing method between different files. Before ESM, there were some conflicting standards like CommonJS and UMD that were not even natively supported by browsers. ESM unifies these standards and provides syntax that helps implement functions such as tree shaking (note what I mentioned earlier to use lodash-es instead of standard lodash). Additionally, since ESM is natively supported in the browser, you don't need a heavy polyfill to use ESM.
// ESM
import { something } from "test";
export const something = "test";
// CJS
const something = require("test").something;
= "test";7. CDN
Hosting static files on your own server is pointless. Using a complete server for actual server-side calculations increases your cost, development complexity, and website loading time. Instead, CDN is the better solution. CDN (Content Delivery Network) is a server network designed to provide static files quickly and inexpensively. Instead of serving from just one server, you can provide files from dozens or hundreds of servers (depending on the CDN), which reduces latency because the server is closer to the user. In addition, CDN often configures caching and compression functions for you to save time. Some examples of popular CDNs are Cloudflare CDN and Amazon's CloudFront.
8. Cache
While the first loading experience is crucial, you also need to take into account the performance of the website's repeated visitors. One way to make duplicate access significantly faster is through cache. The purpose of browser cache is to save a copy of the website resource and use that copy instead of downloading it again. This means the feeling of repeated visits is almost instant. To set up the cache, you need to set the Cache-Control header for the resource you want to cache in the response. If you are using CDN, this is likely to be automatically configured for you. If you don't have one, it's easy to set up.
9. Compression
I believe you have encountered .zip or . files. You may also know that while converting directories into files, they also reduce the file size. The reduction in size is done by compression. The compression works by running an algorithm that makes the file smaller by shrinking duplicate statements and doing something else, depending on the algorithm used. There are many popular compression algorithms such as deflate, lz4, Brotli and Zstandard. The compression algorithm used by zip and gzipped files is deflate.
Implementing compression can be a bit difficult, but there are also simple ways to do it. The easiest way is to use a CDN that automatically compresses files, as we talked about in Article 7. Another easy way to implement compression is to run a file server that supports compression. However, if you can't do both, there are some other solutions. Many build tools/bundlers have plug-ins that automatically generate compressed files, which you can provide to the browser to automatically decompress. The browser uses the Accept-Encoding header to tell you what compression algorithm it supports, while your server uses the Content-Encoding header to tell the browser what compression algorithm to use in the response. For more information, please check out MDN's article on HTTP compression.
10. Lighthouse
Lighthouse is a tool that helps you automatically review website performance, and also includes several other categories such as SEO and accessibility. It is very helpful for identifying performance issues and providing a convenient way to resolve them. If you have Chrome or other Chromium-based browsers, Lighthouse should be available by default. If you use another browser, you can download the extension or use PageSpeed Insights. PageSpeed Insights also provides data from real users, which can be helpful if you want to understand the actual experience of the user.
Summarize
With these tips, you should achieve greater performance gains on your website, converting into more retention and conversions.
The above is the detailed content of 10 ways to improve JavaScript loading speed. For more information on improving JavaScript loading speed, please follow my other related articles!