How we reached 100 points on Google Page Speed Insights.
Max Hutschenreiter -
A while ago I read a tweet of someone telling me that they made 100/100 points on Google Page Speed Insights. We just relaunched our Website with Laravel and Tailwind. We had around 80 points on desktop and I thought that is already quite ok. But I got interested and wanted to play around a little.
Here is our path to reach 100/100 Points on Google Page Speed Insights.
1. Image lazy loading
This is probably an easy but extremely powerful tip. If you add the loading lazy attribute to your images, the browser will only load them if they come close to the visible area in the browser.
loading="lazy"
This alone will bring you a lot of points.
2. Purge CSS
Google was telling me for a long time that my CSS files are too big. I thought I could not do anything but minimizing them. But I just learned that something like purge CSS is existing. Here is a Spatie Package to help you using purge in your Laravel mix compiling. If you are using Tailwind like we did this Tutorial from Liam Hall might be helpful.
3. Correct Image sizes
This one is a little annoying but still pretty easy. Google is always complaining that you should deliver the Images in the size you are displaying them. To do so I checked what kind of Images are we using. Most of the time we had like a thumbnail image and a little bigger one. Thankfully we use the awesome Spatie Media library. So I just measured the different sizes we used and let the Media Library compile the images in this size. This is the Code in the Model to add the different sizes.
public function registerMediaCollections(): void
{
$this
->addMediaCollection('hero')
->registerMediaConversions(function (Media $media) {
$this->addMediaConversion('thumb')
->width(413)
->height(192);
$this->addMediaConversion('blog-post-header')
->width(740)
->height(415);
});
}
This is the Code in the View to get the right-sized Image.
This one is probably the most complicated one. I struggled with this for a long time. Remove unused Java Script. Since I was never sure how to tackle this I searched a little online. The research brought me to the Webpack Visualizer a tool to visually show you how much space the single libraries are taking. You just need to upload your stats.json. Your What? This part is kind of confusing. To analyze your packages you need to generate the stats.json. And again there is a Spatie Package to help you. I ended up with this configuration in my webpack.mix.js file.
if (!mix.inProduction()) {
mix.bundleAnalyzer({
analyzerMode: 'disabled',
generateStatsFile: true,
});
}
Unfortunately, I did not save the original image of the visualizer. The original image showed very clearly that most spaces were used from highlight.js which was a surprise. Actually the way I included it loaded the support for all its languages. Since we are only using 4 languages we followed a Tutorial from Brian Jacobel to remove the unused ones. In the end, our higlight.js implementation looks like this.
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
import php from 'highlight.js/lib/languages/php';
import bash from 'highlight.js/lib/languages/bash';
['javascript', 'php', 'bash'].forEach((langName) => {
const langModule = require(`highlight.js/lib/languages/${langName})`);
hljs.registerLanguage(langName, langModule);
})
window.onload = function () {
var allPre, i, j;
allPre = document.getElementsByTagName("pre");
for (i = 0, j = allPre.length; i < j; i++) {
hljs.highlightBlock(allPre[i]);
}
};
This way we only load javascript, PHP, and bash support.
Some thoughts
I posted our success on Twitter and most people asked me if we deactivated our tracking for this, since that is usually one of the biggest problems in page speed optimization. We use a self-hosted version of Matomo. Our Matomo integration follows the do not track settings in your browser. We removed all other external scripts. So there is not Javascript loading Facebook or Twitter or anything. I guess that was a pretty nice starting point for us :)
Discussions
We decided to not integrate a Discussion below the post itself. If you like to discuss this article with us we will like our Twitter post on all future Posts. The reason is simply that we always oversaw the notifications of new messages in our old blog, and it feels much more natural on Twitter.
