How to improve your website performance

Tips and techniques that can dramatically increase your site performance:
- Why speed matters.
- How you can measure it – Tools to measure your page speed.
- Ways to improve it – Best practices for optimization.
- I’ll also discuss Google’s Mobile Page Speed Update 2018 and if you should AMP-lify your web site.

Transcript

1. How to improve your website performance
2. Hello WordCampers! I help companies to grow their business through fast and engaging websites. I’m Mike Rynart Find me at @mikerynart and mikerynart.com
3. How to Speed up your Website and Outrank your Competition 1. Mobile-only Mindset 2. Measure performance 3. Optimize for speed 4. Automate performance 5. AMPlify your site
4. Source: Statcounter.com
5. Source: thinkwithgoogle.com 53% of mobile site visitors leave after 3 seconds of load time
6. Source: Google Research, Webpagetest.org 15 seconds is the average load time for mobile sites on 4G networks
7. “Speed is the most important feature” - Fred Wilson
8. Fast websites Make More Money UX SEO Bounce rate Page views Conversions
9. https://www.thinkwithgoogle.com/
10. https://wpostats.com/ Amazon Sales dropped by 1% for every 100ms page load slowdown
11. https://wpostats.com/
12. Google Speed Update https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html Live July 2018
13. How to make your mobile site suck less?
14. https://miamitouristguide.com
15. “If You Can’t Measure It, You Can’t Improve It” - Peter Drucker
16. Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ Page Speed Score 80+ is good
17. http://www.gtmetrix.com GTmetrix Total Page Size: Lower is Better Target < 500 KB
18. DEV Tools https://developer.chrome.com/devtools Request count: Less is Better Target < 50
19. https://developer.chrome.com/devtools TTFB Time to first byte: Lower is Better Target below 1.3 seconds
20. Lighthouse https://developers.google.com/web/tools/lighthouse/ Chrome 65 Chrome Audit tab
21. WebPageTest https://webpagetest.org/easy - Moto G4 - Chrome - 4G Clear metrics and reporting
22. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics
23. WebPageTest waterfall
24. Film strip recording https://www.webpagetest.org/video/compare.php?tests=ID1, ID2
25. Key Performance Metrics https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics Some key metrics that are important to you for mobile. • SpeedIndex (calculated metric - target < 3000 for mobile) • Total Page Size (Target < 500 KB) • Server Request Count (Target < 50) • Time to first byte (Target below 1.3 seconds) • Load Time (5 seconds or less on 3G)
26. “What you Optimize today can improve all your tomorrows.” - Unknown
27. Clean Your House
28. Merge + Minify
29. Autoptimize https://wordpress.org/plugins/autoptimize/ Helps optimize your HTML, CSS styles and JS scripts
30. Images https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
31. Imagify https://wordpress.org/plugins/imagify/ Imagify Image Optimizer: Image compression tool makes lighter images without losing quality.
32. Cache and Compress https://wordpress.org/plugins/wp-super-cache/ WP Super Cache: Turns Dynamic into Static to Speed Up Your Site
33. Hosting
34. “The most powerful tool we have as developers is Automation” - Scott Hanselman
35. https://speedcurve.com Performance Budgets
36. https://speedcurve.com Development vs Production
37. https://speedcurve.com SpeedCurve
38. https://www.thinkwithgoogle.com/feature/mobile/ Google Scorecard Speed: 5 seconds or less on mobile devices with 3G connections
39. “There is more to life than increasing its Speed” - Mahatma Gandhi
40. https://www.ampproject.org/amp-conf/
41. https://wordpress.org/plugins/amp/
42. Google Search Console https://search.google.com/search-console/amp
43. https://www.ampproject.org/ ⚡AMP Average mobile sites Optimized Site ⚡AMP
44. Takeaways 2. Measure Performance Speed index, Load Time, File size, First Byte, Start rendering 1. Mobile Web Speed is King Better SEO Rankings, Happier Customers, More sales 3. Plan to Optimize for Mobile Web Speed Optimize, Cache, Compress 4. Automate web performance Audit, benchmark and set performance budgets 5. AMPlify WordPress Google Accelerated Mobile Pages
45. Thank you Any questions about web performance? Find me at @mikerynart and mikerynart.com