improve website performance
- 2. Topic to discuss: 1.What is The golden rule of performance. 2.Things we do. 3. Things We should do.
- 3. The golden rule of performance. For any phenomenon, 80% of the consequences come from 20% of the causes. : Vilfredo Pareto, an economist. In our case, 80% of the time is spent by the User depends on only 20% of the code.
- 4. Things we do. New database schema Optimised code Replicated architecture And so many huge complex task
- 5. What is front end? Everything after html document arrived to the browser: Like HTML, JavaScript CSS, parsing , JavaScript execution, network time for http request etc. 5 % of the user wait time was to get the html request and rest is used to download other things.
- 6. Time taken by yahoo.com.
- 7. Bad News !!! Browsers download only two to four components in parallel per hostname.
- 8. Time taken by top website. 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%
- 9. Empty and full cache summary to load yahoo.com
- 10. Things we should do! 1.Minimize HTTP Requests 1.1 CSS sprite 1.2 Combined Scripts, and StyleSheets 2.Add an Expires or a Cache-Control Header . There are two aspects to this rule: 2.1 For static components: implement "Never expire" policy by setting far future Expires header 2.2 For dynamic components: use an appropriate CacheControl header to help the browser with conditional requests 2.3 Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.
- 11. 3. Gzip Components Most web sites gzip their HTML documents. It's also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity. In fact, it's worthwhile to compress any text response including XML and JSON. Image and PDF files should not be gzipped because they are already compressed. 4.Put Stylesheets at the Top 5.Put Scripts at the Bottom
- 12. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. 6. Avoid CSS Expressions {background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );}
- 13. The problem with expressions is that they are evaluated more frequently than most people expect.
- 14. 7.Make JavaScript and CSS External Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
- 15. 8.Minify JavaScript and CSS Minification is the practice of removing unnecessary characters from code 9.Avoid Redirects 10.Use GET for AJAX Requests POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. 11. Remove Duplicate Scripts Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox.
- 16. 12. Use Cookie-free Domains for Components When the browser makes a request for a static image and sends cookies together with the request, the server doesn't have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.
- 17. WHERE DO WE STAND ??? http://www.pingdom.com/
- 18. THANK YOU FOR YOUR VALUABLE TIME