{"id":3403845,"date":"2021-05-17T14:00:00","date_gmt":"2021-05-17T12:00:00","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=3403845"},"modified":"2024-07-05T11:10:24","modified_gmt":"2024-07-05T09:10:24","slug":"how-to-score-100-google-page-speed-test","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/how-to-score-100-google-page-speed-test\/","title":{"rendered":"How to Score 100% on Google’s Page Speed Test: WordPress Edition"},"content":{"rendered":"

Are you wondering how to make your web pages load as quickly as possible?<\/p>

Well, in this post, I\u2019ll show you the exact steps Tribe SEO<\/a> took to move from a 37% Google PageSpeed mobile score right up to a perfect 100%.<\/p>

So, if you want to rank higher on Google, offer a great user experience for your visitors, and ace Google\u2019s PageSpeed Insights test, you\u2019re in the right place.<\/p>

I\u2019ll break down all the obstacles that were overcome and into five key milestones that made us score 100% Google Page Speed mobile score:<\/p>

  1. Ensure Clean Code<\/a>.<\/li>\n\n
  2. Install a Page Speed Plugin<\/a>.<\/li>\n\n
  3. Upgrade Webhost<\/a>.<\/li>\n\n
  4. Improve Largest Contentful Paint<\/a>.<\/li>\n\n
  5. Improve Time to Interactive<\/a>.<\/li><\/ol>

    Now, before we jump in, a bit of a disclaimer. As of this publishing of this post, the Tribe SEO homepage scores a 100% Google PageSpeed mobile score around half the time. That\u2019s pretty typical, as you\u2019ll often see some variations when running page speed tests.<\/p>

    Okay, so let\u2019s jump into it.<\/p>

    Milestone #1: Ensure Clean Code<\/h2>

    Whether you realize it or not, your web pages are made up of a series of scripts<\/a> that affect your site\u2019s page speed.<\/p>

    For the simplest WordPress sites, PHP and MySQL scripts are run whenever a user requests a webpage from the server.<\/p>

    \"Theme<\/figure><\/div>

    However, a typical WordPress site will use a theme, plenty of plugins, and sometimes a page builder. This results in many more scripts being processed\u2013both server-side like PHP and MySQL and browser-side, like JavaScript and CSS.<\/p>

    But here\u2019s the thing. Many of these additional scripts are unnecessary in how you want your pages to look and function. This results in bloated code and slower page speed times.<\/p>

    To help illustrate this, here are some stats supplied by Oxygen4fun<\/a>.<\/p>

    If we look at the default installations for three popular page builders, we can see the combined JavaScript and CSS file size for Brizy Pro, Divi Builder, and Elementor Pro are 1624 KB, 1243 KB, and 966 KB, respectively.<\/p>

    So, of the three, Elementor Pro has the smallest file size, so the leanest code.<\/p>

    \"Page<\/figure>

    But it\u2019s by no means the leanest of all page builders because WP Bakery, Beaver Builder, and Oxygen Builder have smaller file sizes of 494 KB, 59 KB, and 34 KB, respectively.<\/p>

    It\u2019s clear to see Oxygen Builder has the leanest CSS and JavaScript code. It\u2019s around 4% of the total size when compared to Elementor Pro and 2% when compared to Brizy Pro.<\/p>

    That\u2019s because Oxygen Builder is built on the premise of only loading what is needed and when it\u2019s needed.<\/p>

    Oxygen Builder also creates very clean HTML code. Other builders create large numbers of nested divs for simple content elements like H1 headings, which adds to the code bloat. <\/p>

    \"Clean<\/figure>

    In contrast, Oxygen generates no unnecessary divs.<\/p>

    On top of that, Oxygen Builder acts as both a theme and a page builder, so it outputs very lean code, and it can be more accurately described as a site builder.<\/p>

    Because of the lean code and supportive FaceBook community, Tribe SEO picked Oxygen Builder<\/a> to help develop our new site.<\/p>

    We were also careful in choosing bloat-free plugins. For example, WP Fluent Forms<\/a> is very small in file size.<\/p>

    Milestone #2: Install a Page Speed Plugin<\/h2>

    After trying several WordPress page speed plugins, I decided on WP Rocket<\/a> because not only did it generate the best page speed scores, it was easy to use and had excellent compatibility with our website setup.<\/p>

    Out of the box, it offers great features like the page and browser caching, as well as GZIP compression, to name a few.<\/p>

    However, it was WP Rocket\u2019s \u201cFile optimization\u201d features that made the most significant impact.<\/p>

    But first, let\u2019s review how Tribe SEO\u2019s homepage performed without WP Rocket installed.<\/p>

    Its Google Page Speed mobile score was an understated 37%. Google highlighted \u201cred triangles\u201d for Largest Contentful Paint<\/a>, Time to Interactive, and Total Blocking Time<\/a>. So, I knew these areas needed improving.<\/p>

    \"PBad
    The PageSpeed Insights mobile score needs improvements<\/figcaption><\/figure>


    Google also flagged three opportunities with red triangles, which indicated these were the highest priority for fixing. These included:<\/p>