wordpress site’s speed supercharging your...better search rankings page speed is one of the...
TRANSCRIPT
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