Web performance introduction boston web performance meetup
-
Upload
jonathan-klein -
Category
Documents
-
view
883 -
download
7
description
Transcript of Web performance introduction boston web performance meetup
Boston Web Performance Meetup6/16/2010
Why Web Performance?
Faster sites boost conversion and help the bottom line
Where is the evidence?
Firefox
1 second improvement on landing page drives 10 million Firefox downloads/year.
Change all landing pages - 60 million additional downloads a year
Bing
2 second slowdown changed queries/user by -1.8% and revenue/user by -4.3%.
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
400 ms delay resulted in a -0.59% change in searches/user.
Shopzilla
Site overhaul shaved 5 seconds off of load time– 25% increase in page views– 7-12% increase in revenue– 50% reduction in hardware use
http://velocityconference.blip.tv/file/2290648/
What Does Load Time Mean?
• Two main pieces:– End to End Latency
• Time between user request and the final byte of the response.
– Render Time• Time between the last byte of the response and the
Document Complete event.
• E2E Latency + Render Time = Page Load Time– Time between a user clicking a link and the page
becoming usable.
Break It Down Further:
• DNS Lookup– Time to map the domain name (www.cookware.com) to an IP
address• Initial Connection
– Time to open a connection to the server and get an acknowledgement
• Wait Time– Time between initial connection and the first byte of the response
(time it takes the server to “cook” the page).• Content Download
– Time it takes to download the content that the server has finished creating
Time to First Byte (TTFB)
DNS Lookup + Initial Connection + Wait Time
measurement of server/network performance
What Affects Load Time?
• Do we attack E2E Latency or Render Time?– Both– 80-90% of load time takes place in the browser
• Server:– Optimize Code– Eliminate DB lookups– Reduce load on server (perhaps through caching)
Client Side Optimizations
• Reduce # of CSS/JS includes• Sprite images• Reduce # of cookies, make cookies smaller• Optimize JS code, reduce amount of it• Load resources asynchronously• Use a CDN• GZIP components• Minify CSS/JS• Avoid redirects and 404’s• Steve Souders: 14 rules for High Performance Web Sites
Three Buckets for the Frontend
1. Reduce the number of requests the browser has to make.
2. Reduce overall page weight (KB on the wire).
3. Make the browser do less work (executing code, painting, etc.).
JavaScript can be a HUGE problem
• Affects all three buckets (request it, download it, execute it).
• How do we fix it?– Use a library (YUI, JQuery, etc.) – Load it asynchronously– Progressively enhance
http://www.pcmag.com/article2/0,2817,2364858,00.asp
Tools/Books
Web:• WebPagetest - http://www.webpagetest.org/• Firebug - http://getfirebug.com/• YSlow - http://developer.yahoo.com/yslow/• PageSpeed - http://code.google.com/speed/page-speed/• Dynatrace AJAX Edition - http://ajax.dynatrace.com/pages/
Books:• High Performance Websites – Steve Souders• Even Faster Websites – Steve Souders• Website Optimization – Andrew B. King (includes SEO)
Conclusions
• Plenty of areas for improvement.• First timers - easy to make huge gains.• There is always more you can do.• Your users will love you (subconsciously in
some cases).
• Let’s figure out ways to make websites faster!