Optimizing my blog

Recently, I optimized my blog for page speed and file size. I did this, because I came across the Mobile Website Speed Testing Tool and my blog did not have 100 points in every category.

It wasn’t that bad though. My blog was above the 90 points margin. I still wanted to have 100 points in all categories, so I started optimizing my blog, which took longer than expected.

Reading the detailed report

After google analyzed my blog, the report told me which party of my blog were not optimized. The report is splitted in three categories:

  1. mobile friendliness (got 99/100)
  2. mobile speed (got 91/100)
  3. desktop speed (got 97/100)

Mobile friendliness - size tap targets appropriately

My “tap targets” were not big enough. Apparently size still matters.

Thanks to the report, which included links to all problems found, this was an easy fix:

  • the distance between clickable elements should not be smaller than 32px (…done)
  • clickable targets should be at least 48px big (…done)

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

The categories “mobile speed” and “desktop speed” apparently measure the same thing but have different impacts on the score, because, e.g. big pictures are worse on a mobile client than on a desktop client.

The only point which I got wrong was the render-blocking JavaScript and CSS in above-the-fold. I don’t use JavaScript on my blog, so the only not optimized thing was my CSS.

And this is the part where it gets a little bit ugly. I first started to pull out the stuff which is clearly “above-the-fold” (e.g. CSS for the header). This still didn’t produce the wanted results. My score was still not 100/100. After fiddleing around for some time, I realized, that almost all of my CSS was “above-the-fold” (including blog posts).

So I just put all of my CSS in the header, which is not that bad, because my CSS is not that big. I also optimized my CSS, using CSSO.

Not done yet

After having all scores maxed out (100/100) I tried webpagetest.org. Turns out, that I haven actually enabled gzip compression for my favicon.ico. Since the favicon is the only image on my start page, which is not inlined, I got an F for compression T_T.

The fix was easy. I just had to put

gzip_types *;

in the nginx config file.