Automating Online Performance
Optimize your website speed
Soheil Seyfaie, Ph.D.Mintwise Inc.
Why?
Is your website driving customers away?
Why?
Is your website driving customers away?
We all hate slow pages
Why?
Is your website driving customers away?
We all hate slow pages
Online Performance = Business Performance
Page Speed Impact
Penalty of one-second delay:
3.5% decrease in conversion rate 2.1% drop in cart size 9.4% fewer page views 8.3% increase in bounce rate
Source: State of the Union: Ecommerce Page Speed and Web Performance – Fall 2013, Radware Report.
Bing Experiment
• 1 sec delay in Bing results in 2.8% drop in revenue, 2 sec in 4.3%
50ms - - - - - -200ms - - - -0.3% -0.4% 500500ms - -0.6% -1.2% -1.0% -0.9% 1200
1000ms -0.7% -0.9% -2.8% -1.9% -1.6% 19002000ms -1.8% -2.1% -4.3% -4.4% -3.8% 3100
Source: http://velocityconf.com/velocity2009/public/schedule/detail/8523
Page Stats
The average weight of web page today.
1.6 MB
Images (60%) Javascript(15%)
Other(25%)
Source: HTTP Archive
Optimization: Standard Methods1. Make fewer HTTP requests
– Combine files– Combine images with CSS sprite– Use data URLs
2. Use CDN3. Cache files (including Ajax)4. Put stylesheets at the top5. Put scripts at the bottom6. Avoid CSS expressions7. Avoid redirects8. Domain sharding9. Minify CSS/JS/HTML10. Use image compression11. Gzip components12. Use intelligent script loaders13. Load 3rd party assets asynchronously14. Pre-fetch assets
Optimization: Standard Methods1. Make fewer HTTP requests
– Combine files– Combine images with CSS sprite– Use data URLs
2. Use CDN3. Cache files (including Ajax)4. Put stylesheets at the top5. Put scripts at the bottom6. Avoid CSS expressions7. Avoid redirects8. Domain sharding9. Minify CSS/JS/HTML10. Use image compression11. Gzip components12. Use intelligent script loaders13. Load 3rd party assets asynchronously14. Pre-fetch assets
Due to HTTP/1.1 Limitations!
HTTP 1.1 Flaws
• Limited number of connections– Modern browsers support up to 6 connections to
a host (for all window tabs)• One request at a time per connection• Uncompressed HTTP Headers• Redundant Headers• Optional Data Compression• Exclusively client-initiated requests
HTTP 2.0 – Based on SPDY
Key Features:– Multiplexed Streams– SSL as the underlying transport protocol– Data/Header Compression– Redundant headers are removed
Advanced Features– Server Push– Server Hint
Few developers pay enough attention to online optimization.
How to optimize existing Web/Mobile sites?
Automating Web Performance
Server
Clie
nt Get Document
Existing Site
Server
Clie
nt Get Document
Existing Site
Server
Clie
nt
OptimizerGet Document
SmartCaching
Proxy Server
Automating Web Performance
Server
Clie
nt
OptimizerGet Document
SmartCaching
Proxy Server
Automating Web Performance
Platform Features
Node.JS platform
Supports HTTP/2.0 protocol
Dynamic content optimization
Payload reduction
Smart content caching
Image optimization
Results
Homepage
1.7 MB
Onload: 13.4s
Complete: 16.46s
Homepage
541.4 KB(70% improvement)
Onload: 7.9s
Complete: 10.26s