best practices for speeding up your web site
TRANSCRIPT
Best Practices for Speeding Up Your Web Site
Presenter: Tran Duc Minh
Performance Rule 80 / 20 in economic
Population / Wealth Population / Wealth0
10
20
30
40
50
60
70
80
9080
2020
80
Vilfredo Pareto principle (a.k.a the 80-20 rule)
PopulationWealth
Performance rule 80/20 in Web
Frontend op-timization
80%
Backend optimiza-tion20%
Optimized user response time
Time spent loading popular web sites
Time Retrieving HTML Time Elsewhere
Yahoo! 10% 90%
Google 25% 75%
MySpace 9% 91%
MSN 5% 95%
ebay 5% 95%
Amazon 38% 62%
YouTube 9% 91%
CNN 15% 85%
1) Make Fewer HTTP Requests
• Making your page fast for these first time visitors is key to a better user experience.
• Reducing the number of components in turn reduces the number of HTTP requests required to render the page.
1) Make Fewer HTTP Requests
• Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.
• CSS Sprites are the preferred method for reducing the number of image requests
1) Make Fewer HTTP Requests
• Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page
• Inline images use the data:URL scheme to embed the image data in the actual page. This can increase the size of your HTML document (not yet supported across all major browsers.)
2) Use a Content Delivery Network
• it's better to first serve your static content. This not only achieves a bigger reduction in response times
• A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.
2) Use a Content Delivery Network
• The server with the fewest network hops or the server with the quickest response time is chosen.
• Some CDN service providers like Akamai Technologies, Mirror Image Internet, or Limelight Networks
3) Add an Expires or a Cache-Control Header
There are two things in this rule:• For static components: implement "Never
expire" policy by setting far future Expires header
• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
4) Gzip Components
• Compression reduces response times by reducing the size of the HTTP response.
• Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.
Accept-Encoding: gzip, deflate
5) Put Stylesheets at the Top and Put Scripts at the Bottom
• Moving style sheets to the document HEAD makes pages appear to be loading faster
• While a script is downloading, the browser won't start any other downloads
6) Make JavaScript and CSS External
• Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser.
7) Minify JavaScript and CSS
• Remove unnecessary characters from code to reduce its size thereby improving load times.
• Use YUI Compressor, JSLint, Minify
7) Remove Duplicate Scripts
• It hurts performance and increases requests to include the same JavaScript file twice in one page.
8) Flush the Buffer Early
• In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser
• The browser can start fetching components while your backend is busy with the rest of the HTML page.
• The benefit is mainly seen on busy backends or light frontends.
9) Use GET for AJAX Requests
• When we use XMLHttpRequest for AJAX request, POST method is implemented in the browsers as a two-step process: sending the headers first, then sending data
• So it's best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies)
10) Optimize Images
• Check the GIFs and see if they are using a palette size corresponding to the number of colors in the image.
• Try converting GIFs to PNGs and see if there is a saving.
• Run pngcrush on all your PNGs.• Run jpegtran on all your JPEGs.
11) Don't Scale Images in HTML
• Don't use a bigger image than you need just because you can set the width and height in HTML.
• If you need <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> then your image should be 100x100px rather than a scaled down 500x500px image.
More Rules at Yahoo, Google
• http://developer.yahoo.com/performance• http://code.google.com/speed/page-speed/
docs/rules_intro.html
Thank you for your listening
Question