high performance web/mobile pages - automation
DESCRIPTION
TRANSCRIPT
![Page 1: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/1.jpg)
Automating Online Performance
Optimize your website speed
Soheil Seyfaie, Ph.D.Mintwise Inc.
![Page 2: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/2.jpg)
Why?
Is your website driving customers away?
![Page 3: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/3.jpg)
Why?
Is your website driving customers away?
We all hate slow pages
![Page 4: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/4.jpg)
Why?
Is your website driving customers away?
We all hate slow pages
Online Performance = Business Performance
![Page 5: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/5.jpg)
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.
![Page 6: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/6.jpg)
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 7: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/7.jpg)
Page Stats
The average weight of web page today.
1.6 MB
Images (60%) Javascript(15%)
Other(25%)
Source: HTTP Archive
![Page 8: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/8.jpg)
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
![Page 9: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/9.jpg)
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!
![Page 10: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/10.jpg)
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
![Page 11: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/11.jpg)
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
![Page 12: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/12.jpg)
Few developers pay enough attention to online optimization.
![Page 13: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/13.jpg)
How to optimize existing Web/Mobile sites?
![Page 14: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/14.jpg)
Automating Web Performance
![Page 15: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/15.jpg)
Server
Clie
nt Get Document
Existing Site
![Page 16: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/16.jpg)
Server
Clie
nt Get Document
Existing Site
![Page 17: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/17.jpg)
Server
Clie
nt
OptimizerGet Document
SmartCaching
Proxy Server
Automating Web Performance
![Page 18: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/18.jpg)
Server
Clie
nt
OptimizerGet Document
SmartCaching
Proxy Server
Automating Web Performance
![Page 19: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/19.jpg)
Platform Features
Node.JS platform
Supports HTTP/2.0 protocol
Dynamic content optimization
Payload reduction
Smart content caching
Image optimization
![Page 20: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/20.jpg)
Results
![Page 21: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/21.jpg)
Homepage
1.7 MB
Onload: 13.4s
Complete: 16.46s
![Page 22: High Performance Web/Mobile Pages - Automation](https://reader035.vdocuments.net/reader035/viewer/2022062613/5455ccddaf795998788b4a74/html5/thumbnails/22.jpg)
Homepage
541.4 KB(70% improvement)
Onload: 7.9s
Complete: 10.26s