The 30-Minute-Guide to a 100/100 Score on Pagespeed Insights and Pingdom

A few years ago I wrote a guide on how to get a perfect 100/100 score on Pagespeed Insights, Pingdom and GTMetrix. A lot of time has passed since then. The rules have changed and I’ve learned new, easier ways to optimize my WordPress blog. In this post I’ll show you an updated approach to completely optimize your blog using a few efficiënt, easy to use plugins.

May 27th Google integrated Lighthouse 6 into Pagespeed Insights tool, containing major changes and focussing more on UX and less on server performance. In short, the information in this post is out dated and I’ll publish a revision soon. I appreciate your patience.

The Easiest Way to get a 100/100 score on Pingdom and Pagespeed Insights

Perfect Score on Pagespeed Insights Mobile
Perfect Score on Pagespeed Insights Mobile
Perfect Score on Pagespeed Insights - Desktop
Perfect Score on Pagespeed Insights – Desktop

In order to speed up your WordPress website you’re going to need the right tools. Luckily all of these very powerful plugins are free.

  • WP Fastest Cache,
  • Autoptimize,

And if you’re using Google Fonts and/or Google Analytics:

  • OMGF,
  • CAOS.

In my previous post I was convinced W3 Total Cache (W3TC) was the way to go when it came to page caching. Over time I learned that W3TC should be seen somewhat as a pro-package. If your blog is hosted on a VPS or Dedicated Server — which most WordPress blogs aren’t — W3TC offers you the tools to tweak it to peak performance.

However, most WordPress blogs aren’t on dedicated hosting, but rather shared hosting — so am I. The developers already confessed that W3TC’s minification method took up too much resources for these types of hosting packages. So we’ll be sticking to Autoptimize to minify and combine our JavaScript (JS) and Stylesheets (CSS).

Today I will show you how WP Fastest Cache and Autoptimize will make you score higher in Google Pagespeed Insights and Pingdom.

  • 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.

  • Installing the Plugins

    I assume you know how to install plugins from within your own WordPress installation. If not, click the link. After you’ve installed and activated the plugins through the repository, continue with this tutorial.

    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.

    50 thoughts on “The 30-Minute-Guide to a 100/100 Score on Pagespeed Insights and Pingdom”

    1. Hi, thanks for the article.
      Just a few questions, I bought yesterday WP Rocket cause I saw in different post that was the better plugin to fix the GTMetrix issues,… butnot all of them, and my questions are:

      Do you prefer your free plugins or WP Rocket?
      Is there any way to usu WP Rocket with a combination of some of the plugins of your post?

      Thanks a lot

      Reply
      • Honestly, I don’t have any experience with WP Rocket. I know WP Rocket offers a CDN Service, which can increase your site’s performance on a global scale. Which is awesome and gives you a score boost on YSlow, because they measure for files served over a CDN. Pingdom and Pagespeed don’t.

        In short, I don’t think one approach performs better than the other. One approach is free :) The other offers a CDN, for a price.

        Reply
        • Sorry Daan. I must be an idiot. I tried it all again from Step 1 and still have the same page speed. I don’t know why. I still get these suggestions from page speed insights Reduce server response time
          Enable compression
          Eliminate render-blocking JavaScript and CSS in above-the-fold content
          Optimize images
          Prioritize visible content
          Leverage browser caching.
          Can you help?

        • First of all, you’re not an idiot. ;) Now we have that established, let me explain what’s going on:
          Reduce server response time: this could be because of a number of things. It basically means that your server responds slower that 0,2 seconds — a standard set by Google — to serve content to the browser. This could be because of low disk space, slow server CPU’s, an outdated PHP version. Really, anything.
          Enable compression: This is about an external resource (something from Facebook). So sorry, you can’t do anything about this, except disable all Facebook related stuff on your website.
          Eliminate render-block JavaScript and CSS in above-the-fold content: this is explained on the last page of this post. This fixes it.
          Optimize images: this means that images that are loaded are larger in size than they should be. I use Shortpixel for this, but there are many choices to optimize your images.
          Prioritize visible content: this warning will disappear together with ‘Eliminate render-block JS and CSS’.
          Leverage browser caching: This is about external resources as well, so you can’t influence this. If you’re using Google Tag Manager only to implement Google Analytics, I’d suggest using my plugin CAOS. If you’re using it for other purposes, you can’t do anything about it.

          Hope this helps! :)

        • Yes it does Daan. I realise I have Google Tag Manager plus your CAOS plugin so will remove it plus the facebook thing since I haven’t launched as yet…I’ll look at all my images as they must be the wrong size even though I have resmustit. Thanks for being here. Couldn’t thank you enough for your advice!!!!

    2. Hello Daan,
      Thank you su much for your work! This “operation” give my homepages more speed.
      But 5 days after changing this Plugins I saw that Autoptimize changed a lot of my layout. So I disactivated: all fine, reactivated after trying a lot. Start from Zero and at the end it seems to word out.

      NOW I can see only one errore in the visualizzation, when I’m on https://www.aloebenessere.it/aloe-vera-gel-da-bere/ BROWSING with the Internet Explorer (the other browsers seems ok).

      I made a screenshot and put it here:
      http://www.aloeveraflp.it/pics/screenshot-problem-autoptimize-plugin.jpg
      where you can see that the TEXT in the “testimonial module” of Divi is shown outside, one letter under the other.

      Can you help me in this?
      (a beer and a Pizza is waiting for you i Italy, and your family shure!)
      Greetings, Martina

      Reply
      • Hi Martina,

        I haven’t heard of Autoptimize breaking the layout before. Are you sure it isn’t a caching issue within Internet Explorer? Have you cleaned the browser cache?

        Then again, Internet Explorer is a very old browser — it isn’t even maintained anymore and it’s replaced by Edge. So I wouldn’t worry too much about your site’s looks in that browser. Barely anyone uses it anymore.

        If you really want to fix that issue, I’d suggest you just add some CSS to fix it for IE specifically. You can add a styling block to your theme’s header (Divi offers a custom head (and footer) code option within the theme options, I believe), containing the following:

        <!--[if IE]>
        <style>
            /* Your CSS here */
        </style>
        <![endif]-->
        
        Reply

    Leave a Comment

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