DEV Community

Making a fast website is SUPER EASY 😏

Kasper Andreassen on September 19, 2022

That's right, I said it. Making a fast website is super easy, barely an inconvenience. I've built a website that gets a perfect score in Google Li...

Read full post

Corentin Bettiol • Sep 19 '22

That's a great article, with very interesting content and examples!

Here's the score for my own personal website:

I spent a long time optimizing all I could, because the website is hosted on a small old computer (yeah my server is an old dell optiplex fx160 :P) next to my box (I have 200kB up, that means I have literally no connection anymore when a simple txt post is going viral on hacker news).

Here's what I optimized (I will forget some things) :

fonts: I'm using a custom font only for the title & nav links, so I used fontsquirrel's tool to remove all unused chars (thus my font weights ~3.5ko).
images: I optimized all the static files of the website (the logo is 368 Bytes!). I use webp for cover photos, so a page with a lot of banners is still less than ~150kB.
cache: I tried to cache a lots of things for a long time. I don't use a CDN, I serve all my content from my small server (may get worse performances but at least it's consistent across all resources :P).
no js: we don't need no ~~educ~~ javascript on most websites. This personal website makes no exception.

I recommend 1mb.club for a great list of small & lightweight websites (and 512kb.club for even lighter websites). Some are just like the "hello world" example, but some other websites includes a lots of things for only a few kilobytes :P

Kasper Andreassen • Sep 19 '22

Great job, @corentinbettiol!

With limited resources like that, every byte counts. That's a great exercise, and is also important when thinking about the next billion users.

The only thing you need to optimize, to get a perfect score all round in Lighthouse, is the accessibility of your sticky header on mobile. Increase the contrast ratio on the page title and it's 100 all way 🙌

Corentin Bettiol • Sep 19 '22

Thanks for your kind comment :)

The issue with the contrast ratio of the header is here today, but sometimes the website pass all tests and have a score of 100. I may update the color of the header, but I think the score depends on how the screenshot of my website is compressed and what the header looks like :P

Jigar Shah • Sep 20 '22 • Edited

Indeed a research-oriented article! You explained everything in details. Amazing to read and know insights.

Last few months, I have been working on one project - enterprise website. And I came across one fastest JavaScript framework. It's TezJS.

Well, I have used TezJS- a Jamstack frontend framework for my website - Radixweb. and here's a score that gives us when it comes to website performance.

(Page Speed Report)

As you can see, my website score is 99 even on Mobile. And it has almost 1300 webpages -a very complex websites with multi-functionalitites. Isn't it amazing?

As per the TezJS, it ensures to offer 98+ core web vitals for turbo speed and blazing-fast website performance.

I recommend TezJS for performance-first complex websites. Do give your best shot - GitHub

Kasper Andreassen • Sep 20 '22

Thank for the kind words, @jigar_online 🙌

Congrats on the amazing results - mobile can really be b-word to hit those upper 90's in Performance 😬

Dennis Persson • Sep 19 '22

Fun thing is that if you optimize a hero image properly, you can actually decrease LCP by adding a hero image. I have explained how in this article.

Kasper Andreassen • Sep 20 '22

Ha, that's pretty cool! Thanks for the resource, @perssondennis!

Fadhil ⚡ • Sep 20 '22

Thanks for sharing, it really helped me to optimize my website

Kasper Andreassen • Sep 20 '22

Glad to hear, @fadhilsaheer! Just tested your site and I actually get a 99 score in Performance 🤯 - great job!

Seems all your missing in Accessibility on your text to hit that 100 🙌

Fadhil ⚡ • Sep 20 '22

thanks for the info, I'll look into it

Corentin Bettiol • Sep 22 '22

Dude why is your favicon 90kB ?!

Fadhil ⚡ • Sep 22 '22

Coz I'm lazy to compress, thanks for pointing it out, I'll compress it ASAP, thanks

Zihan Chen • Sep 23 '22

Mine
The second one is on here(it is also provided by google, web.dev)

Vincent A. Cicirello • Sep 19 '22

Another good tool for optimizing SVGs is svgomg. It works really well.

Kasper Andreassen • Sep 19 '22

Thanks for the resource @cicirello! I've added it to the article 💪

Vincent A. Cicirello • Sep 19 '22

You're welcome. Your post was a good read.

Konstantin BIFERT • Sep 19 '22

Great article! 💪🏻

Optimizing perfectly for images is a HUUUUGE work, especially when your factor in the size, the type, the color subsampling, the encoder etc etc...
Cloudinary is not free but still a simple solution regarding this topic. 👌🏻

Kasper Andreassen • Sep 20 '22

Thank you so much 🙌

Indeed, but it also often results in huge payoffs. I'm also a big fan of Cloudinary – I love that you can control things like size, quality, etc., with a simple URL parameter.

Strift • Oct 13 '22 • Edited

Very cool! Thanks for the article. Gotta love those 💯 score on Lighthouse! :p

As far as images go, I like using something like TwicPics to generate variants on demand at runtime, instead of having to manage this manually (or at build time.)

It works great for me in combination with Nuxt SSG.

PS. +10 points to Enterspeed for the memes

RadekHavelka • Sep 19 '22

Well if you care about gdpr, stay away from google. Any tools, tag manager, analytics, i mean all of them. Also, consider what you want to achieve, what resources you have and if having 100 score is actually that important, because it is only one metric of one tool / company. And that company does whatever they want to us, as the is hardly any competition. And that is evil. Dont subdue to evil. Do your sites nice, with resources and ofc users in mind, but dont be scared if you only have 99 ... world will not collapse ... and if you use EvilCorp, be sure that THEIR scripts are those who break almost all the rules, recommendations and best practices. They are hardly in position to dictate us how we shall do our sites :)

Kasper Andreassen • Sep 22 '22

Fun update, @palalet. Google Analytics just became illegal to use "out of the box" in Denmark: computing.co.uk/news/4056735/denma...

Kasper Andreassen • Sep 20 '22

Haha, getting some Mr. Robot vibes here 😄

But yes, luckily there are now many great alternatives to Google's products nowadays.

Google has always been "do as we say, not as we do" when it comes to performance 😉

RadekHavelka • Sep 20 '22 • Edited

Hehe, no, I am not that paranoid, but the truth is there are many lawsuits against google tools across Europe nowadays, and there is no "we do not store any cookies" google product :) People need to be aware of that, maybe even Analytics will be soon "illegal" from GDPR point of view. Not speaking about Chrome browser itself ...

and nicely said about the performance, exactly my point :) I got hit by "CLStoo big" issue recently, guess what caused it ... Adsense :) Seeing "do not use document.write" in Lighthouse makes me smile, as the only scripts not following this rule are ... Adsense :) Optimise your javascript, compress it, compress images ... basically ANY google javascript is not 100% compliant with this. Used google translator on our pages. Oh boy, what a nightmare :)

but the biggest issue I have is with constant changing of the rules. Its easy if you have your private blog with few text there, not so easy if you run website with 24yrs of history, thousands of articles, images, users that are used to use it in some way. And now someone somewhere starts to tell us how we shall (re)do it, just because ... Use amp. Dont use amp. Do this. Dont do this. Every month, every year new rule. I understand those can be applied to some ecommerce sites, but internet isnt only about ads and ecommerce. Google stole the internet from us, and that piss me off really badly TBH.