76
WordPress Speed Optimisation Easy Ways to Optimise your WordPress Website for Google PageSpeed By Kathir Sid Vel

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

Embed Size (px)

Citation preview

Page 1: 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

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

• 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

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

• Hosting – Shared hosting with TSO Host

• Server location – UK

• Domain http://invoicedo.co.uk

Test Environment

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

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

Fresh WordPress Install

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

Dummy WordPress posts

Fresh WordPress Install

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

Dummy WordPress pages

Fresh WordPress Install

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

Dummy WordPress comments

Fresh WordPress Install

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

Dummy WordPress media library

Fresh WordPress Install

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

Using Twenty Sixteen theme and removed all other themes

Fresh WordPress Install

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

Removed all plugins

Fresh WordPress Install

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

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

Fresh WordPress Install

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

Testing Tools

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

• GTMetrixhttps://gtmetrix.com/

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

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

Pingdom Tools

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

Tested from a server in Stockholm, Sweden

Tests – Round 1

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

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

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

Gtmetrix

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

Tested from a server in Vancouver, Canada

Tests – Round 1

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

Google PageSpeed Insights

Tests – Round 1

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

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

Adding a few WordPress Plugins

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

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

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

Gtmetrix

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

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

Tests – Round 2

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

Google PageSpeed Insights

Tests – Round 2

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

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)

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

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

Solution 1 – Caching

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

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

WP Super Cache Settings - Easy

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

Advanced configuration – go for all the recommended options.

Google search – “wp super cache configuration”

WP Super Cache Settings - Advanced

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

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

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

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

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

Gtmetrix

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

Tests – Round 3

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

Google PageSpeed Insights

Tests – Round 3

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

More Problems

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

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

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

Autoptimize and WP Performance Score Booster

More Solutions - Plugins

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

Tick all three options

WP Performance Score Booster - Settings

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

The plugin adds lines of code your .htaccess file

WP Performance Score Booster - Settings

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

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

Autoptimize - Settings

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

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

Before WP Performance Score Booster and Autoptimize

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

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

After WP Performance Score Booster and Autoptimize

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

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

After WP Performance Score Booster and Autoptimize

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

Autoptimize – exclude jquery.js

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

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

Autoptimize – exclude jquery.js

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

Clear WP Super Cache

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

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

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

Gtmetrix

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

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

Tests – Round 4

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

Google PageSpeed Insights

Tests – Round 4

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

Review of Pending Problems – Pingdom Tools

Google Font

External Resources

External Resource

CDN use?

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

Review of Pending Problems – GTmetrix PageSpeed

Server Setting

Image Resizing

Jquery.js

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

Review of Pending Problems – GTmetrix YSlow

CDN use?

External Resource

ETags

CDN use?

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

Review of Pending Problems – Google PageSpeed Insights Mobile

jquery.js

Optimise CSS?

External resource

Image optimisation

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

Review of Pending Problems – Google PageSpeed Insights Desktop

jquery.js

Optimise CSS?

External resource

Image optimisation

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

WP Smush and Imsanity

Image Optimisation - Plugins

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

Tick Smush images on upload

WP Smush - Settings

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

Smush in bulk – for previously uploaded images

WP Smush - Settings

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

Adjust max width and height of images

Imsanity - Settings

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

Bulk resize previously uploaded images

Imsanity - Settings

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

Pingdom Tools

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

Tests – Round 5

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

Gtmetrix

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

Tests – Round 5

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

Google PageSpeed Insights

Tests – Round 5

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

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

Move from shared hosting to a

semi dedicated setup

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

Enable Keep Alive

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

Enable ModPagespeed

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

Before ModPagespeed

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

After ModPagespeed

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

After ModPagespeed

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

Discussion > Untick Show Avatars

Disable Gravatars

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

Pingdom Tools

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

Tests – Round 6

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

Gtmetrix

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

Tests – Round 6

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

Google PageSpeed Insights

Tests – Round 6

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

Comparison – Marks and Spencer

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

Comparison – John Lewis

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

Comparison – House of Fraser

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

Comparison – Argos

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

Comparison – Amazon

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

• 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

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

• WP Super Cache

• Autoptimize

• WP Performance Score Booster

• WP Smush

• Imsanity

WordPress Plugins Used

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

• Enable Keep Alive

• Enable ModPageSpeed module on the server

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

Key Optimisation Methods – Advanced

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

Speed Isn’t Everything

• Google uses over 200 signals to rank websites

• Great user experience counts

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

Thank You

Kathir Sid Vel

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

http://www.kathirvel.com

https://optimiseweb.co.uk