If you follow the guidelines in my Joomla performance tutorials, you may have achived high scores in performance tools like Pingdom and GT-Metrix, maybe even over 90%. Achieving the full 100% is a bit harder though...
Especially those last few percents can make it incredibly tough to achieve a 100% score. And even when you reach 100% in Pingdom or GT-Metrix, the Google Pagespeed Insights tool may only give you 85% or so, Frustrating, right? Well, it can be done... Some think that in order to get there, you need a very bare site, but this does not have to be so. Actually, this very site has got a 100% score in Pingdom, Y-slow and even Google Pagespeed Insights. And this is with images, icons, Google Analytics, etcetera. And you don't need a very minimal template for that. I achieved it with a standard Rockettheme template that I chose because of the nice design, and also because the upgrade to Gantry 5 created quite a performance boost compared to Gantry 4. So, this is what I get:
Webfonts from Google or other sources
All resources that you do not fully contol may give you issues. Webfonts are often the most obvious ones here. Google made it very easy and cheap to use their webfonts, but they have a short lifespan, as Google wants you to use the most recent version of their font-files all the time. The only real option to get around this is to use local fonts, hosted from your own site or CDN. You have to use @fontface embedding then, or you can even base-encode them, and use them straight from your CSS files. For me, the default font that came with the Rockettheme template is a local font (Muli), so I did not have to fix this.
Analytics gives you the same issue as webfonts, but it is a bit harder to solve. What I did is to use a solution that is not advised by Google, but since I only use Analytics for basic statistics, I am not too worried that something goes wrong. I simply grabbed a copy of the analytics.js files and put it on my own server. I then changed the code a bit to run it:
ga('create', 'UA-16857461-24', 'auto');
Another solution that I have also used and that seems to work is this one: http://thejunkland.com/blog/fixing-last-point-on-google-pagespeed-insights.html.
Prioritize visible content
Even if you hace a perfect score in Pingdom or Y-slow, this issue in Google Pagespeed Insights is responsible for grades under 90%:
Actually, what Google wants us to do here is to extract a critical portion of the CSS from our external stylesheets: the lines that are resonsible for the display of the above-the-fold portion of the site. Then we should place this CSS inline, in the HTML itself. This is in contrast with best-practices of separation of content and CSS, but currently this is what Google advises for best performance. The remainder of the CSS should be placed in an external stylesheet, loaded not the Head-section, but after all content, just before the closing Body-tag...
This seems a pretty complicated thing to fix, but luckily, we have a nice little plugin that comes to the rescue here: JCH-Optimize. In the options of the Pro-version of the plugin, you will find the option Optimize CSS Delivery, which aims to address exactly this issue. You can play a bit with the number of HTML-elements. In my case 200 was fine, but in your own site it may need to be a bit higher:
After enabling this, my Pagespeed score was also 100% (check it here), like in Pingdom and Y-slow. Only GT-Metrix gives me 97%, but that is because it emulates a small screen, which compresses some of my images in their container more then they would do on a full desktop, but I won't worry about that one too much ;)
And by the way, there is no real need to achieve a 100% score, remember this! Anything over 80% is already great, getting those 100% scores is actually something that only freaks aim to achieve ;)