View
216
Download
1
Category
Preview:
Citation preview
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
Recommended