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...
Bing Experiment

50ms
200ms
-0.3% -0.4%
500ms
-0.6% -1.2% -1.0% -0.9%
1000ms -0.7% -0.9% -2.8% -1.9% -1.6%
2000ms -1.8% -2...
Page Stats

1.6 MB
The average weight of web page today.
Images (60%)

Javascript
(15%)

Source: HTTP Archive

Other
(25%)
Optimization: Standard Methods
1.

Make fewer HTTP requests
– Combine files
– Combine images with CSS sprite
– Use data UR...
Optimization: Standard Methods
1.

Make fewer HTTP requests
– Combine files
– Combine images with CSS sprite
– Use data UR...
HTTP 1.1 Flaws
• Limited number of connections
– Modern browsers support up to 6 connections to
a host (for all window tab...
HTTP 2.0 – Based on SPDY
Key Features:
– Multiplexed Streams
– SSL as the underlying transport protocol
– Data/Header Comp...
Few developers pay enough
attention to online optimization.
How to optimize existing
Web/Mobile sites?
Automating Web Performance
Client

Existing Site

Get Document

Server
Client

Existing Site

Get Document

Server
Automating Web Performance
Proxy Server

Client

Optimizer
Get Document

Server
Smart
Caching
Automating Web Performance
Proxy Server

Client

Optimizer
Get Document

Server
Smart
Caching
Platform Features
 Node.JS platform
 Supports HTTP/2.0 protocol
 Dynamic content optimization
 Payload reduction
 Sma...
Results
Homepage

1.7 MB
Onload: 13.4s

Complete: 16.46s
Homepage

541.4 KB
(70% improvement)

Onload: 7.9s
Complete: 10.26s
Upcoming SlideShare
Loading in …5
×

High Performance Web/Mobile Pages - Automation

212 views
145 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
212
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

High Performance Web/Mobile Pages - Automation

  1. 1. Automating Online Performance Optimize your website speed Soheil Seyfaie, Ph.D. Mintwise Inc.
  2. 2. Why? Is your website driving customers away?
  3. 3. Why? Is your website driving customers away? We all hate slow pages
  4. 4. Why? Is your website driving customers away? We all hate slow pages Online Performance = Business Performance
  5. 5. 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.
  6. 6. Bing Experiment 50ms 200ms -0.3% -0.4% 500ms -0.6% -1.2% -1.0% -0.9% 1000ms -0.7% -0.9% -2.8% -1.9% -1.6% 2000ms -1.8% -2.1% -4.3% -4.4% -3.8% (in Tim et o cre C lick ase in m s) on isfa c ti Sat Dis t in Qu c t e ri es/ Us Qu er e ry Re fin em en Re t ven ue /U ser An yC lick s • 1 sec delay in Bing results in 2.8% drop in revenue, 2 sec in 4.3% 500 1200 1900 3100 Source: http://velocityconf.com/velocity2009/public/schedule/detail/8523
  7. 7. Page Stats 1.6 MB The average weight of web page today. Images (60%) Javascript (15%) Source: HTTP Archive Other (25%)
  8. 8. Optimization: Standard Methods 1. Make fewer HTTP requests – Combine files – Combine images with CSS sprite – Use data URLs 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Use CDN Cache files (including Ajax) Put stylesheets at the top Put scripts at the bottom Avoid CSS expressions Avoid redirects Domain sharding Minify CSS/JS/HTML Use image compression Gzip components Use intelligent script loaders Load 3rd party assets asynchronously Pre-fetch assets
  9. 9. Optimization: Standard Methods 1. Make fewer HTTP requests – Combine files – Combine images with CSS sprite – Use data URLs 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Use CDN Cache files (including Ajax) Put stylesheets at the top Put scripts at the bottom Avoid CSS expressions Avoid redirects Domain sharding Minify CSS/JS/HTML Use image compression Gzip components Use intelligent script loaders Load 3rd party assets asynchronously Pre-fetch assets
  10. 10. 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
  11. 11. 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
  12. 12. Few developers pay enough attention to online optimization.
  13. 13. How to optimize existing Web/Mobile sites?
  14. 14. Automating Web Performance
  15. 15. Client Existing Site Get Document Server
  16. 16. Client Existing Site Get Document Server
  17. 17. Automating Web Performance Proxy Server Client Optimizer Get Document Server Smart Caching
  18. 18. Automating Web Performance Proxy Server Client Optimizer Get Document Server Smart Caching
  19. 19. Platform Features  Node.JS platform  Supports HTTP/2.0 protocol  Dynamic content optimization  Payload reduction  Smart content caching  Image optimization
  20. 20. Results
  21. 21. Homepage 1.7 MB Onload: 13.4s Complete: 16.46s
  22. 22. Homepage 541.4 KB (70% improvement) Onload: 7.9s Complete: 10.26s

×