Supercharging your WordPress site’s speedby @KathirSidVel

What is Page Speed?

“Page speed is a measurement of how fast the content on your page loads.”

https://moz.com/learn/seo/page-speed

Better search rankings

Page Speed is one of the signals in Google’s

algorithm to rank pages.

https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

Why isPage Speedimportant?

Enhanced user experience

Faster sites create happy visitors.

https://research.googleblog.com/2009/06/speed-matters.html

Why isPage Speedimportant?

Increased conversions

Happy visitors tend to trust in your website and buy from you.

https://blog.kissmetrics.com/speed-is-a-killer/

Why isPage Speedimportant?

How Page Load Time Affects

Conversion Rates: 12 Case

Studies

https://blog.hubspot.com/marketing/page-load-time-conversion-rates

Why isPage Speedimportant?

Let’s put it to the speed test

Test Environment

Cloud server from

Shared by a number of other websites.

Located in the UK

https://wpspeed.edinburghwebsites.co.uk/

Demo WordPress

Install

Posts

Pages

Media

CommentsTheme Unit Testhttps://codex.wordpress.org/Theme_Unit_Test

Demo WordPress

Install

All plugins removed

+

Using the twenty seventeen themeTheme Unit Test

https://codex.wordpress.org/Theme_Unit_Test

Test pagewith a few

imagesFeatured image replaced with a

large and unoptimised image

Testing Tools

https://www.keycdn.com/blog/website-speed-test-tools/

Test 1 - PageSpeed Insights

Test 1 - GTMetrix

https://gtmetrix.com/reports/wpspeed.edinburghwebsites.co.uk/bzjcEYni

Same site on an average shared server

http://slow.edinburghwebsites.co.uk/

Same site on an average shared server

https://gtmetrix.com/reports/slow.edinburghwebsites.co.uk/iJaT4OUA

Comparison

https://wpspeed.edinburghwebsites.co.uk/wp-speed-test/

http://slow.edinburghwebsites.co.uk/wp-speed-test/

https://www.keycdn.com/support/what-is-ttfb/

“You should reduce your server response time under 200ms”

https://developers.google.com/speed/docs/insights/Server

Time To First Byte

https://wpspeed.edinburghwebsites.co.uk/wp-speed-test/

http://slow.edinburghwebsites.co.uk/wp-speed-test/

SiteGround CloudTSO Shared

https://www.thewebmaster.com/hosting/2015/dec/14/what-is-http2-and-how-does-it-compare-to-http1-1/

HTTP/1.1vsHTTP/2

http://slow.edinburghwebsites.co.uk/wp-

speed-test/

https://wpspeed.edinburghwebsites.co.uk/wp-speed-test/

HTTP/1.1

HTTP/2

SiteGround Cloud - HTTP/2TSO Shared - HTTP/1.1

Continue using the Siteground

version+

let’s add some plugins

Contact Form 7

Google Tag Manager

Post Duplicator

Wordfence Security

WP-Optimize

Yoast SEO

Test 2 - PageSpeed Insights

Test 2 - GTMetrix

https://gtmetrix.com/reports/wpspeed1.edinburghwebsites.co.uk/Jnc6P452

Evaluate WordPress plugins before installing them.

Recommendations from PageSpeed Insights and GTMetrix

Plugin 1:WP Super

Cache

https://varvy.com/pagespeed/ttfb.html

Serving cached and compressed pages to your visitors

WP Super Cache Settings

Plugin 2:Autoptimize

Combine CSS / JS files

Minify (remove whitespace)

Cache CSS / JS files

CSS in the page head

Move and defer JS to the footer

Optimise JavaScript, CSS and HTML

Autoptimize Settings

Autoptimize

Plugin 3:WP

Performance Score Booster

Remove query strings from static content

Enable GZIP compression

Leverage browser caching

WP Performance Score Booster Settings

WP Performance Score Booster .htaccess

Plugin 4:Imsanity

“Automatically resizes huge

image uploads down to a size

that is more reasonable for

display in browser...

… also provides a bulk-resize

feature to selectively resize

previously uploaded images”

Resize huge images

Imsanity Settings

Plugin 5:reSmush.it

Image Optimizer

Free Image optimization based

on reSmush.it API

Image size reduction based on

several advanced algorithms

Bulk operation to optimize all

your pictures in 2 clicks

reSmush.it Settings

Test 3 - PageSpeed Insights

Test 3 - GTMetrix

https://gtmetrix.com/reports/wpspeed2.edinburghwebsites.co.uk/ALQJMHOn

Recommendations from PageSpeed Insights

Oversized images

Could defer loading of the CSS

file

External files outside our

control

Recommendations from GTMetrix

External files outside our control

Oversized images

Could defer loading of the JS files

Optimize file delivery

Removed the header image+

Resized and replaced a content area image

Test 4 - PageSpeed Insights

Test 3 - GTMetrix

https://gtmetrix.com/reports/wpspeed5.edinburghwebsites.co.uk/7nfQxPag

Final Boost

https://www.edinburghwebsites.co.uk/

How can Cloudflare

help?

DNS, GZIP and HTTP/2

Content Delivery Network

HTML / CSS / JS Minify

Rocket Loader

Polish Image Optimization (pro)

Mirage Image Optimization (pro)

Security (pro)

https://www.cloudflare.com/performance/

Test 5 - PageSpeed Insights

Test 5 - GTMetrix

https://gtmetrix.com/reports/www.edinburghwebsites.co.uk/4vtpwGz2

Let’s compare

Marks and Spencer

Boots

Amazon

Argos

Should you over-optimise?Speed scores are there for

guidance only ● Speed is important, but there are 100s of

other factors that determine your search

rankings.

● Great content + user experience counts.

Takeaways

Page Speed Optimisation - Easy Wins

● Get the right hosting solution - shared / VPS / dedicated.

● Host close to your target audience / use a Content Delivery Network.

● Serve using HTTP/2. Enable compression. Leverage browser caching.

● Cache dynamic pages to speed up ‘Time to First Byte’ (200ms).

● Crop, resize and optimise images.

● Minify HTML code + minify and merge CSS and JS files.

● Move JS files to the footer. Load CSS and JS files asynchronously.

Page Speed Optimisation - WordPress Plugins

● WP Super Cache

● Autoptimize

● WP Performance Score Booster

● Imsanity

● reSmush.it Image Optimizer

Thank You!@KathirSidVel

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

https://www.kathirvel.com