Pagespeed: how to achieve a 100% score in Joomla

logo pdb
Backups, updates & easy restores for Joomla & Wordpress (read the review). Use coupon JOOMLASEO for €25 in free credits to try it out.

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:

pagespeed 100 procent

So how can you achieve this too? Well, of course, first make sure to do the obvious: as I already said, follow my performance tutorials, especially those about optimizing images, css and javascript, leveraging browser caching and using a CDN. If needed, use a plugin like JCH-Optimize for helping you with this. I won't repeat all these steps, I will just go over the last issues that are left. In the end, this often still leaves you stuck with a few issues that I did not discuss yet. Let me discuss the ones that I ran into one by one.

logo 500

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.

Google Analytics

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:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://cdn.joomlaseo.com/simon/analytics.js','ga');
   ga('create', 'UA-16857461-24', 'auto');
   ga('send', 'pageview');
</script>

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%:

 

render blocking

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:

optimize css delivery

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 ;)

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.