How to actually measure page speed, and first contentful paint, then speed up our wordpress website, with Peter Mead

2. @petermeadit
...iT?
Making WordPress Super Fast
By Peter Mead - WordPress SEO Consultant

3. @petermeadit
Why a WordPress speed junkie?
Just Because...:
● Google & People think it matters
● People get frustrated
Slow sites cause:
“Friction”

4. @petermeadit
Marketingdive 2016: http://bit.ly/2Y8UNIv

5. @petermeadit
At the BBC we’ve noticed that, for
every additional second a page takes
to load, 10 percent of users leave...
Creative bloq 2018: http://bit.ly/2VN2d6T

6. @petermeadit
Every 100ms of latency cost 1% in sales
A lot of lost money huh…?

7. Think with Google 2018: http://bit.ly/2VHLLF3
Google: Industry benchmarks for mobile page speed
@petermeadit

8. Testing the speed of
your WordPress site
Failed speed test...
@petermeadit

9. Google PageSpeed Insights. https://developers.google.com/speed/pagespeed/insights/
PageSpeed, a reliable guide to your speed…?
@petermeadit

10. Install Lighthouse for Chrome
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en
So test speed with Lighthouse for Chrome then...
@petermeadit

11. Lighthouse report, values may vary...?
@petermeadit

12. WebPageTest https://www.webpagetest.org/
Let’s try WebPageTest, for Advanced Waterfall
@petermeadit

13. Test results may vary, maybe…?
@petermeadit

14. WebPageTest’s Advanced Waterfall, more clues…?
@petermeadit

15. GTMetrix https://gtmetrix.com/
GTMetrix.com: PageSpeed, YSlow, Waterfall & Timings etc.
@petermeadit

16. First Contentful Paint… when people see the content
@petermeadit

17. @petermeadit
No single number will explain your
WordPress Speed properly...

18. So how do we actually
speed up WordPress?
Faster please...
@petermeadit

19. @petermeadit
AMP Accelerated Mobile Pages: https://www.ampproject.org/
Just use AMP right...? Well maybe

20. @petermeadit
AMP Plugin: https://wordpress.org/plugins/amp/
Configure Google AMP Cache to control your own content

21. @petermeadit
AMP Plugin: https://wordpress.org/plugins/amp/
Use the AMP Plugin for WordPress

22. @petermeadit
Please get good quality hosting!

23. @petermeadit
Use a CDN!

24. Sign up for Cloudflare and add a site...
@petermeadit

25. And much much more…
Cloudflare Dashboard Looks Like This
@petermeadit

26. Cloudflare WordPress Plugin http://bit.ly/2H0B3Qp
Install the Cloudflare Plugin
@petermeadit

27. Yadda yadda yadda… yes its faster!
Use HTTP/2 on Cloudflare
@petermeadit

28. @petermeadit
Sometimes you will need to clear Cloudflare cache

29. @petermeadit
Configure the Cloudflare cache

30. @petermeadit
Set the Cloudflare Browser Cache Expiration

31. @petermeadit
Set Cloudflare to Auto Minify

32. @petermeadit
Use Cloudflare Polish

33. @petermeadit
Use Brotli compression on Cloudflare

34. @petermeadit
Use Rocket Loader: asynchronous scripts on Cloudflare

35. Keep finding more
ways to speed up
WordPress
@petermeadit
What’s your poison…?

36. @petermeadit
Scale your Images
Images with larger dimensions than needs to display are sending unnecessary bytes over the wire.
Edit and scale images to the largest size needed, and specify those dimensions in the page code.
GTMetrix image optimization tutorial: http://bit.ly/2VNmx86

37. @petermeadit
TinyPNG - Website: https://tinypng.com
Compress your Images with TinyPNG

38. @petermeadit
TinyPNG - Wordpress plugin https://wordpress.org/plugins/tiny-compress-images/
Use TinyPNG Plugin

39. @petermeadit
Smush Plugin: https://en-au.wordpress.org/plugins/wp-smushit/
Compress Images with Smush Plugin

40. @petermeadit
Ewww image optimizer Plugin: https://en-au.wordpress.org/plugins/ewww-image-optimizer/
Compress with Ewww Image Optimizer Plugin

41. Wp Rocket: https://wp-rocket.me/
@petermeadit
Use WP Rocket Plugin

42. W3 Total Cache Plugin: https://wordpress.org/plugins/w3-total-cache/
@petermeadit
Use W3 Total Cache Plugin

43. @petermeadit
A3 Lazy load: https://wordpress.org/plugins/a3-lazy-load/
Use A3 Lazy Load Plugin

44. @petermeadit
Autoptimize Plugin: https://wordpress.org/plugins/autoptimize/
Use Autoptimize Plugin
Moves and defers scripts to the footer and minifies HTML… And more.

45. @petermeadit
Self-Hosted Google Fonts Plugin: https://wordpress.org/plugins/selfhost-google-fonts/
Use Self-Hosted Google Fonts Plugin

46. @petermeadit
Asset CleanUp: Page Speed Booster Plugin: https://wordpress.org/plugins/wp-asset-clean-up/
Use Asset CleanUp: Page Speed Booster Plugin

47. Keep learning to
speed up
WordPress…
Those who know
more
@petermeadit
Need more help…?

48. @petermeadit
Jono Alderson: http://bit.ly/2DTERlN
Jono Alderson, WordPress Guru
Let’s go faster: http://bit.ly/2VfUZJf

49. @petermeadit
Jon Henshaw: https://twitter.com/henshaw
Jon Henshaw, Page Speed Master
Page Speed: http://bit.ly/2DSDF2e

50. @petermeadit
5 key Takeaways for WordPress Speed
1. Optimise speed for First Contentful
Paint
2. Use AMP for faster mobile
performance
3. Get good hosting for your
WordPress site
4. Use a Good CDN, Cloudflare
5. Optimize your images and files
Your parting gifts...