Presentation from Selecting and deploying automated optimization solutions talk at Velocity 2012

1. Automated Frontend
Optimization
Patrick Meenan
pmeenan@webpagetest.org
@patmeenan

2. Front-End Optimization Automation

3. HTML Rewriting
Op
timiz
ed
H TM
L
Slow, Generic HTML
Web Server
Pixie Dust
Users
http://www.flickr.com/photos/damongman/5336979798/

4. HTML Rewriting Solution Providers

5. Provider Proxies (HTML Rewriting)
All Web
Traffic Web Server
Rewriting
Proxy Web Server
Users
Web Server
Amazon Silk
AOL Client
Opera Mini
Mobile Carriers
Satellite ISP’s
…

6. In-App Acceleration
Op
timiz
ed
HT
ML Web Server
Application Logic
Acceleration Plugin
Users

7. Others
 Javascript Tag Management
 Javascript Libraries/Loaders

8. When to Automate

9. Less Like
http://www.flickr.com/photos/finklez/5561579060/

10. More Like
http://www.flickr.com/photos/finklez/5561579060/

11. Best for Machines
 Browser-specific optimizations
- Image Inlining (Data URI’s)
- Image Transcoding (WebP)
- Responsive Images
 Process Automation
- Image resizing
- Cache Extension
 Preventing human error
- Minimum compression levels for images
 Algorithmic Optimizations
- Path prediction (resource preloading)
- Predictive Page Delivery http://www.flickr.com/photos/31112252@N00/5331463993/

12. Humans rule!
 Evaluating content
- Removing content
- Prioritizing content
- Re-architecting pages
- Design
 Code/Application Logic
- Refactoring code
- Javascript Dependencies
 Image Optimization
- Selecting appropriate image format
- Maximizing image compression
http://www.flickr.com/photos/philhawksworth/4031165773/

13. Automation Architectures

14. Cloud Solutions
DNS
Origin
Acceleration
Provider
Users

15. Cloud Solution Providers
 Akamai (Blaze.io)
 Cloudflare
 Google (Page Speed Service)
 Limelight (Acceloweb)
 Level 3 (Strangeloop)
 Strangeloop
 Torbit
 Yottaa

16. On-Premises Solutions
Data Center
FEO Web Server
FEO Web Server
Appliance
Users

17. On-Premises Solution Providers
 F5
 Google (mod_pagespeed)
 Riverbed (Aptimize)
 Strangeloop

18. Architecture Fit
http://www.flickr.com/photos/epublicist/3546059144/

19. Cloud Solution
DNS
Site 1
Load Balancers App Servers
Load Balancers App Servers
FEO
Users
Site 2

20. On-Premises
DNS
Site 1
Load Balancers App Servers
FEO
FEO
Load Balancers App Servers
FEO
FEO
Users
Site 2

21. On-Premises
DNS
Site 1
Load Balancers App Servers
FEO
FEO
Load Balancers App Servers
FEO
Users FEO
Site 2

22. On-Premises
DNS
Site 1
Load Balancers App Servers
FEO
FEO
Load Balancers App Servers
FEO
Users FEO
Site 2

23. On-Premises
DNS
Site 1
Load Balancers App Servers
FEO
FEO
Load Balancers App Servers
FEO
Users FEO
Site 2

24. With Great Power…yeah
http://www.flickr.com/photos/75001512@N00/5791894429/

25. Code Deployments

26. When something goes wrong

27. Data Security
http://www.flickr.com/photos/75001512@N00/5791894429/

28. Measure First
http://www.flickr.com/photos/endlisnis/174511509/

29. Synthetic Testing
Actual
Users
Backbone
Testing

30. Real User Measurement
Google Analytics
Torbit
Compuware
(dynaTrace)
LogNormal
New Relic
Web Tuna
Compuware (Gomez)

31. Google Booth - Talks
Tuesday, June 26 - Morning Break
10:15 – 10:30 : Site Speed Reports in Google Analytics: Measuring your website’s performance
Afternoon Break
3:10 – 3:25 : Measuring user perceived latency with Google Analytics Site Speed reports:
hands-on demo and insights
3:30 – 3:45 : Async Scripts and why you care, particularly for third-party content
Wednesday, June 27th - Morning Break
10:00 – 10:15 : PageSpeed Automatic Optimizations
10:15 – 10:30 : PageSpeed Insights for Chrome with mobile support – Demo
Afternoon Break
3:10 – 3:25 : Measuring Web Performance
3:30 – 3:45 : HTTP Streaming – discuss the true latency bottleneck with
bi-directional HTTP streaming and “full-duplex HTTP”

32. Google Booth - Office Hours
Tuesday, June 26 - Afternoon Break
3:10 – 3:50 : Q&A: Your Chrome Wishlist, Suggestions and Questions
Wednesday, June 27 - Morning Break
10:00 – 10:30 : Q&A: Performance monitoring with Google Analytics

33. Thank You!
PatMeenan@gmail.com
@PatMeenan