WordPress Speed OptimisationSite... · WordPress Speed Optimisation ... Testing Tools • Pingdom Tools http ... Easy configuration - set the radio button to “Caching On ...

WordPress Speed Optimisation

Easy Ways to Optimise your WordPress Website for Google PageSpeed

By Kathir Sid Vel

• Higher ranking on Google’s search resultshttps://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

• Happy visitors - thanks to fast loading pages

• Increased conversions - thanks to happy visitorshttps://blog.kissmetrics.com/loading-time/

Importance of Site Speed

• Hosting – Shared hosting with TSO Host

• Server location – UK

• Domain http://invoicedo.co.uk

Test Environment

Dummy content provided by WordPress Theme Unit Test - https://codex.wordpress.org/Theme_Unit_Test

Fresh WordPress Install

Dummy WordPress posts

Fresh WordPress Install

Dummy WordPress pages

Fresh WordPress Install

Dummy WordPress comments

Fresh WordPress Install

Dummy WordPress media library

Fresh WordPress Install

Using Twenty Sixteen theme and removed all other themes

Fresh WordPress Install

Removed all plugins

Fresh WordPress Install

Home page – our testing page. A fair number of posts and images on this page.

Fresh WordPress Install

Testing Tools

• Pingdom Toolshttp://tools.pingdom.com/fpt/

• GTMetrixhttps://gtmetrix.com/

• Google PageSpeed Insightshttps://developers.google.com/speed/pagespeed/insights/

Pingdom Tools

http://tools.pingdom.com/fpt/#!/cFRIVr/http://invoicedo.co.uk/

Tested from a server in Stockholm, Sweden

Tests – Round 1

Pingdom Tools

http://tools.pingdom.com/fpt/#!/cFRIVr/http://invoicedo.co.uk/

Tested from a server in Stockholm, Sweden

Tests – Round 1

HTTP requests = number of images and files requested by the webpage

Pingdom’s score

out of 100

Time taken for the entire page to load

Total file size of the page

along with the images

and other files

Gtmetrix

https://gtmetrix.com/reports/invoicedo.co.uk/WgOQWtKv

Tested from a server in Vancouver, Canada

Tests – Round 1

Google PageSpeed Insights

Tests – Round 1

Adding stress to our test website using a sample collection of useful WordPress plugins

Adding a few WordPress Plugins

Pingdom Tools

http://tools.pingdom.com/fpt/#!/bnRucf/http://invoicedo.co.uk/

Adding those seven plugins has increased the number of HTTP requests and page size, thus increasing the

page’s load time.

Tests – Round 2

Previous Test

Current Test

Gtmetrix

https://gtmetrix.com/reports/invoicedo.co.uk/8rMUbg5Y

We see the performance of the website decrease on Gtmetrix as well.

Tests – Round 2

Google PageSpeed Insights

Tests – Round 2

The server (PHP and MySQL) builds the webpage on demand. It loads the posts from the database, builds the

HTML layout and sends it to the browser. This speed is dependent on your server’s power (CPU, RAM, etc.). The

browser waits to receive the initial HTML content and then it starts loading images, styles, scripts, videos, etc.

The problem is that the server has to keep doing this page building every time someone visits the webpage.

Problem 1 – Server Response Time / Time to First Byte (TTFB)

There are many popular caching plugins. We’ll use WP Super Cache for our test.

Solution 1 – Caching

Easy configuration - set the radio button to “Caching On”

WP Super Cache Settings - Easy

Advanced configuration – go for all the recommended options.

Google search – “wp super cache configuration”

WP Super Cache Settings - Advanced

WP Super Cache creates and stores flat HTML pages for all the pages that have been visited. The following visit

will be served a flat HTML version of the page instead of a full database load and build.

WP Super Cache Creates Flat HTML Files

Pingdom Tools

http://tools.pingdom.com/fpt/#!/dqWuD2/http://invoicedo.co.uk/

Through caching, we have drastically reduced the initial HTML content loading time

From 3.01 seconds to 88 milliseconds – 242% increase / -71% decrease

Tests – Round 3

Gtmetrix

https://gtmetrix.com/reports/invoicedo.co.uk/o4ckVoKb

Tests – Round 3

Google PageSpeed Insights

Tests – Round 3

More Problems

More Solutions

• Remove query strings from static content (e.g. jquery.js?ver=1.11.3)

• Enable GZIP compression (compress text, html, javascript, css, xml, etc.)

• Set expire caching (Leverage Browser Caching)

• Optimise HTML code – remove whitespace and comments

• Minify and combine JavaScript code and files

• Minify and combine CSS code and files

Autoptimize and WP Performance Score Booster

More Solutions - Plugins

Tick all three options

WP Performance Score Booster - Settings

The plugin adds lines of code your .htaccess file

WP Performance Score Booster - Settings

We’ll tick all the checkboxes found under the basic configuration

Autoptimize - Settings

Whitespace, separate CSS and JS files and query strings at the end of CSS and JS files

Before WP Performance Score Booster and Autoptimize

Whitespace removed, CSS files minified and merged into one file and query strings removed

After WP Performance Score Booster and Autoptimize

JS files minified and merged into one file, moved to the footer and query strings removed

After WP Performance Score Booster and Autoptimize

Autoptimize – exclude jquery.js

jquery.js excluded and pushed into the head area of the code

Autoptimize – exclude jquery.js

Clear WP Super Cache

Pingdom Tools

http://tools.pingdom.com/fpt/#!/cLtZIX/http://invoicedo.co.uk/

Combining of multiple CSS and JS files have helped reduce the number of HTTP requests. Also, the other

tweaks have improved the performance grade, load time and page size.

Tests – Round 4

Gtmetrix

https://gtmetrix.com/reports/invoicedo.co.uk/P4SThkcT

The latest tweaks have given us a big leap in the scores.

Tests – Round 4

Google PageSpeed Insights

Tests – Round 4

Review of Pending Problems – Pingdom Tools

Google Font

External Resources

External Resource

CDN use?

Review of Pending Problems – GTmetrix PageSpeed

Server Setting

Image Resizing

Jquery.js

Review of Pending Problems – GTmetrix YSlow

CDN use?

External Resource

ETags

CDN use?

Review of Pending Problems – Google PageSpeed Insights Mobile

jquery.js

Optimise CSS?

External resource

Image optimisation

Review of Pending Problems – Google PageSpeed Insights Desktop

jquery.js

Optimise CSS?

External resource

Image optimisation

WP Smush and Imsanity

Image Optimisation - Plugins

Tick Smush images on upload

WP Smush - Settings

Smush in bulk – for previously uploaded images

WP Smush - Settings

Adjust max width and height of images

Imsanity - Settings

Bulk resize previously uploaded images

Imsanity - Settings

Pingdom Tools

http://tools.pingdom.com/fpt/#!/bXfOYB/http://invoicedo.co.uk/

Tests – Round 5

Gtmetrix

https://gtmetrix.com/reports/invoicedo.co.uk/Gs3nkSP1

Tests – Round 5

Google PageSpeed Insights

Tests – Round 5

• Invoicedo.co.uk becomes Kitdo.co.uk

Move from shared hosting to a

semi dedicated setup

Enable Keep Alive

Enable ModPagespeed

Before ModPagespeed

After ModPagespeed

After ModPagespeed

Discussion > Untick Show Avatars

Disable Gravatars

Pingdom Tools

http://tools.pingdom.com/fpt/#!/b8ukCf/http://kitdo.co.uk/

Tests – Round 6

Gtmetrix

https://gtmetrix.com/reports/kitdo.co.uk/kpxsoV0Y

Tests – Round 6

Google PageSpeed Insights

Tests – Round 6

Comparison – Marks and Spencer

Comparison – John Lewis

Comparison – House of Fraser

Comparison – Argos

Comparison – Amazon

• Host geographically close to your target audience

• Hosting options - shared / VPS / dedicated

• Caching to speed up ‘Time to First Byte’

• Resize and optimise images to the required resolution and size

• Enable GZIP compression

• Leverage browser caching – ‘Expires’ header

• Minify HTML code

• Minify and merge CSS and JS files + remove query strings

• Place JS files before the </body> tag

Key Optimisation Methods – Easy Wins

• WP Super Cache

• Autoptimize

• WP Performance Score Booster

• WP Smush

• Imsanity

WordPress Plugins Used

• Enable Keep Alive

• Enable ModPageSpeed module on the server

• Use a Content Delivery Network (CDN) for images and files

Key Optimisation Methods – Advanced

Speed Isn’t Everything

• Google uses over 200 signals to rank websites

• Great user experience counts

Thank You

Kathir Sid Vel

https://uk.linkedin.com/in/kathirvel

http://www.kathirvel.com

https://optimiseweb.co.uk