Making the web faster
8 likes4,148 views
The document outlines various strategies for improving website performance, including reducing HTTP requests, utilizing CDNs, and implementing gzip compression. It also discusses tools and techniques for measuring and optimizing performance, such as WebPageTest and Chrome Developer Tools. Key components include optimizing front-end and network layers for faster loading times.
![Real User Measurement
_gaq.push(['_trackPageLoadTime']);
8](https://image.slidesharecdn.com/makingthewebfaster-110629091053-phpapp02/85/Making-the-web-faster-8-320.jpg)
Making the web faster
- 1. Making the Web Faster National Capital Area Google Technology Users Group Patrick Meenan Twitter: @PatMeenan pmeenan@webpagetest.org 1
- 2. Waterfalls
- 3. Waterfall Components DNS HTTP Request Lookup Socket Content Connect Download 3
- 4. Front-End vs Back-End Base Page Back-End Processing 4
- 5. High Performance Websites 1. Make fewer HTTP requests 2. Use CDN 3. Add expires header 4. Gzip Components 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure Etags 14. Make Ajax cacheable 15. Sharding domains 5
- 10. Chrome Developer Tools 10
- 11. Optimization Checking 11
- 12. Page Speed • http://code.google.com/speed/page-speed/ • Chrome and Firefox Extensions 12
- 14. WebPagetest 14
- 15. Making it Faster – Network Layer 15
- 16. TCP Initial Congestion Window This: Is Really This (Current OS’s): 4K 8K 16K 32K Linux 2.6.39: 15K 30K … 16
- 17. SPDY • Multiplexed streams • Request prioritization • HTTP header compression • Server push • Server hint • 10-50% improvement in load times 17
- 18. TLS Improvements • False Start • Snap Start SSL Negotiation 18
- 19. Making it Faster – Front-End 19
- 20. mod_pagespeed http://code.google.com/speed/page-speed/docs/module.html • Apache module • GoDaddy • Dreamhost • Automatic Image Compression & Resizing • Minify CSS, JavaScript and HTML • Inline small images, CSS, and JavaScript • Cache Extension • CSS/Javascript Combining • Domain Mapping • Domain Sharding 20
- 21. mod_pagespeed improvement 21
- 22. androidacademy.com timeline (median of 50 runs) 22
- 23. Instant Pages http://youtu.be/_Jn93FDx9oI?hd=1 23
- 24. Instant Pages <link rel=prerender href=“…”> 24
- 25. WebPagetest 25
- 26. The basics – testing “pages” • www.webpagetest.org • Submit an URL….
- 27. From multiple locations globally… 27
- 28. The basics – get “results” Performance and optimization information
- 29. What it looks like
- 30. What it looks like
- 31. What if…
- 33. The comparison
- 34. Comparison Videos Filmstrip Video 34
- 35. More advanced capabilities Automating Rich Applications • Authenticating into form-protected applications • Interacting with Web Apps (Mail, Calendar, etc) • Testing a navigation flow from one page to another • Execute arbitrary Javascript REALLY Advanced Options • Re-writing DNS lookups (directing traffic to a test/staging box) • Custom User-Agent strings & HTTP Headers • Pre-populating cookies • Custom test end conditions • Capture Dynatrace Ajax Edition sessions • Tcpdump capture 35
- 36. Private Instances http://sites.google.com/a/webpagetest.org/docs/private-instances Bulk Testing EC2 Agent Public AMI’s • US (East/West) • Europe • Asia (Singapore/Tokyo) Public Projects • HTTP Archive • Blaze Mobitest
- 37. REST API Submit tests (API key required for public instance) • Check status • Fetch Result 1.XML 2.HAR http://sites.google.com/a/webpagetest.org/docs/advanced- features/webpagetest-restful-apis
- 38. WPT Monitor Tony Perkins (Sabre) http://www.webpagetest.org/forums/forumdisplay.php?fid=21