How to score 100 on Google Page Speed without critical css

I was wring about website load performance testing tools at hackya.com/kr & I felt that I needed to mention about Google Page Speed Insight.

Even though Google Page Speed Insight does not measure the actual site loading speed, it provides fundamental guidelines that are helpful most of the time.

Just out of curiosity, I wanted to see how this site, https://hackya.com/us, would fare on Google Page Speed.

I scored 94. I knew that my async css loading script had stopped working since migrating to a new server and I had taken out critical css because I’ve found maintaining critical css a hassle. I also knew that my html minify script had to be disabled as it was causing the site to crash.

Considering all these issues, I felt that a score of 94 wasn’t bad at all. Quite respectable actually.

I was so ready to move on but I just felt like getting that 100 score, just for the heck of it. LOL. I mean it’s been a while since I had scored 100 on Google Page Speed (I believe last time I had socred 100 was back in 2012 or 2013) & I just felt like doing it. Dunno why.

The toughest part was not using critical css Google recommends. I’ve fixed the async loading script but the score would not budge at 99.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Damn, I did async load css. What the hell Google?

I was ready to give up at 99 but then I remembered reading about media=”none” hack few years ago.

Basically, you set the css media as none. Like this.

<link rel="stylesheet" href="desktop.css" media="none"/>

This triggers all modern browser to make attempts to download media attribute that can’t be downloaded. LOL Of course this would cause the css to not load also, exposing the site to a permanent FOUT (flash of unstyled text).

So then you would bootstrap the css at the bottom of the page by including a valid link.

<link rel="stylesheet" href="desktop.css"/>

Yeah, I know. This is very hacky. So what I did instead was bootstrap the css with js.

if (Array.prototype.forEach)
    Array.prototype.forEach.call(document.querySelectorAll('link[media="none"]'), function(link) {
        link.setAttribute('media', 'all')
    })

Same principle here. Just feels less hacky. But Alas, Google would have none of it. Still telling me my css is render-blocking.

I was so ready to move on at 99. However, I wondered what would happen if I combine async loading with media=none hack.

And guess what?

Here is my Google Page Speed score.

Hooyah!!!

100. No critical css.

My score link: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fhackya.com%2Fus&tab=desktop