Web Perf Intro

Jeffery To

thingsthemselves.com

twitter: @jefferyto

slides: hre.ph/WebPerfIntro

Agenda

• Why Optimize?�
• What to Optimize�
• Best Practices�
• Resources�
• Summary

Why Optimize?

Negative Effects of Slowing Down

• Microsoft
• 1 second delay = 3% less revenue
• 2 second delay = over 4% less revenue�
• Google
• Negative effect gets worse with time
• There was an after-effect after speeds returned to normal�
• Yahoo
• 0.4 second delay = 5-9% drop in full-page traffic
• Users left before the page loaded completely

Positive Effects of Speeding Up

• Mozilla
• 2.2 second improvement = 15.4% more downloads
• After similar optimizations on other landing pages, estimated 60 million more downloads per year�
• Shopzilla - After reducing loading times from 6 seconds to 1.2 seconds
• Conversion rates increased by 7-12%
• Page views increased by 25%
• Paid search traffic increased by 8% in the US, 120% in the UK

What to Optimize

Loading www.yahoo.com with an empty cache�yuiblog.com/blog/2006/11/28/performance-research-part-1/

80/20 Performance Rule

• Golden rule: optimize front-end performance first, that's where 80% or more of the end-user response time is spent
• More potential for improvement in front-end
• Front-end improvement typically require less time and resources than back-end projects
• Front-end performance tuning proven to work�
• Front-end performance is the low hanging fruit of performance optimization

Percentage of Users and Page Views with an Empty Cache�yuiblog.com/blog/2007/01/04/performance-research-part-2/�

Empty Cache is Prevalent

• A significant number of users will always have an empty cache
• 40-60% of Yahoo!'s users have an empty cache experience
• 20% of all page views are done with an empty cache�
• Every user's first impression is with an empty cache

Best Practices

1. Minimize HTTP Requests

• Majority of 80% of end-user response time spent on downloading page components
• Images, stylesheets, scripts, Flash, etc.�
• Less components mean less HTTP requests�
• Techniques
• Combined script / stylesheet files
• CSS Sprites
• Image maps
• Inline images (data: URL scheme)

2. Use a Content Delivery Network

• CDN's servers will be closer to the user in terms of network proximity (fewest network hops, quickest response time, etc.)�
• Page components served from a CDN will load faster from user's perspective�
• Free / cheap providers available (Amazon CloudFront, CloudFlare), but in general only practical for larger sites / companies

3. Add an Expires or Cache-Control Header

• Improves experience for users with "primed cache"�
• Static components
• Set a far future Expires header, e.g. 10 years from current date
• Whenever the component changes, need to change its filename / pathname�
• Dynamic components
• Use appropriate Cache-Control header to help browser with conditional requests

4. Gzip Components

• Generally reduces response size by 70%�
• Gzip HTML documents and all text components
• Scripts, stylesheets, XML, JSON, etc.�
• Don't gzip files that are in a compressed / binary format
• Images, videos, PDFs, MP3s, etc.

5. Put Stylesheets at the Top

• Moving stylesheets to document HEAD makes pages appear to be loading faster�
• Allows the page to render progressively
• As the browser parses the rest of the page, downloads images, etc., it already has style information to render�
• Gives the user visual feedback that the page is loading

6. Put Scripts at the Bottom

• In older browsers, IE6-7 in particular, scripts are loaded sequentially and block all other downloads in the page�
• Nothing below the script is rendered until the script is done loading�
• Moving scripts to the bottom of the page, just before </body>, mitigates these issues

7. Avoid CSS Expressions

• Used to set CSS properties dynamically with JavaScript
• width: expression(� document.body.clientWidth > 960 ?� '960px' : 'auto'�);�
• But are evaluated extremely often
• On page render, window resize, page scroll, mouse move, etc.�
• Use event handlers to set CSS instead

8. Make JavaScript and CSS External

• Generally preferable to make scripts and stylesheets external so they can be cached by the browser�
• May be better to inline for home pages and other pages that have few / one page views per session

9. Reduce DNS Lookups

• The browser needs to perform a DNS lookup for each unique hostname in the page, blocking all downloads from that hostname�
• But unique hostnames can be used to induce parallel downloads�
• Use 2-5 unique hostnames to balance between reducing DNS lookups and increasing parallel downloads

10. Minify JavaScript and CSS

• "Minifying" code refers to removing unnecessary characters (most whitespace) to reduce file size and load times
• Can also enhance gzip compression�
• JS can be further "optimized" by using shortened variable names, other changes
• E.g. replace foo['bar'] with foo.bar�
• Best handled using automated tools

11. Avoid Redirects

• A redirect adds an extra HTTP request-response cycle and slows down the user experience
• In particular, the server will issue redirects to add trailing slashes to URL directory names�
• If necessary, HTTP redirects (301 or 302) are handled more efficiently by the browser than meta or JavaScript redirects

12. Remove Duplicate Scripts

• It happens, particularly when a site / page is maintained by multiple people�
• All browsers evaluate the script twice, IE fetches the script twice

13. Configure ETags

• Entity tags are strings used to check whether a component in the browser's cache matches the one on the server
• Apache: inode-size-timestamp
• IIS: Filetimestamp-ChangeNumber�
• For sites with multiple servers, the ETag from each server will most likely not match�
• Better to remove ETag and rely on the Last-Modified header

14. Make Ajax Cacheable

• Ajax responses should also be optimized�
• Making responses cacheable most important
• Add an Expires of Cache-Control Header�
• Also applicable
• Gzip Components
• Reduce DNS Lookups
• Minify JavaScript and CSS
• Avoid Redirects
• Configure ETags

Resources

Web Performance Reading

• Best Practices for Speeding Up Your Web Site - developer.yahoo.com/performance/rules.html�
• Web Performance Best Practices�code.google.com/speed/page-speed/docs/rules_intro.html�
• The 7 Habits of Exceptional Performance�developer.yahoo.com/blogs/ydn/posts/2008/01/the_7_habits_fo/

Web Performance Reading (cont.)

• The Performance Business Case - Book of Speed - www.bookofspeed.com/chapter1.html�
• Steve Souders - stevesouders.com�
• Planet Performance - www.perfplanet.com

Development Reading

• CSS Sprites - www.alistapart.com/articles/sprites�
• Caching Tutorial for Web Authors and Webmasters - www.mnot.net/cache_docs/�
• How Browsers Work�www.html5rocks.com/en/tutorials/internals/howbrowserswork/�
• Evolution of Script Loading�www.stevesouders.com/blog/2010/12/06/evolution-of-script-loading/

Performance Analysis Tools

• YSlow - developer.yahoo.com/yslow/�
• Page Speed�code.google.com/speed/page-speed/docs/overview.html�
• Timeline view
• Firebug (getfirebug.com)
• Developer Tools / Web Inspector (built-in)
• Fiddler (www.fiddler2.com/fiddler2/)�
• dynaTrace AJAX Edition - ajax.dynatrace.com

Development Tools

• CSS Sprite Generator (by Project Fondue)�spritegen.website-performance.org�
• Minification / optimization
• Closure Compiler (JS)�code.google.com/closure/compiler/
• YUI Compressor (CSS, JS)�developer.yahoo.com/yui/compressor/
• UglifyJS (JS) - github.com/mishoo/UglifyJS�
• HTML5 Boilerplate - html5boilerplate.com

Summary

Summary

• Speed is a feature�
• Optimize front-end performance first�
• Analyze timeline, then apply the most relevant rules�
• Have fun!

Questions?

Thanks! :-)

Jeffery To

thingsthemselves.com

twitter: @jefferyto

slides: hre.ph/WebPerfIntro