DEV Community

Cover image for Making a fast website is SUPER EASY 😏

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...
Collapse
 
corentinbettiol profile image
Corentin Bettiol

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

Here's the score for my own personal website:

web.dev/measure score

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

Collapse
 
kaspera profile image
Kasper Andreassen

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 🙌

Collapse
 
corentinbettiol profile image
Corentin Bettiol

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

Collapse
 
jigar_online profile image
Jigar Shah • 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.

Image description
(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

Collapse
 
kaspera profile image
Kasper Andreassen

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 😬

Collapse
 
perssondennis profile image
Dennis Persson

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.

Collapse
 
kaspera profile image
Kasper Andreassen

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

Collapse
 
strift profile image
Strift • 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

Collapse
 
zihanc profile image
Zihan Chen

Image description

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

Collapse
 
fadhilsaheer profile image
Fadhil ⚡

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

Image description

Collapse
 
kaspera profile image
Kasper Andreassen

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 🙌

Collapse
 
fadhilsaheer profile image
Fadhil ⚡

thanks for the info, I'll look into it

Collapse
 
corentinbettiol profile image
Corentin Bettiol

Dude why is your favicon 90kB ?!

Collapse
 
fadhilsaheer profile image
Fadhil ⚡

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

Collapse
 
cicirello profile image
Vincent A. Cicirello

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

Collapse
 
kaspera profile image
Kasper Andreassen

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

Collapse
 
cicirello profile image
Vincent A. Cicirello

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

Collapse
 
kissu profile image
Konstantin BIFERT

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. 👌🏻

Collapse
 
kaspera profile image
Kasper Andreassen

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.

Collapse
 
2kabhishek profile image
Abhishek Keshri

I just came here for the memes!

Collapse
 
kaspera profile image
Kasper Andreassen

Then you, sir, know what's truly important in life. Therefore I made a freshly squished meme just for you 🙌

Image description

Collapse
 
2kabhishek profile image
Abhishek Keshri

hahaha XD
the meme is painful though :'(

Collapse
 
palalet profile image
RadekHavelka

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 :)

Collapse
 
kaspera profile image
Kasper Andreassen

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 😉

Collapse
 
palalet profile image
RadekHavelka • 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.

Collapse
 
kaspera profile image
Kasper Andreassen

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

Collapse
 
corentinbettiol profile image
Corentin Bettiol

(I agree, Google is bad)

So here's some others tools that can generate numbers from random bytes you throw on the internet (aka a website):

Collapse
 
axibord profile image
Aghiles Lounis

GREAT Article ! extremely interesting thank you

Collapse
 
kaspera profile image
Kasper Andreassen

Thank you so much, @axibord - and you're welcome 🙌

Collapse
 
joshhadik profile image
Josh Hadik

Wow wow wow.... wow

Collapse
 
kaspera profile image
Kasper Andreassen

@joshhadik I'm going to need you to get aaaall the way off of my back.

Collapse
 
kosoko_daniel profile image
Oluwagbenga • Edited

Wow! What an interesting and detailed article.

Thank you very much.

Collapse
 
kaspera profile image
Kasper Andreassen

Thanks, @kosoko_daniel - glad you liked it!

Collapse
 
victoreke profile image
Victor Eke

This is a really informative article. Thanks for sharing.

Collapse
 
kaspera profile image
Kasper Andreassen

Thank you very much, @eke! You're welcome 🙌

Collapse
 
gamerseo profile image
Gamerseo

Great entry currently, website speed is very important.

Collapse
 
kaspera profile image
Kasper Andreassen

Thank you! Yes, no arguments there 💪

Collapse
 
sirseanofloxley profile image
Sean Allin Newell

But y you put code in pics tho.

Collapse
 
kaspera profile image
Kasper Andreassen

That's because I'm literally the devil and I find pleasure in other people's suffering.

You got a point though @sirseanofloxley. Even though this article isn't filled with code examples, a better choice would have been code blocks.

Guess I have to switch from MS Paint as my main IDE 😕

Collapse
 
sarkariprep profile image
Sarkariprep

Wow Rally Nice Information I Like It - sarkariprep

Collapse
 
kaspera profile image
Kasper Andreassen

Thank you 🙌

Collapse
 
finfin profile image
Fin Chen

any thoughts on using partytown to manage 3rd party scripts?