+ All Categories
Home > Documents > Web Performance Optimization

Web Performance Optimization

Date post: 24-Feb-2016
Category:
Upload: rufus
View: 46 times
Download: 0 times
Share this document with a friend
Description:
Web Performance Optimization. stevesouders.com /docs/ny- meetup -20120620. pptx. Disclaimer: This content does not necessarily reflect the opinions of my employer. Web Performance Optimization. WPO. drives traffic improves UX increases revenue reduces costs. backend. frontend. - PowerPoint PPT Presentation
Popular Tags:
39
Web Performance Optimization stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Transcript
Page 1: Web Performance Optimization

Web Performance

Optimization

stevesouders.com/docs/ny-meetup-20120620.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.

Page 2: Web Performance Optimization

drives traffic

improves UX

increases revenue

reduces costs

Web

Performance

OptimizationWPO

Page 3: Web Performance Optimization

backend frontend

“waterfall chart”

Page 4: Web Performance Optimization

Top 10

24% - backend

76% - frontend

Page 5: Web Performance Optimization

10,000+

8% - backend

92% - frontend

Page 6: Web Performance Optimization

SPOF

Page 7: Web Performance Optimization
Page 8: Web Performance Optimization

async

#fail

async

async

sync

Page 9: Web Performance Optimization
Page 10: Web Performance Optimization

blog.catchpoint.com/2012/06/01/facebook-outage-wake-up-call-for-websites/

Page 11: Web Performance Optimization
Page 12: Web Performance Optimization
Page 13: Web Performance Optimization
Page 14: Web Performance Optimization
Page 15: Web Performance Optimization

www2012.wwwconference.org/proceedings/proceedings/p41.pdf

Page 16: Web Performance Optimization
Page 17: Web Performance Optimization

research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient

Page 18: Web Performance Optimization
Page 19: Web Performance Optimization

Mobile State Machine

?

Page 20: Web Performance Optimization
Page 21: Web Performance Optimization

www.intuit.com

www.webpagetest.org/result/120503_RC_46SJA/

125

1,847

1.587

9.651

requests

kB

seconds start render

seconds PLTmbox.js docwrites /mbox/standard blocks ie7.css blocks

rendering

don’t docwrite scripts

domain sharding

PNGs take 3-6 seconds to download

Page 22: Web Performance Optimization

quickbooks.intuit.com

www.webpagetest.org/result/120503_B9_46SJB/

106

632

1.265

5.740

requests

kB

seconds start render

seconds PLTmbox.js docwrites /mbox/standard blocks ie7.css blocks

rendering

don’t docwrite scripts

domain sharding

add caching headers

Page 23: Web Performance Optimization

turbotax.intuit.com

www.webpagetest.org/result/120503_ZV_46SJC/

112

438

2.412

3.523

requests

kB

seconds start render

seconds PLTrendering extremely blocked

concat scripts, concat stylesheets

don’t mix inline & external scripts

don’t docwrite scripts

domain sharding

add caching headers

sprites

Page 24: Web Performance Optimization

turbotax.intuit.com

www.webpagetest.org/compare

this is turbotax

this is turbotax on Page Speed

Page 25: Web Performance Optimization
Page 26: Web Performance Optimization
Page 27: Web Performance Optimization
Page 28: Web Performance Optimization

Caching

Page 29: Web Performance Optimization

http://httparchive.org/interesting.php#max-age

HTTP Archive: 54K URLs, 4.6M resources

55% - NO caching headers

18% - cacheable < 1 day } 73%

Page 30: Web Performance Optimization

http://httparchive.org/trends.php?s=intersection

adoption is slow

Page 31: Web Performance Optimization

Why so few caching headers?

resources are dynamic

lack of awareness

Page 32: Web Performance Optimization

“uncacheable” resources aren’t very dynamic

2 weeks is a long gap - daily would be higher

46%38%

Jan 15

46%

Feb 1 Feb 15

55% uncacheable

same as Jan 15 same as Jan 15

http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

Page 33: Web Performance Optimization

44%35%

“uncacheable” resources are LESS dynamic2 weeks: 46% (uncacheable) vs. 44% (all)

4 weeks: 38% (uncacheable) vs. 35% (all)

who votes for “lack of awareness”?

Jan 15

46%

Feb 1 Feb 15

same as Jan 15 same as Jan 15

all resources

Page 34: Web Performance Optimization

36% of resources unchanged after 1 month

only 11% of resources cacheable for > 1 monthhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

Page 35: Web Performance Optimization

http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/

40-60% of users missing cacheable resources20% of page views

Page 36: Web Performance Optimization

* Based on available disk space – I had 50 GB free.

(my) browser cache sizes:• Chrome: 320 MB (cap)*

• IE 9: 250 MB

• IE 7-8: 50 MB

• Firefox 11: 830 MB*

• Opera 11: 20 MB

• iPhone 4: 30-35 MB

• Galaxy Nexus: 18 MB

Page 37: Web Performance Optimization

https://plus.google.com/103382935642834907366/posts/XRekvZgdnBb

Chrome for Windows stats:

• 30% (48%?) of users have a full cache

• full cache users reach that point after 4 hours of active browsing

(20 clock hours)

• 7% of users clear their cache 1+ per week

• 19% of users experience “fatal cache corruption” 1+ per week

Page 38: Web Performance Optimization

https://plus.google.com/103382935642834907366/posts/XRekvZgdnBb

recap:

• resource owners underutilize max-age

• users are often missing cacheable resources

• cache sizes are small; caches fill quickly

Page 39: Web Performance Optimization

what can we do?

• gather more/better stats

• make caches bigger (and fix corruption)

• improve purging logic (mime type, etc.)

• more intelligent, personalized browsers


Recommended