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...
For further actions, you may consider blocking this person and/or reporting abuse
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) :
educjavascript 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
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 🙌
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
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
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 😬
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.
Ha, that's pretty cool! Thanks for the resource, @perssondennis!
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
Mine
The second one is on here(it is also provided by google, web.dev)
Thanks for sharing, it really helped me to optimize my website
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 🙌
thanks for the info, I'll look into it
Dude why is your favicon 90kB ?!
Coz I'm lazy to compress, thanks for pointing it out, I'll compress it ASAP, thanks
Another good tool for optimizing SVGs is svgomg. It works really well.
Thanks for the resource @cicirello! I've added it to the article 💪
You're welcome. Your post was a good read.
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. 👌🏻
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.
I just came here for the memes!
Then you, sir, know what's truly important in life. Therefore I made a freshly squished meme just for you 🙌
hahaha XD
the meme is painful though :'(
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 :)
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 😉
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.
Fun update, @palalet. Google Analytics just became illegal to use "out of the box" in Denmark: computing.co.uk/news/4056735/denma...
(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):
GREAT Article ! extremely interesting thank you
Thank you so much, @axibord - and you're welcome 🙌
Wow wow wow.... wow
@joshhadik I'm going to need you to get aaaall the way off of my back.
Wow! What an interesting and detailed article.
Thank you very much.
Thanks, @kosoko_daniel - glad you liked it!
This is a really informative article. Thanks for sharing.
Thank you very much, @eke! You're welcome 🙌
Great entry currently, website speed is very important.
Thank you! Yes, no arguments there 💪
But y you put code in pics tho.
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 😕
Wow Rally Nice Information I Like It - sarkariprep
Thank you 🙌
any thoughts on using partytown to manage 3rd party scripts?