EU Cookie Consent

To use this Website we are using Cookies and collecting some Data. To be compliant with the EU GDPR we give you to choose if you allow us to use certain Cookies and to collect some Data.

Essential Data

The Essential Data is needed to run the Site you are visiting technically. You can not deactivate them.

PageSpeed

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. 
<img class="h-48 w-full object-cover" loading="lazy" src="{!! $post->getFirstMedia('hero')->getUrl('thumb') !!}" alt="" />

4. Remove unused Java Script
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,
    });
}
With the default configuration, it would not run for me.
Our current visualisation
 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.

Discuss with us
Tags: Page Speed Insights · Google · Webpack · Performance

Want products news and updates?

Sign up for our newsletter to stay up to date.

We care about the protection of your data. Read our Privacy Policy.

Impressions from our Team

  • #Office #Garden - #

  • #workhard - #

  • #belgrade #skyline - #

  • #happybirthday Phil :) - #

  • #happybirthday Stefan 🥂 - #

  • #happybirthday Lidija 🍾 - #

  • Say hi 👋 to our newest team member ☕️ - #

  • #bithday #cake 😻 - #

  • #stayathome #homeoffice #42coders - #

  • #stayathome #homeoffice #42coders #starwars :) - #

  • #stayathome #homeoffice #42coders - #

  • We had a really nice time with #laracononline #laravel - #

  • Happy Birthday 🎂 Miloš - #

  • Happy Birthday 🎂Nikola - #

  • #42coders #christmas #dinner what a nice evening :) - #

  • Happy Birthday 🎂 Ognjen - #

  • Wish you all a merry Christmas 🎄🎁 - #

  • #happybirthday Luka! - #

  • https://communian.com Triff dich mit Menschen aus deiner Umgebung die deine Interessen teilen :) Wir sind gerade live gegangen und freuen uns über jede neue Community die zu uns kommt ❤️ - #

  • Nice #meetup at #myposter thanks! - #

© 2020 42coders All rights reserved.