JavaScript developers: It’s time to optimize your code!
There are multiple techniques 📘 to ensure your site loads as fast as possible. 🔥
Let’s review some of these in this thread 🧵and stick to the end to find how to do the same with images.
⬇️
There are multiple techniques 📘 to ensure your site loads as fast as possible. 🔥
Let’s review some of these in this thread 🧵and stick to the end to find how to do the same with images.
⬇️
1. Start by removing unused code.
This one seems obvious, but a lot of people forget to do it.
First, check your code manually.
Then, after reloading your page without cache, check the Coverage tab in Chrome’s DevTools to get an idea of how much unnecessary JS code you have.
This one seems obvious, but a lot of people forget to do it.
First, check your code manually.
Then, after reloading your page without cache, check the Coverage tab in Chrome’s DevTools to get an idea of how much unnecessary JS code you have.
2. Remove unused libraries.
It’s very simple to npm half the Internet down, and then you change your mind, and references to libraries that aren’t used anymore stick around and slow down your site.
Go through your list of libraries, and one by one make sure they are all used.
It’s very simple to npm half the Internet down, and then you change your mind, and references to libraries that aren’t used anymore stick around and slow down your site.
Go through your list of libraries, and one by one make sure they are all used.
3. Sometimes it’s better to reinvent the wheel.
How many times have you downloaded an entire library to take advantage of a single function?
Was that fn too complex?
Sometimes it’s better to recreate the code of the function (when it’s simple) than including a huge library.
How many times have you downloaded an entire library to take advantage of a single function?
Was that fn too complex?
Sometimes it’s better to recreate the code of the function (when it’s simple) than including a huge library.
4. Minimize your code.
Not only you’ll be making your JS files smaller, but you’ll get the extra advantage of obfuscating them!
Automate the minification process so you don’t have to think about it.
Check “Terser” 🔨, a JS parser and mangler/compressor toolkit for ES6+.
Not only you’ll be making your JS files smaller, but you’ll get the extra advantage of obfuscating them!
Automate the minification process so you don’t have to think about it.
Check “Terser” 🔨, a JS parser and mangler/compressor toolkit for ES6+.
5. All your JavaScript files should be compressed before traveling.
You don’t have to do this manually, because your CDN will take care of it.
Because you are using a CDN, right? right?!?
Anyway, check your server or reverse proxy about dynamically compressing requests.
You don’t have to do this manually, because your CDN will take care of it.
Because you are using a CDN, right? right?!?
Anyway, check your server or reverse proxy about dynamically compressing requests.
6. Preload critical code.
<head>
<link rel=“preload” as=“script” href=“mycode.js”>
</head>
In this case, your browser will fetch mycode.js much faster than what would have done otherwise, and now your page will be interactive earlier, feeling much faster.
<head>
<link rel=“preload” as=“script” href=“mycode.js”>
</head>
In this case, your browser will fetch mycode.js much faster than what would have done otherwise, and now your page will be interactive earlier, feeling much faster.
7. Lazy load large, non-critical JavaScript files
If you don’t need them right away, don’t block rendering waiting for those huge files.
Instead, look into “dynamic imports” to download those files as late as you can:
import(‘hugelibrary.mything’)
.then(module => …)
If you don’t need them right away, don’t block rendering waiting for those huge files.
Instead, look into “dynamic imports” to download those files as late as you can:
import(‘hugelibrary.mything’)
.then(module => …)
8. Target different browsers with specific code.
Check Babel 🔨. You can serve modern code to modern browsers and avoid sending everything everywhere.
No more serving all of that legacy code to work on Internet Explorer to newer versions of Edge!
Check Babel 🔨. You can serve modern code to modern browsers and avoid sending everything everywhere.
No more serving all of that legacy code to work on Internet Explorer to newer versions of Edge!
9. Did I mention you should use Content Delivery Networks (CDN) to serve your code?
Ok, seriously. If you don’t know what I’m talking about, go and learn about CDNs.
This is probably the simplest, most effective thing you’ll do for the speed of your side this year.
Ok, seriously. If you don’t know what I’m talking about, go and learn about CDNs.
This is probably the simplest, most effective thing you’ll do for the speed of your side this year.
Optimizing your JavaScript will make a huge difference, but it doesn’t end there.
👇
Here you have another thread 🧵about optimizing your images:
Combine both, and you’ll see incredible results!
👇
Here you have another thread 🧵about optimizing your images:
Combine both, and you’ll see incredible results!
If you want more magic tricks to make your websites feel crazy fast, how about pre-browsing?
