high performance website
TRANSCRIPT
![Page 1: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/1.jpg)
High Performance Website
Chhorn Chamnap
30 April 2011
1
![Page 2: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/2.jpg)
About Me
• Chhorn Chamnap
• Senior Developer at Yoolk Inc.
• Blog: http://chamnapchhorn.blogspot.com/
=> http://blog.placexpert.com/
• Twitter: @chamnap
• Email: [email protected]
2
![Page 3: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/3.jpg)
The 80/20 Performance Rule
• A theory from Vilfredo Pareto, an economist in the early 1900s.
• 80% of the consequences come from 20% of the causes.
• 80% of the time is spent in only 20% of the code.
• Focus on the 20% that affects 80% of the end-user response time.
• Start from the front end.
3
![Page 4: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/4.jpg)
1. Minimize HTTP Requests
• 80% of the end-user response time is spent on the front-end
Loading http://www.yahoo.com/ Time spent loading popular web sites
4
![Page 5: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/5.jpg)
1. Minimize HTTP Requests
• Solutions
– Combined scripts and stylesheets
– CSS Sprites
– Image maps
– Browser Cache Usage - 40-60% of daily visitors to your site come in with an empty cache.
5
![Page 6: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/6.jpg)
Combined Scripts and Stylesheets
• Combining six scripts into one eliminates five HTTP requests
• http://stevesouders.com/examples/combo.php6
![Page 7: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/7.jpg)
Image maps
• Combine multiple images into a single image.• client-side – preferred
<img usemap%="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
…
</map>
• drawbacks:– must be contiguous– defining area coordinates – tedious, errors
• http://www.w3.org/TR/html401/struct/objects.html#h-13.6• http://stevesouders.com/examples/rule-min-http.php
7
![Page 8: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/8.jpg)
CSS Sprites
• The preferred method for reducing the number of image requests
• Combine into a single image and use background-image and background-position properties to display.
<span style="
background-image: url('sprites.gif');
background-position: -260px -90px;">
</span>
• http://stevesouders.com/examples/sprites.php
8
![Page 9: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/9.jpg)
Content Delivery Network
How does CDN work?
9
![Page 10: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/10.jpg)
2. Use a Content Delivery Network
• The user's proximity has an impact on response times.
• Solutions– Use a CDN: Akamai Technologies, EdgeCast, Amazon
CloudFront, or level3.
– Distribute your static content before distributing your dynamic content.
• At Yahoo!, using a CDN improved response times >= 20%.
• http://stevesouders.com/examples/rule-cdn.php
10
![Page 11: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/11.jpg)
3. Add an Expires or a Cache-Control Header
• Implement "Never expire" policy for all static components.
• Avoids unnecessary HTTP requests on subsequent page views after the first visit.
• How to expire the cache?yahoo_2.0.6.js
css_based.css?30042011
• http://stevesouders.com/examples/rule-expires.php
HTTP/1.1 200 OK
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Content-Length: 12195
11
![Page 12: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/12.jpg)
Empty vs. Full Cache
Loading http://www.yahoo.com/
12
![Page 13: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/13.jpg)
13
![Page 14: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/14.jpg)
Expires Header Configuration
• Apache
ExpiresDefault "access plus 10 years"
• Nginxif ($request_filename ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|swf)$) {
expires max;
break;
}
14
![Page 15: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/15.jpg)
4. Gzip Components
• Reduces response times.
• The response size ~ 70% reduction.
• 90%+ of browsers support gzip.
• Compress any text responses
• Image and PDF files SHOULD NOT be gzipped.
• http://stevesouders.com/examples/rule-gzip.php
HTTP/1.1 200 OK
Content-Length: 12195
Content-Encoding: gzip
GET /i/yahoo.gif HTTP/1.1
Host: example.com
Accept-Encoding: gzip
15
![Page 16: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/16.jpg)
Gzip Configuration
• Apache 1.3 uses mod_gzip, Apache 2.x uses mod_deflate
• Apache 2.x: mod_deflateAddOutputFilterByType DEFLATE text/html text/css
application/x-javascript
• Nginxgzip on;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript
application/javascript application/json
application/x-javascript text/xml application/xml
application/xml+rss;
16
![Page 17: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/17.jpg)
5. Put Stylesheets at the Top
• Research at Yahoo! shows that moving stylesheets to the HEAD makes pages appear to be loading faster.– It allows the page to render progressively.
• The user is stuck viewing a blank white page if put at the bottom.– The browser block rendering to avoid redrawing
elements.
• The HTML specification said the same thing.• http://stevesouders.com/examples/rule-css-
top.php
17
![Page 18: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/18.jpg)
6. Put Scripts at the Bottom
• Download no > two in parallel per hostname.
• Block parallel downloads across all hostnames.
• Block rendering of everything below them in the page.
• Never uses document.write.
• Script DEFER attribute is not asolution.
• http://stevesouders.com/examples/rule-js-bottom.php
18
![Page 19: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/19.jpg)
7. Avoid CSS Expressions
• Powerful but dangerous way to set CSS properties dynamically.
• Supported since IE5 but deprecated from IE8.background-color: expression( (new Date()).getHours()%2 ?
"#B8D4FF" : "#F08A00" );
• Execute so many times (> 10,000)
– mouse move, key press, resize, scroll, etc.
• http://stevesouders.com/examples/rule-expr.php
19
![Page 20: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/20.jpg)
8. Make JavaScript and CSS External
• Using external files produces faster pages. Why?
– Js and css files are cached.
– Inlined increases the document’s size.
– Many documents could re-use them.
• To reduce HTTP requests in the front page:
– inline JavaScript and CSS, but dynamically download the external files after finished loading.
• http://stevesouders.com/examples/rule-inline.php
20
![Page 21: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/21.jpg)
DNS Lookup
21
![Page 22: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/22.jpg)
9. Reduce DNS Lookups
• 20-120 ms to lookup.• Blocks the parrallel download. • IE caches
– DnsCacheTimeout: 30 minutes
– KeepAliveTimeout: 1 minute
– ServerInfoTimeout: 2 minutes
• Firefox– network.dnsCacheExpiration: 1 minute
– network.dnsCacheEntries: 20
– network.http.keep-alive.timeout: 5 minutes
• Reducing hostnames reduces the DNS lookups. – But it reduces parallel downloads as well.
• The rule of thumbs is two per hostname.• http://stevesouders.com/examples/rule-dns.php
22
![Page 23: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/23.jpg)
Configuration
ActionController::Base.asset_host = Proc.new { |source|
"http://assets#{source.hash % 2 + 1}.placexpert.com"
}
server_name assets1.placexpert.com assets2.placexpert.com;
location / {
alias /var/www/placexpert/public/;
if ($request_filename ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|swf)$) {
expires max; break;
}
}
23
![Page 24: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/24.jpg)
Parallel Downloads
24
![Page 25: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/25.jpg)
10. Minify JavaScript and CSS
• Minification reduces response time and the size.
• Two popular tools are:– JSMin
– YUI Compressor
– Google Closure Compiler
• Obfuscation is an alternative optimization.
• Both methods achieves fairly the same size reduction.
• Should minified inline js and css as well (5% reduction)
• http://stevesouders.com/examples/rule-minify.php
25
![Page 26: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/26.jpg)
11. Avoid Redirects
• Redirects are accomplished using the 301 and 302 status codes.
• Redirects slow down the user experience.– Nothing can be rendered
– Round-trip request
• Add Expires headers to cache redirects
• Make sure use the standard 3xx HTTP status codes.
• http://stevesouders.com/examples/rule-redir.php
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
26
![Page 27: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/27.jpg)
Wasteful redirects
http://astrology.yahoo.com/astrology =>
http://astrology.yahoo.com/astrology/
• This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlashdirective if you're using Apache handlers.
• Nginx– rewrite ^(.*[^/])$ $1/ permanent;
27
![Page 28: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/28.jpg)
12. Remove Duplicate Scripts
• A typical problem
– 2 of 10 top sites contain duplicate
• Hurts performance
– extra HTTP requests (IE only)
– extra executions (even cached)
• http://stevesouders.com/examples/rule-js-dupes.php
28
![Page 29: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/29.jpg)
13. Configure ETags
• ETags stands for Entity Tags.
• A unique identifier that is more flexible than the Last-Modified date.
• Doesn’t works well for cluster of servers.
• To turn off in Apache,FileETag none
• http://stevesouders.com/examples/rule-etags.php
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
29
![Page 30: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/30.jpg)
14. Make Ajax Cacheable
• Expires or Cache-Control header
• Adding a timestamp to the URL– &t=1190241612
• When it has been modified, send with a new timestamp.
• http://stevesouders.com/examples/rule-ajax.php
30
![Page 31: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/31.jpg)
15. Flush the Buffer Early
• Don’t let the browser idle.
• In PHP, use flush() to send data partially.
• Good for busy backends or light frontends.
• Flushing after the HEAD
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
• Yahoo! search
31
![Page 32: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/32.jpg)
16. Use GET for AJAX Requests
• POST in the browsers as a two-step process:– sending the headers first,
– then sending data.
• Best to use GET.
• POST without posting any data behaves like GET.
• GET is meant for retrieving information
• POST is for sending data to be stored server-side.
32
![Page 33: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/33.jpg)
17. Post-load Components
• What's absolutely required in order to render the page initially?• The others can wait.• Post-loading should include
– drag and drop– animations– hidden content– images below the fold.
• Load them in the onLoad event.• Tools
– YUI Image Loader– YUI Get utility
• Yahoo! Home Page
33
![Page 34: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/34.jpg)
Post-Onload Script
• inline in front pagewindow.onload = downloadComponents;
function downloadComponents() {
var elem = document.createElement("script");
elem.src = "http://.../file1.js";
document.body.appendChild(elem);
...
}
• speeds up secondary pages
34
![Page 35: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/35.jpg)
18. Preload Components
• Preload what you’ll need in the future.
• Unconditional preload
• Conditional preload - make an educated guess
• Anticipated preload - preload in advance before redesign
35
![Page 36: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/36.jpg)
19. Reduce the Number of DOM Elements
• The number of DOM elements:document.getElementsByTagName('*').length
• More bytes to download and slower DOM access.
• Using nested tables for layout purposes?
• Are you throwing in more <div>s only to fix layout issues?
• Try YUI CSS utilities: grids.css, fonts.css and reset.css
• And how many DOM elements are too many?
• The Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).
36
![Page 37: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/37.jpg)
20. Split Components Across Domains
• Maximize parallel downloads.
• 2-4 sub-domains only because of the DNS lookup penalty
– static1.example.org,
– static2.example.org
• Maximizing Parallel Downloads in the Carpool Lane
37
![Page 38: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/38.jpg)
21. Minimize the Number of iframes
• Pros– Helps with slow third-party content like badges
and ads
– Security sandbox
– Download scripts in parallel
• Cons– Costly even if blank
– Blocks page onload
– Non-semantic
38
![Page 39: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/39.jpg)
22. No 404s
• A useless request.
39
![Page 40: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/40.jpg)
23. Reduce Cookie Size
• Authentication and personalization only
• Small impact on the response time. • When the Cookie Crumbles
– Eliminate unnecessary cookies– Keep cookie sizes small– Setting cookies at the appropriate domain level– Set an Expires date appropriately
GET /index.html HTTP/1.1
Host: www.example.org
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Set-Cookie: name2=value2; Expires=Wed,
09 Jun 2021 10:18:14 GMTGET /spec.html HTTP/1.1
Host: www.example.org
Cookie: name=value; name2=value2
Accept: */*
40
![Page 41: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/41.jpg)
Impact of cookies on response time
41
![Page 42: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/42.jpg)
24. Use Cookie-free Domains for Components
• Create www site and subdomain– that subdomain is cookie-free
• Buy a whole new domain if already set on domain without www.– Yahoo! uses yimg.com,
– YouTube uses ytimg.com,
– Amazon uses images-amazon.com and so on.
• Some proxies might refuse to cache the components that are requested with cookies.
42
![Page 43: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/43.jpg)
25. Minimize DOM Access
• Accessing DOM elements is slow
– Cache references
– Update nodes "offline" and add them later
– Avoid fixing layout with JavaScript
• High Performance Ajax Applications
43
![Page 44: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/44.jpg)
26. Develop Smart Event Handlers
• Using event delegation is a good approach.
• Use DOMContentLoaded event instead.
• High Performance Ajax Applications
44
![Page 45: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/45.jpg)
27. Choose <link> over @import
• One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.
• In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it.
45
![Page 46: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/46.jpg)
28. Avoid Filters
• It blocks rendering and freezes the browser while the image is being downloaded.
• It also increases memory consumption and is applied per element, not per image.
• Avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE.
46
![Page 47: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/47.jpg)
29. Optimize CSS Sprites
• Arranging the images horizontally (makes the smaller file size).
• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
• Don't leave big gaps between the images in a sprite.
– It makes the user agent requires less memory.
47
![Page 48: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/48.jpg)
30. Don't Scale Images in HTML
• Don't use a bigger image than you need.
• If you need <img width="100" height="100" src="mycat.jpg"
alt="My Cat" />
then mycat.jpg should be 100x100px.
48
![Page 49: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/49.jpg)
31. Make favicon.ico Small and Cacheable
• Browser will always request it, better not to respond 404. – Cookies are sent every time it's requested.
– Also interferes with the download sequence in IE.
• Solutions– Make it small, preferably under 1K.
– Set Expires header when you feel comfortable.
• Imagemagick can help you create small favicons
49
![Page 50: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/50.jpg)
32. Keep Components under 25K
• iPhone won't cache components > 25K (uncompressed size).
• Minification is important because gzip alone may not be sufficient.
• Performance Research, Part 5: iPhoneCacheability - Making it Stick
50
![Page 51: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/51.jpg)
33. Avoid Empty Image src
• Image with empty string src attribute occurs more than one will expect. It appears in two form: – Straight HTML
<img src="">
– JavaScriptvar img = new Image();img.src = "";
• Browser makes another request to your server. • Cripple your servers by sending a large amount of unexpected
traffic.• Waste server computing cycles.• Possibly corrupt user data.• HTML5 instruct browsers not to make an additional request.• Empty image src can destroy your site
51
![Page 52: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/52.jpg)
Developer Tools
• Firebug
• YSlow
• http://pagespeed.googlelabs.com/
52
![Page 53: High performance website](https://reader033.vdocuments.us/reader033/viewer/2022052821/554a51b1b4c905522f8b4926/html5/thumbnails/53.jpg)
References
• http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
• http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
• http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
• http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
• http://developer.yahoo.com/performance/rules.html• http://stevesouders.com/examples/rules.php• http://www.slideshare.net/w3guru/high-performance-
websites-by-souders-steve-presentation
53