Google Webfonts and performance

tl;dr… Using Google Webfonts will hurt your score pretty bad, however, PageSpeed forgives you if you do it “right”.

Recently I started making some changes to my WordPress theme again, giving it a slightly more minimalistic look. Unfortunately this meant that a lot of Google PageSpeed work had to be done all over. While I was at it, I wanted to use google webfonts on my site again… not good. So how does this affect you?

The bad news

All three of the tests I use (GTmetrix, Google PageSpeed and Pingdom) complained about the Google Webfonts. Browser caching, a missing cache validator and additional DNS lookups. These are all valid complaints, but as long as the resource is loaded after the initial content is already displayed, I don’t consider it to be an issue.

Making the best of it

The funny thing, in my humble opinion, is that none of the Google WebFonts usage methods will help you keep your current pagespeed score. I was however able to find a way that the PageSpeed test did not complain about. Still though, both Pingdom and GTmetrix won’t go easy on you. My Pingdom score dropped, because of this isolated change, to 93.

So, how did Google want me to solve this? The solution below allowed me to keep a 100% score on PageSpeed.