loading...
Cover image for What is the lighthouse score of your porfolio/personal website (and why)?

What is the lighthouse score of your porfolio/personal website (and why)?

corentinbettiol profile image Corentin Bettiol ・1 min read

I want to discover new portfolios, and in order to do it I want you to post and discuss your lighthouse score.

For thoses who don't know what I'm talking about, here's the doc for lighthouse.

Discussion

pic
Editor guide
Collapse
joelbonetr profile image
JoelBonetR

When I re-made it some months ago it was 100, 100, 100, 100.

Now it's 98, 97, 100, 100 because they update the algorithms from time to time and I'm not earning a penny from it so I'll update it when I've time and feel like 😆

Here's the report

Collapse
_garybell profile image
Gary Bell

Desktop: 83, 95, 92, 100
Mobile: 45, 95, 92, 98

It's hosted by Ghost using a default template, so could be better if I spent some time configuring it myself.

Main issues:

  • improperly sized images (due to using unsplash for the most part)
  • inefficient cache policy
  • Old jQuery library

To fix the issues I would need to download all of the images I use from Unsplash and resize them. Given that my personal site has 95% of traffic coming from desktop, it's not a pressing matter for me.

Collapse
corentinbettiol profile image
Corentin Bettiol Author

I'll start:

Here's my portfolio/personal website (in french): l3m.in.

And here's it's lighthouse score:
lighthouse

This website is built using only vanilla php/html/css (and a scoop or two of js in the admin panel), with a focus on speed and SEO. I recently added cover images for my posts, but the images where too big and lowered my score. So today I reduced the width of the cover images, and the "100" performance score is back :)

Collapse
joelbonetr profile image
JoelBonetR

It's a hard task to maintain the 100 score for long time and specially on big web apps or even little ones that need some scripts for analytics but trying it with a portfolio is a good exercise to practice it a bit and see the limits and the weights for each point on those kind of metrics.

In addition to my comment before I'll let you here my documentation about the entire workaround I followed :)

Collapse
corentinbettiol profile image
Corentin Bettiol Author

I read your post (great & valuable content!), and here's what I did for my site:
Steps 1 Wireframing (pen and paper), 3 Choosing a webhosting, 4 Setting up your hosting, 5 Preparing the version control service (Git), 9 Gitignore, 14 Deploy to production, and 15 Optimization.
The thing is I don't used any framework or bundler, since I don't really use javascript on my site other than for my tiny wysiwyg editor in the admin panel:

wysiwyg panel

Thread Thread
joelbonetr profile image
JoelBonetR

Bundlers also take care of html and css optimization (they minify too), also I use Sass on dev time for obvious reasons and the bundler transpilates it into css.

Collapse
idarek profile image
Dariusz Więckiewicz

When I moved into Hugo I would like to achieve as much as possible but then reading various posts, implemented a lot of things to achieve what realistically possible without sacrificing the way how I want my website to look.

My site oscilating:
84-94, 96-100, 92-100, 100
In both Mobile/Desktop

All depend on part of the website. On some posts, I don't serve Ads and they are higher in results and others are lower. Interesting that Google own components affecting seriously the results :)