Web performance Speed matters
Download as PPTX, PDF0 likes258 views
This document discusses various metrics, tools, and techniques for measuring and improving website performance. It outlines common metrics like first byte, first paint, and page load time. It also lists popular profiling tools like WebPageTest, FireBug, and Chrome Developer Tools. Additionally, the document discusses the differences between synthetic monitoring and real user monitoring. Finally, it provides recommendations for performance best practices such as reducing page size, optimizing images, leveraging caching, and optimizing JavaScript.
Web performance Speed matters
- 11. Metrics • First Byte • First Paint • On Load (TTI) • Page Complete • Navigation Timing Model • http://www.w3.org/TR/navigation-timing/#processing-model
- 12. Profiling Tools • WebPageTest • FireBug • Chrome Developer Tools • Yslow • Google PageSpeed Performance Practices Checklist • http://webdevchecklist.com/
- 13. Synthetic Monitoring • Keynote • Gomez • WebPageTest Local Real User Monitoring • Akamai RUM • AppDynamics EUM
- 14. • Is my site up? • How fast is my site? • Are transactions working? • If there is a slow down or failure where is it in the infrastructure? • Are my third party components operating correctly? • How is my overall performance?
- 16. • What are users actually doing on the site-traffic flow? • What is the performance of the pages, and which components are slowest? • Are SLA’s met ? • Did my latest release affect the user experience? • How does the user experience tie back to other areas of the company such as support?
- 17. Features Synthetic Monitori ng Real User Monitorin g Test a new feature before deploying to prod Ensure application is up and running 24/7 Test the performance on a new market/geography Monitor web third party APIs Determine the impact of slowness or failure on real users Resolve support issues Monitor Transactional Performance API performance Monitor all traffic /real users
- 19. • Fewer Requests • Smaller Requests • Image compression • Reduce network Round trips • AJAX requests • Caching • Leverage Browser Caching • CDN Caching (Akamai) • Optimize Browser Processing • Optimize JavaScript • Analyze front end rendering • Optimize DOM
- 21. PNG24 Size: 512 KB Colors: 148,279 PNG24 Size: 188 KB Colors: 256 63% smaller Image Optimizations
- 22. Smaller Images PNG24 100 x 100 Size: 19 KB Colors: 9,138 PNG8 100 x 100 Size: 8 KB Colors: 256 55.8% smaller
- 23. 90% Savings!!! PNG24 320 x 568 Size: 100 KB JPEG 320 x 568 Size: 10 KB Image Formats
- 24. Books Web
- 26. • Books • High Performance Web Sites – Steve Souders – O’Reilly • Even Faster Web Sites – Steve Souders – O’Reilly • Web • HTTP Archive (http://httparchive.org/) • Web Page Test (http://www.webpagetest.org/)