How my website loads in less than 2 seconds 😎
Hi there, The reason Why you are here is because you really want to know that what I did that makes my website to load just in 1.8 seconds and achieved performance score of 94 at lighthouse.
So try not to spend more time, Let's get started!
Tip No. 1: Don't use a large DOM tree.
If your DOM tree is very large, then it will slow down the performance of your webpage:
- Memory performance
Using general query selectors such as document.querySelectorAll('li'), stores references to a multiple nodes which can consume the memory capabilities of the device.
- Network efficiency and load performance
A big DOM tree has many nodes (not visible in first load), which slows down load time and increases data costs for your users.
- Runtime performance
Whenever a user/ script interacts with your webpage, the browser needs to recomputed the position and styling of nodes. having complicated style rules can slow down the rendering.
Tip No. 2: Don't use enormous network payloads
The total payload size of your website should be below 1600 KB. To keep it low, you can do the following:
Defer requests until they're needed.
Minify and compress network payloads.
Set the compression level of JPEG images to 85.
Always remember, large network payloads cost large amounts of money.
Tip No. 3: Don't Use GIFs
Rather use PNG/ WebP format for dispalying static images. But if you want to display animated content then instead of using large GIFs (inefficient & pixelated) consider using MPEG4/ WebM video format.
Now, you will say what if I want their features like:
- Automatic play.
- Continuous loop.
- No audio.
Well let me rescue you from this, the HTML5 <video> element allows recreating these behaviors.
<video autoplay loop muted playsinline> <source src="my-animation.webm" type="video/webm"> <source src="my-animation.mp4" type="video/mp4"> </video>
Tip No. 4: Preload key Concepts
Suppose your page is loading a JS file which fetched another JS and a CSS file, the page won't appear completely until both of those resources are downloaded, parsed, and executed.
If the browser would be able to start the requests earlier, then there would be much time saving. Luckily, you can do so by declaring preload links.
<link rel="preload" href="style.css" as="style">
Tip No. 5: Don't try multiple page redirects
Redirecting slows down the load speed of your webpage. When a browser requests a resource that has been redirected, the server returns an HTTP response. The browser must then make another HTTP request at the new location to retrieve that resource. This additional trip across the network can delay the loading of the resource by hundreds of milliseconds.
If you want to divert your mobile users to the mobile version of your webpage, consider redesigning your website to make it responsive.
Tip No. 5: Preconnect to required origins
Using the keyword preconnect gives a signal to the bowser to establish early connections to important third-party origins.
<link rel="preconnect" href="https://www.google.com">
Doing so establishes a connection to the origin, and that informs the bowser that you want the process to start ASAP.
Minification is the process of removing whitespace and any code that is not necessary to create a smaller but perfectly valid code file.
Tip No. 7: Minify your CSS
CSS files occupy more whitespace than any other file. By minifying them, we can save some bytes for sure! Do you know that you can even change a color value to its shorthand equivalent, like #000000 can be reduced to #000, and will work just fine!
I use CSS Minifier for the same.