Google PageSpeed Insights: Scoring 100/100 with WordPress

Google PageSpeed Insights is a well known tool to assess the performance of your website, both on desktop and mobile.

After analyzing your site you get two scores: one for mobile and one for desktop.

Getting a score of 100/100 with your WordPress site is not impossible, but we don’t recommend optimizing your site for this tool alone. After all it are your visitors you should make your site perfect for 🙂
For example, getting a Pagespeed Insights score of 100/100 pretty much means you visitors will see flashes of unstyled content because your stylesheets and webfonts need to be loaded asynchronously.

Read on for our tips & trick to attain a great PageSpeed score with your WordPress blog!

Introduction

We recommend to execute some page speed tests before doing any optimizations.
This way you can compare the before and after performance when changing one or more settings.

Upload small sized images in the WordPress media library

As a general rule you should upload your images in the smallest resolution possible, while keeping a crisp image on a desktop PC (with eg. a Retina screen).

As of WordPress 4.4, WordPress will automatically create lower resolution (responsive) versions from the uploaded version, which are then used when viewing the site via a mobile device (eg. smartphone).

To resize the images, you can use your favorite Windows or Mac app (eg. Gimp, Photoshop, …), or you can use Imagemagick which we installed on our server in a previous chapter.

Important: Using too high resolution images can lower your Pagespeed score to 30/100 or lower easily as your website will be transferring MBs of images instead of KBs.

Resizing images with Imagemagick

You can resize JPG and PNGs on your server with the following command:

sudo convert "myimage.jpg" -resize 400x400\> "myimage.jpg"

This command will make width or height equal to 400px while maintaining the aspect ratio, and overwrite the original file.

If you want to process all images in a directory (and its subdirectories) you could use:

find . -type f -iname "*.png" -print0 | xargs -I {} -0 sudo convert "{}" -resize 500x500\> "{}"

This could come in handy if you already have a lot of images on your server which you want ro resize.

In our book Fast, Scalable and Secure webhosting we explain how you can install ImageMagick on your server.

EWWW Image Optimizer WordPress plugin

When uploading images to your WordPress media library, it is possible your images do not have the smallest size possible.
Images such as JPGs, PNGs or WebP formats can sometimes be further compressed without a loss of picture quality (eg. losslessly) by removing invisible meta data (like EXIF information).

That’s a good thing, because smaller image sizes means faster page loads.

We recommend to install the EWWW Image Optimizer WordPress plugin to automatically optimize any image you upload to WordPress.
If you already have an existing Media Library full of images, the plugin can also process your existing images and replace them with the optimized versions.

The EWWW Image Optimizer needs some image transformation tools to be installed on your server. Run the following commands to install them:

sudo apt-get install libjpeg-progs
sudo apt-get install optipng
sudo apt-get install gifsicle

After enabling the EWWW Image Optimizer plugin; go the the Settings page to optimally configure it:

• Enable the option ‘Remove metadata’
• Advanced settings: optipng optimization level: Level 4 and pngout optimalization level: Level 0
• Conversion settings: Enable the option ‘JPG/PNG to WebP’: this option will create WebP variants of your images which most of the time will be less in size. WebP is supported by modern browsers and we’ll install the “Cache Enabler” plugin to let WordPress automatically serve WebP images to supported browsers.

Don’t forget to Bulk Optimize the images already in your media library! You may need to click on an image “Re-optimize” link in the Media library to generate a WebP image.

Disable Emojis support in WordPress 4.2 and later

Emojis icons are by default enabled since WordPress 4.2 – even if you don’t use them at all.

If you don’t use them in your WordPress blog, you can safely disable them via the following WordPress plugin.

Disable Emojis

Make sure to activate the plugin after installing.

Install the Cache Enabler plugin

The Cache Enabler plugin creates static HTML files and stores them on the servers disk. The web server will deliver the static HTML file and avoids the resource intensive backend processes (core, plugins and database)

Cache Enabler has the ability to create 2 cached files:

• One is plain HTML
• the other version is gzipped (gzip level 9).

These static files are then used to deliver content faster to your users directly via PHP without any database lookups or gzipping as the files are already pre-compressed.

Cache Enabler also integrates nicely with the WebP conversion setting in the EWWW Image plugin. It allows you to serve WebP images without JavaScript and responsive images (srcset attribute) since WordPress 4.4

Cache Enabler

Use the following settings:

• Enable “Pre-compression of cached pages. Needs to be disabled if the decoding fails in the web browser.”
• Enable “Create an additional cached version for WebP image support.”
• Cache Minification: HTML

Optionally you can also integrate the advanced configuration in your nginx configuration so that cached pages can completely bypass PHP calls. See https://www.keycdn.com/support/wordpress-cache-enabler-plugin/#advanced-configuration for more details.

Install the CDN Enabler plugin

If you have setup a CDN at KeyCDN as explained in our Fast, Scalable and Secure webhosting book, then you can install the KeyCDN CDN Enabler plugin to to let WordPress serve all resource files from the CDN location. (eg. cdn.yourwebsite.com)

Use the following settings:

• Enable CDN for relative paths
• Enable CDN for HTTPS connections
• Enter the CDN URL (eg. https://cdn.fastwebhostingsecrets.com)

CDN Enabler

Conclusion

You should now be well on your way to a better PageSpeed Score. There are many more (non WordPress specific) optimizations possible to further increase the performance of your site, like:

• Compresssing your responses (GZIP)
• Enabling HTTP2 support in nginx
• Installing the Google PageSpeed plugin for nginx

Check out our book at https://www.fastwebhostingsecrets.com/ for all the details.