Hi there!
The reason why you're here is probably because you wanna know what I did to load my portfolio website in just 0.8 seconds and achieved a performance score of 97 on lighthouse.
Link to my portfolio and its source code is at the bottom.
I will lay out all my tips and tricks over here, which I implemented to achieve this! Let's get this thing started! 🤘
NOTE: According to Lighthouse, "Values are estimated and may vary. The performance score is based only on these metrics." This report was generated on 2nd of August, 06:29:22 PM IST. These scores might reflect a bit different on your machine due to internet connection speed or multiple extensions running in the background or I might add some features later. Also, I have "clearly" mentioned above that these scores were generated by Google Lighthouse. Don't expect the same score on any other tool. So, please don't try to troll on this basis and save your energy. Peace! ✌
Tip #1
Don't use a large DOM tree.
My portfolio contains 487 DOM elements with a maximum DOM depth of 13 and a maximum of 20 child elements only!
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 recompute the position and styling of nodes. having complicated style rules can slow down the rendering.
Tip #2
Don't use enormous network payloads.
My portfolio has a total network payloads size of just 764 KB.
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 #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 #4
Preload key requests
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 #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 #6
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.
Tip #7
Encode your images efficiently.
A compression level of 85 is considered good enough for JPEG images. You can optimize your images in many ways:
- Avoiding GIFs.
- Using image CDNs.
- Compressing images.
- Lazy loading images.
- Using WebP image format.
- Serving responsive images.
Tip #8
Minify your JavaScript files.
Minification is the process of removing whitespace and any code that is not necessary to create a smaller but perfectly valid code file.
By minifying your JavaScript files, you can reduce the payload size and parsing time for the script.
I use JavaScript Minifier for the same.
Tip #9
Minify your CSS files.
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.
Tip #10
Resize your images.
I can bet this is the most given advice when it comes to webperf because the size of images is far far far greater than any text script file, so an over-sized image might be an overkill.
You should never upload images that are larger than what's rendered on the screen, that will do no good.
You can either just simply resize your image dimensions or use:
- Responsive images.
- Image CDNs.
- SVG instead of icons.
Thank you for reading so far! 😄
Hope you learned something new from this! 😃
Here's the link to my portfolio website 👉 cmcodes
Here's the link to my portfolio source code 👇
cmcodes1
/
cmcodes1.github.io
😊 Here's my portfolio where you can see all my projects, blogs, and achievements.
Check it out and do let me know your views! Eager to hear your opinion. 😁
Feel free to share your portfolio link in the comments below. I would be very happy to have a look at them. 😊
Happy Coding! 👨💻
Latest comments (107)
Impressive work! Can also add 'Use the right image formats' to the Tip #7
If possible, it's good to use WebP (although, it's supported by a limited number of browsers). Google claims that WebP lossless images are 26% smaller in size compared to PNGs, and WebP lossy images are 25-34% smaller than JPEG images.
Thank You! 😊 I am aware of that and as you mentioned it is supported by a limited number of browsers, so I didn't mentioned it earlier but I should do it now (for future case).
Is there any way to delete useless js?
This is important for my website
jsonformatting.com/
thanks for the advices
How can one person remember so many languages!? Lol, nice site. Very quick to boot up on my iPhone XR. 👍
Thanks! 😊 That's the result of 7 years into programming! 😂
Statistics from Google indicate that 50% of website visitors expect a mobile website to load within 2 seconds. 53% of users will probably leave the blog page if it takes longer than 3 seconds to load. So for Google, page speed is one of the factors, that define the user experience. And for Google, the user is a boss. Here for optimization of your page, you can also get the tools from the following link url-decode.com/cat/ as well. Where you will find tools related to minification, image optimization, and many more.
Yeah! Speed does matter when it comes to websites! Thanks for sharing this link. It's a treasure of tools. 😄
Cool! I'd like to translate this post to Chinese. Can you give me the permission? The translated text will be published at nextfe.com
Sure! You can repost this to Chinese at nextfe.com, if you mention the link to this post.
Chinese translation is finished: nextfe.com/site-loads-in-less-than...
There is a backlink to this post at the beginning of the translated text.
Great!
(y)
1
Your site:
I think you didn't read the note at the beginning. I have mentioned the score from Google Lighthouse not from web.dev tool.
I think, that's same
No! They're not!
My blog 🙃
I use Vue.
Good for you! :)
I have another suggestion to add: Instead of making two REST requests with might have a race condition, like a POST followed by a GET, and avoiding it using
setTimeout, you can use GraphQL mutations for atomic manipulation of server-side data.graphql.org/learn/queries/#mutations
Tip #0: Use webpagetest.org to get real measurements: webpagetest.org/result/200709_JA_4...
"Loads in 2 seconds" isn't quite accurate since it looks like your best run was doc complete at about 4 seconds, while your repeat views are <1 sec (which is great).
Your lighthouse perf score was 73. Still a lot of work to do, but you're well on your way.
Make sure to take a look at the caching recommendations, those are going to be the lowest hanging fruit, although you might not have the ability to change this if using Github Hosting. I'd recommend something like Firebase Hosting which is free for your usage and allows for complete control over the static asset caching.
Yeah! I should move to a dedicated hosting! Thanks for sharing this! 😊
your website is so bright xD my retinas burned... i suggest adding a dark mode switch or make it auto-switchable based on system theme mode. xD other than that, great job!
Already working on it! 😎🤘
Wow, concise yet comprehensive. Thank you!
Welcome! 😊
Backend performance ?
codeproject.com/Articles/133738/Qu...
codeproject.com/Articles/23306/10-...
Omar Al Zabir hace unos años: es.slideshare.net/oazabir/scaling-...
De Encosia: encosia.com/a-harsh-reminder-about...
Deanohume:
deanhume.com/Home/BlogPost/faster-...
deanhume.com/Home/PageSpeed
O referencias más avanzadas
robbagby.com/rest/rest-in-wcf-part...
Thanks for sharing this! 😊
Great post! You mention image CDNs but you don't use them. Here's a way to use an image CDN easily with your github pages site: akshayranganath.github.io/How-to-m... , your images will be typically 40% lighter and served faster if you use it.
Cheers,