How my blog got almost perfect lighthouse results

Lighthouse is an open source tool that is integrated in the chrome browser per default. If you open up your developer tools (F12) you will see a tab “Lighthouse” which lets you generate a report for the current page you are on.

Performance

My Blog has a performance rating of 99 which is not easy to reach. Lets compare that to the “simpleprogrammer” blog which has a 77 percent performance rating in lighthouse.

The performance rating is calculated by a few factors like “First Contentful Paint”, “Largest Contentful Paint”, “Time to Interactive” and so on. Most of these indicators depend on the amount of files your site loads for example Images, JavaScript files, CSS files and so on. The less the better. Then it also depends on how big these files are. If you have megabytes of data that need to be loaded in order for your page to render, that will decrease the performance heavily.

As you can see, my blog only makes 11 requests and only transfers 80 kilobytes of data for a blog post to load. (Unless the blog post includes images obviously)

Compare that to the 71 requests and 887 kilobytes of data transferred in order to load the “simpleprogrammer blog”.

You can read more about the performance scoring on the official documentation if you are interested.

Best practices

There are many best practice checks in lighthouse which you can see once you generate a report. One of them is serving your page via HTTPS. My blog is built with Rails and uses the Puma web server which then gets served via NGINX. I use LetsEncrypt for free SSL certificates. As you can see, a SSL Labs test gives my blog an “A” rating.

This test checks if your site implements SSL correctly and makes sure that your webserver doesn’t use weak or outdated standards.

Long story short

Long story short, my blog is a custom built rails application that has almost no bloat in it unlike many wordpress blogs. I use plain JavaScript and very little of that. I use Tailwind CSS 2.0 with the purge function which reduces the CSS bundle to only 16.8 kilobytes.

One thing I might need to improve in the future depending on if someone reads my posts and if they life far away from the location of the server hosting my blog is implementing a CDN like Amazon’s Cloudfront.