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/

Google

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!