How we reached a score of 100 in Google Pagespeed

We have seen a lot of questions from our customers regarding the performance of WordPress. So we decided to show users that it is possible to reach a 100/100 score for our homepage in Google Pagespeed. However, be prepared to break things in your website before finding utopia.
Important warning: make a backup of your website and database before you start! 
*Please note that we have also done custom server configuration with our server specialist to have high performance website. Those customization’s will not be disclosed here as it’s a service we offer to clients. Want to become a client? Please send us an email.
Steps we took to achieve a 100/100 Google Pagespeed score. For this result we used the following server configuration:

  • PHP 7.1
  • Apache 2.4.29
  • MariaDB 10.2.12
  • Total memory: 4gb
  • CentOS 7 as Linux OS

1. Choosing a quality theme

We decided to stick with our Genesis Framework theme and only upgrade our child theme. Our child theme now supports the latest web standards and WordPress standards (Gutenberg, Caching, etc.). Genesis has the advantage of being light and bootstrap based, which is easier to cache for caching plugins than other themes.

2. Optimizing content, css & scripts.

When you perform an initial Pagespeed analysis, you will find perhaps a lot of content that needs optimization, like images. We decided to use the plugin “Tinypng” for images, as this is the best plugin we have tested and we tested half a dozen of these plugins. For CSS and Scripts we used the plugin “WP Super Cache” in combination with “Autoptimize”. We have also tested other caching plugins like WP Fastest Cache, W3 Total Cache and WP Rocket. In our case, WP Super Cache turned out to be the best way to go, although WP Rocket was very close.
Settings of WP Super Cache:

  • Cache Delivery Method: Expert
  • All recommended options

Settings of Autoptimize:

  • Optimize HTML
  • Optimize JavaScript (excluded: jquery.js & our minified theme scripts)
  • Add try-catch wrapping
  • Optimize CSS code + Also aggregate inline CSS + inline All CSS
  • Save aggregated script/css as static files

3. Optimizing .htaccess

The .htaccess file is a configuration file that contains instructions for handling inbound traffic. A .htaccess can also adjust certain settings of your subdirectory(s). An .htaccess file is actually a file without a name, because .htaccess is an extension. You place an .htaccess file in your root folder or in another folder. The caching plugins already add a lot of custom functions into the .htaccess file.
However, Google Pagespeed mentions we are still not fully leveraging browser cache. So we decided to add the following in .htaccess as well:

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/html "access plus 14 days"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
</IfModule>

Result

We reached a score of 100 in Google Pagespeed due to all of our changes and still making sure that everything works fine. There is a but, we only managed to get 100 when we deleted these three scripts:

  1. Chat plugin script
  2. Google Analytics
  3. Facebook SDK

Because these scripts are important to us, we decided to keep them and be satisfied with a score of 99/100 in Google Pagespeed test.
Pagespeed appency

Reader Interactions

Comments

  1. I attempted to replicate your test with the same server type, PHP level, Genesis and child theme. Couldn’t get a score higher than 68.
    I removed everything in the sidebar, have no social sharing, and created a post with just 2 words on it. Didn’t even have an image. Same score.
    What child theme did you use? That’s the only thing I wasn’t sure I replicated. I used Lifestyle Pro.

  2. Dear readers,
    Please note that we have also done custom server configuration with our server specialist to have high performance website. Those customizations will not be disclosed here as it’s a service we offer to clients. Want to become a client? Please send us an email.

Geef een reactie