This document provides tips for optimizing a WordPress site for speed. It recommends starting with basic optimizations like using Cloudflare and moving the site to a staging environment. Next it advises to check the PageSpeed score and configure plugins like Autoptimize to minify styles and scripts. Additional tips include optimizing CSS delivery, removing render-blocking JavaScript using plugins like Async JavaScript, optimizing images, enabling browser caching with plugins like WP Rocket, and checking the PageSpeed score again which should be improved.

1. @itrogers
WordPress: Lightning Fast
Ian Rogers

2. @itrogers
Why optimize WP for speed?

3. @itrogers
Why optimize for speed?
1. Better User Experience
2. SEO Friendly
3. Increase Conversion Rates
4. Get More Leads and Sales
Basically, everyone loves it

4. @itrogers
Before the technical stuff
Grab the low hanging fruit

5. @itrogers
Get on Cloudflare

6. @itrogershttps://support.cloudflare.com/hc/en-us/articles/205177068-Step-1-How-does-Cloudflare-work-

7. @itrogers
How to optimize WP for speed

8. @itrogers
1. Move to staging area
(Stuff is going to break)

9. @itrogers
2. Get your PageSpeed score

10. @itrogers
This score sucks
https://developers.google.com/speed/pagespeed/insights/

11. @itrogers
3. Configure Autoptimize
https://wordpress.org/plugins/autoptimize/

12. @itrogers
These settings will combine and minify all styles and scripts

13. @itrogers
Re-check your score

14. @itrogers
4. Optimize CSS Delivery

15. @itrogers
Copy combined CSS
wp-content/cache/autoptimize/css/autoptimize_40c6ca0fb6f1d8567998e3e689d33d85.css

16. @itrogers
https://jonassebastianohlsson.com/criticalpathcssgenerator/
Paste combined CSS here
Enter your site / staging area

17. @itrogers
https://jonassebastianohlsson.com/criticalpathcssgenerator/

18. @itrogers

19. @itrogers
Re-check your score

20. @itrogers
5. Remove render blocking JS

21. @itrogers
Async or defer?

22. @itrogers
http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

23. @itrogers
Async or Defer?
General Rules (results will vary)
1. If script doesn’t rely on other scripts, use async
2. If script relies upon other scripts, use defer
3. If script is relied upon from another script, use defer

24. @itrogers
Plugin: Async Javascript
https://wordpress.org/plugins/async-javascript/

25. @itrogers
Find the right combo that works for your site

26. @itrogers
Try Cloudflare Rocket Loader
https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-

27. @itrogers
Recommended Reading
1. http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
2. https://stackoverflow.com/questions/10808109/script-tag-async-defer
3. https://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

28. @itrogers
Re-check your score

29. @itrogers
6. Optimize Images

30. @itrogers
Pro Tip
Google gives you the optimized images (and other stuff if you need it)

31. @itrogers
For Future Images
1. Photoshop - Save For Web / Export
2. ShortPixel Image Optimizer - freemium / pay as you go

32. @itrogers
7. Enable Browser Caching

33. @itrogers
WP Rocket
https://wp-rocket.me/
W3 Total Cache
https://wordpress.org/plugins/w3-total-cache/

34. @itrogers
Re-check your score
(it should be way better now)

35. @itrogers
Other Tips

36. @itrogers
Other Page Speed Tips
1.Use a CDN
2.Lazy Load Images
3.Remove unused JS / CSS
4.Use a Managed WP Host
5.Upgrade your host

37. @itrogers
Thank you!