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 a custom server configuration with our server specialist to have a high performance website. Those customizations will not be here as a service we offer to clients. Want to become a client? Please send us an E-mail.
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 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 boxes or 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 or Autoptimize:
- Optimize HTML
- 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:
We reached a score or 100 in Google Pagespeed due to all of our changes. There is a but, we only managed to get 100 when we deleted these three scripts:
- Chat plugin script
- Google Analytics
- Facebook SDK
Because these scripts are important to us, we decided to keep them with a score of 99 / 100 in Google Pagespeed test.