Top Banner
Web Performance Optimization stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
39

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

Dec 14, 2015

Download

Documents

Kirk Coster
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Web Performance

Optimization

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

Page 2: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

drives traffic

improves UX

increases revenue

reduces costs

Web

Performance

OptimizationWPO

Page 3: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

backend frontend

“waterfall chart”

Page 4: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Top 10

24% - backend

76% - frontend

Page 5: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

10,000+

8% - backend

92% - frontend

Page 6: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

SPOF

Page 7: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 8: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

async

#fail

async

async

sync

Page 9: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 10: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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

Page 11: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 12: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 13: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 14: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 15: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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

Page 16: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 17: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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

Page 18: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 19: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Mobile State Machine

?

Page 20: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 21: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

www.intuit.com

www.webpagetest.org/result/120503_RC_46SJA/

125

1,847

1.587

9.651

requests

kB

seconds start render

seconds PLT

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

rendering

don’t docwrite scripts

domain sharding

PNGs take 3-6 seconds to download

Page 22: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

quickbooks.intuit.com

www.webpagetest.org/result/120503_B9_46SJB/

106

632

1.265

5.740

requests

kB

seconds start render

seconds PLT

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

rendering

don’t docwrite scripts

domain sharding

add caching headers

Page 23: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

turbotax.intuit.com

www.webpagetest.org/result/120503_ZV_46SJC/

112

438

2.412

3.523

requests

kB

seconds start render

seconds PLT

rendering extremely blocked

concat scripts, concat stylesheets

don’t mix inline & external scripts

don’t docwrite scripts

domain sharding

add caching headers

sprites

Page 24: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

turbotax.intuit.com

www.webpagetest.org/compare

this is turbotax

this is turbotax on Page Speed

Page 25: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 26: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 27: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Page 28: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Caching

Page 29: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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

adoption is slow

Page 31: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Why so few caching headers?

resources are dynamic

lack of awareness

Page 32: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

“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: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

44%

35%

“uncacheable” resources are LESS dynamic

2 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: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

36% of resources unchanged after 1 month

only 11% of resources cacheable for > 1 month

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

Page 35: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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

40-60% of users missing cacheable resources

20% of page views

Page 36: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

* 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: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

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: Stevesouders.com/docs/ny-meetup-20120620.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

what can we do?

• gather more/better stats

• make caches bigger (and fix corruption)

• improve purging logic (mime type, etc.)

• more intelligent, personalized browsers