high performance web/mobile pages - automation

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