How to Get 100/100 Google Page Speed Score with Middleman and Nginx

This is incorrect. Static assets are often the source of many problems, due to poor caching headers for static assets, missing gzip encoding, unoptimized images, etc. The time it takes for the backend to return a response will usually result in more overall savings in load times, but it's astounding just how inefficient frontend choices can be. It's not "micro-optimizing" to focus on improving the frontend instead of only focusing on the backend.

The library is at https://github.com/skorokithakis/django-cloudflare-push if anyone wants to use it. It's slightly misnamed, as it supports any server that uses the Link header for push, not just CloudFlare.

Why on earth when they introduced it they didn't add a way to tell the browser the order of execution ? Or may be it exists and I haven't heard about it ?

If you’re using S3+CloudFront, it’s not dirt cheap.

Traffic at AWS is so expensive, at any scale it’s cheaper to roll your own. Significantly.

(For traffic in the EU, that is, in other regions traffic tends to be a lot more expensive)

I personally find that most of the workarounds for this are usually more technically offensive than living with a marginally lower score on this often somewhat arbitrary test.

    location /analytics.js {
        proxy_pass https://www.google-analytics.com;
        expires 1d;
    }

Context is key. Nobody should be shooting for a perfect 100 in any situation where a barebones static HTML document won't suffice. So if you have to make DB calls to create the HTML document, or are reasonably delivering a nice user experience (e.g., a custom font), then you should not be scoring 100.

With that being said, you are still doing great for what you are delivering if it's non-static content with fonts and can get to at least 80 / 100.

Trying to explain the page speed tool is just a 'rough guide' and that a website always has to be some kind of compromise between speed, functionality and design falls on deaf ears because 'google' is, well, 'google'.

Gzip compression benefits taper off in benefit after the "7" setting, IIRC. Brotli at higher settings compresses better, but you'd want to do it static as opposed to on the fly (at higher/highest settings)

OP thanks for the great article.

The article says "Then, inline your CSS and JS instead of making external resource calls to them." and this is actually what makes your page heavier.

> Finally, I was having a lot of trouble getting the Google Analytics script on my site to not be render-blocking

It is easy. Don't understand what was the trouble.

it often advices to compress images and even suggests to download "optimally" compressed versions

Compressing images is useful, and this advice can be beneficial – though I'm sure it's more effective to optimise them yourself rather than relying on the Google-generated versions.

"embed CSS code necessary to display the top of the page, right into the page".

This is good advice. For larger sites with more extensive stylesheets, this approach allows the initial 'above-the-fold' to be rendered better before the full stylesheet is loaded. Just because it doesn't hit every case – like when users scroll during load – does not render it ineffective. It's also neither difficult to implement, nor does it add enough load time to pages to be a practical issue (unless you're inlining 100kB of text, in which case – rethink your stylesheet!)

For example, it never advices to remove or replace web fonts

It would be a bit silly to do so; web fonts are added on purpose, and advising that they be removed is pretty useless advice, along the lines of "you can speed up your website by removing images". It would be nice if the tool supported analysis of web font use though, such as testing to see if particular styles are used, or if the font could be effectively subsetted.

Also it never advices to remove ads althogh ads often cause high CPU and memory consumption. Why is that I wonder.

Again, it would be useless information to tell someone who has deliberately added advertising to their website to remove it.

The tool always requires to move JS scripts to the bottom of the page. But is it always the best idea? I think in most cases it is not.

Yes, it is – either that, or loading the scripts deferrably or asynchronously.

it will give a JS error if the button is clicked before the scripts in the bottom of the page have loaded

This is only the case if you write bad Javascript – binding to DOM elements and their events should be done asynchronously.

And what if you have a SPA? In this case the earlier you start to load the scripts the sooner the user will be able to see the data.

If you have an SPA, then either there is no real markup on the page (and the difference will be minimal) or you are pre-rendering it, and the content will be visible anyway.

Also it always recommends to use a CDN which is not always good idea.

Using a CDN is almost always a good idea unless you have a very specific reason not to do so.

So Google's script might help you in identifying problems with your site but you should not ever blindly trust any of the recommendations. Please leave client side optimization to people who have expertise in this area.

I would say this much is obvious – it's a tool, and like any others, experienced professionals can use it to make appropriate decisions. It can help with that.

SEO rankings and obviously they are more important than image quality.

The unfortunate thing is that they probably are!