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:
- mobile friendliness (got 99/100)
- mobile speed (got 91/100)
- 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)
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.
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
in the nginx config file.