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.
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%
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/
