How to get a 100/100 Score on Pingdom & Google Pagespeed Insights

This document contains outdated information.

I’ve revisited this topic recently, containing more relevant and up-to-date information aligning with the new specifications provided by Pingdom and Pagespeed Insights. If you’re looking for an up-to-date, quick and easy way to achieve a 100/100 on Pagespeed Insights and Pingdom. I suggest you follow that link.

Of course W3TC also offers minification-options, but according to the developers, this option is too agressive and will not play nice with every plugin and theme. Luckily, Autoptimize does one thing and it does it very well: minification. Also, it’s built to be used in combination with W3 Total Cache, so you will not face any compatibility issues.

  • The Wait is Over.

    Get the Newsletter you've always wanted, now!

    Sign up to receive Biweekly, Free Optimization Tips for WordPress.

    No spam. I promise.

  • Use Autoptimize to combine/minify external HTML, Javascript and CSS

    When setup correctly, Autoptimize takes care of the following suggestions in Pingdom and Pagespeed Insights:

    Pingdom:

    • Minimize DNS lookups
    • Combine external Javascript
    • Combine external CSS

    Pagespeed Insights:

    • Minify Javascript
    • Minify CSS
    • Minify HTML
    • Eliminate render-blocking Javascript and CSS in above-the-fold content (although sometimes not completely)

    Don’t worry, setting it up will be a breeze. Let’s begin!

    Basic Settings

    Combine/minify external HTML, Javascript and CSS with Autoptimize Basic Settings

    After activating the Autoptimize plugin its settings-page will appear under ‘Settings » Autoptimize’. As I mentioned before, setting up the basics will be easy. Follow the steps as shown in the screenshot (click to enlarge):

    1. Enable ‘Optimize HTML Code’
    2. Enable ‘Optimize Javascript Code’
    3. Enable ‘Optimize CSS Code’
    4. And when you feel you’re ready to play with the big boy toys, click ‘Show advanced settings’

    Advanced Settings

    Autoptimize Advanced Settings

    The advanced settings allow fine tuning of Autoptimize.

    By default, Autoptimize aggregates all enqueued script-files into one single .js-file and places it in the footer of the page. It also adds a defer-parameter to optimize page load.

    Both these actions will make Google Pagespeed Insights and Pingdom very happy. It also gathers all CSS-files and places them into one single file.

    To make sure these optimizations don’t break your lay-out (CSS) and “special effects” (Javascript), we need to tweak the default advanced settings of Autoptimize. Have no fear, for it is really simple. ;)

    1. Enable ‘Also aggregate inline JS?’
    2. Enable ‘Also aggregate inline CSS?’
    3. Save settings

    That’s it! You’re all done setting up Autoptimize.

    Go ahead and run a check through Pingdom or Google Pagespeed Insights. You’ll see that the suggestions minify/combine CSS, HTML and Javascript have disappeared.

    Are you happy with your new score? If not, continue reading! In the next chapter we will setup Autoptimize to eliminate render-blocking Javascript and CSS in above-the-fold content.

    Daan van den Bergh

    Daan van den Bergh is a carefully seasoned web developer. His methods consist of thinly slicing your website’s beef and serve you with a platter of the best performance carpaccio on a bed of rocket — the only thing he’s more passionate about is food. Hire him at ffwp.dev.

    16 thoughts on “How to get a 100/100 Score on Pingdom & Google Pagespeed Insights”

    1. Thank you for this article! It’s helped my Pingdom score significantly. I couldn’t get it to work for the longest time because I still had “Minify” checked in W3 Total Cache. But once I did that it worked like a charm.

      Reply
    2. Hi Clay – thanks for your time in putting this out there.

      I’m keen to perfect these scores and have followed your advice; however, pingdom is still giving my website (https://justwebbit.com) a very low score and suggesting I combine external Javascript and CSS…

      Any ideas why?

      Any more input, very much appreciated.

      Gav

      Reply
      • Hi Gav,

        Have you enabled Autoptimize and set it to combine CSS and JS? Autoptimize is usually very efficient in gathering all loaded JS and CSS files, so by tweaking its settings you should be able to have it completely combined!

        Reply
      • You’re using Adsense, which is externally hosted. So I suppose there’s no way for you to correct that. I’m working on a way to host Adsense locally as well, but this’ll take some time.

        Reply

    Leave a Comment

    This site uses Akismet to reduce spam. Learn how your comment data is processed.