Frontend performance Best practices for
speeding up your website

Fact <ul><li>Only 10–20% of the
end user response time is spent downloading the HTML document. The other 80–90% is spent downloading all the components in the page. </li></ul><ul><li>If you want to dramatically reduce the response times of your web pages, you have to focus on the other 80–90% of the end user experience. What is that 80–90% spent on ?How can it be reduced? </li></ul>

Best practices rules - Content
<ul><li>1. Make fewer HTTP Requests </li></ul><ul><li>About HTTP requests </li></ul><ul><li>Content-Encoding (compression) </li></ul><ul><li>If-Modified-Since (conditional GET) </li></ul><ul><li>Expires: Wed, 05 Oct 2022 19:16:20 GMT- </li></ul><ul><li>Connection: Keep-Alive </li></ul><ul><li>Image Maps </li></ul><ul><li>CSS Sprits </li></ul><ul><li>Inline Images (data:URL/ fie_get_contents / encode data with MIME base64 ) </li></ul><ul><li>e.g .cart { background-image: url(data:image/gif;base64, <?php echo base64_encode(file_get_contents(&quot;../images/cart.gif&quot;)) ?>);} </li></ul><ul><li>Combine JS and CSS </li></ul>

Best practices rules - Content
<ul><li>2. Reduce DNS lookups </li></ul><ul><li>DNS takes 20.120 milliseconds for DNS to lookup the IP address for a given hostname </li></ul><ul><li>ISP/browserscache DNS lookups </li></ul><ul><ul><li>IE Cache expiration (30 mins) </li></ul></ul><ul><ul><li>FF Cache expiration (1 min) </li></ul></ul><ul><ul><li>IE keep-alive (1 min) </li></ul></ul><ul><ul><li>FF keep.alive (5 mins) </li></ul></ul><ul><li>If cache is empty then number of DNS lookups = unique hostnames (URL, images, flash …etc) </li></ul><ul><li>Reduce number of unique hostnames reduces the amount of parallel downloads. </li></ul><ul><li>Reduce parallel downloads increase response time </li></ul><ul><li>TTL; DNS record returns from lookup TTL value which tells the client how long the record can be cached. </li></ul><ul><li>Use Keep-Alive to use existing connections and fewer domains </li></ul><ul><li>To flush DNS cache </li></ul><ul><li>Linux (/etc/init.d/nscd restart) </li></ul><ul><li>Mac OS X (dscacheutil --flushcache) </li></ul>

Best practices rules - Content
<ul><li>3. Avoid Redirects </li></ul><ul><li>HTTP/1.1 301 Moved Permanently </li></ul><ul><li>Location : http://example.com </li></ul><ul><li>Content-Type: text/html </li></ul><ul><li>One of the most wastfull redirects is caused by the trailing slash </li></ul><ul><li>http://indemajtech.net/contact results in 301 respons to http://indemajtech.net/contact/ </li></ul><ul><li>But this is fixed in Apache by using Alias or mod_rewrite or DirectorySlash if you use Apache handlers. </li></ul><ul><li>See CNAME if you are using multiple HTTP servers with different names on same physical host (alias for pointing one domain to another) </li></ul>

Best practices rules - Content
<ul><li>4. Remove Duplicate Scripts </li></ul><ul><li>Unnecessary HTTP requests caused by extra js get requests increases load time. </li></ul><ul><li>One good way to overcome this is using a script management system in your template system </li></ul><ul><li>Drupal e.g. </li></ul><ul><li>In template .info file scripts[] = fly.js </li></ul><ul><li>In module drupal_add_js </li></ul>

Best practices rules - Content
<ul><li>5. Make Ajax cacheable </li></ul><ul><li>To improve performance, optimize Ajax responses and make them cacheable </li></ul><ul><li>Add Expires or Cache-Control headers </li></ul><ul><li>Gzip components </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JS </li></ul><ul><li>Avoid Redirects </li></ul><ul><li>Configure ETags </li></ul>

Best practices rules - Content
<ul><li>6. Post-load Components </li></ul><ul><li>Which component can wait to be loaded later. </li></ul><ul><li>YUI Image Loader which allows you to delay images </li></ul><ul><li>YUI Get Utility ; get JSand CSS on the fly </li></ul><ul><li>7. Pre-load Components </li></ul><ul><li>Wait for idle browser state and request components that you might need in other pages </li></ul><ul><li>Types </li></ul><ul><li>Unconditional preload; once the page is loaded, fetch extra components </li></ul><ul><li>Conditional preload; user action based </li></ul><ul><li>Anticipated preload; preload in advance </li></ul>

Best practices rules - Content
<ul><li>7. Reduce number of DOM Elements </li></ul><ul><li>High number of DOM elements means that something should be improved with markup of page. </li></ul><ul><li>Nested Tables ? Divs to fix layout issues </li></ul><ul><li>YUI CSS utility which contains CSS reset. </li></ul><ul><li>To get number of DOM elements type in Firebug console </li></ul><ul><li>Document.getElementByTagName(‘*’).length </li></ul><ul><li>8. Split components across domains </li></ul><ul><li>So you can maximize parallel downloads, make sure not to use 2-4 domains (DNS lookup) </li></ul><ul><li>Dynamic content on example.com, static on static1.example.com, static2.example.com </li></ul>

Best practices rules - Content
<ul><li>9. Minimize number of iframes </li></ul><ul><li>Pros </li></ul><ul><li>Third party content </li></ul><ul><li>Security </li></ul><ul><li>Download scripts in parallel </li></ul><ul><li>Cons </li></ul><ul><li>Resources </li></ul><ul><li>Block page onload </li></ul><ul><li>Non-semantic (how document supposed to look rather than its structure) </li></ul>

Best practices rules - Content
<ul><li>10. No 404s </li></ul><ul><li>Extra HTTP requests </li></ul><ul><li>Alternatives ? </li></ul>

Best practices rules - Server
<ul><li>1. User CDN </li></ul><ul><li>Collection of web servers distributed across multiple locations to deliver content more efficiently to users </li></ul><ul><li>2. Add an Expires or Cache-Control header </li></ul><ul><li>Static Content; never expire </li></ul><ul><li>Dynamic content; cache-control (conditional requests) </li></ul><ul><li>3. Gzip components </li></ul><ul><li>Gzipping reduce response size by about %70 (Apache1.3 mod_gzip/ Apache2.x mod_deflate) </li></ul><ul><li>Server chooses what to gzip (html/xml/json) and what not to gzip (pdf/images) </li></ul>

Best practices rules - Server
<ul><li>4. Configure Entity Tags (ETags) </li></ul><ul><li>Mechanism that web servers and browsers use to determine whether the component/entity in the browser’s cache matches the one on the origin server (image/js file/css file). </li></ul><ul><li>Etags is a more flexible mechanism than last-modified date </li></ul><ul><li>Etag is a string identifying version of component </li></ul><ul><li>Last-modified: validate based on timestamp </li></ul><ul><li>Etag: ’ 10c23bs-4ab-45345f2a ’ </li></ul><ul><li>Drowback of Etags is it typically constructed on a specific server hosting a site and wont match on another server </li></ul><ul><li>If you are not taking advatages, disable it from Apache config file because it increases the size of HTTP headers in response and requests. </li></ul><ul><li>FileETag none // in apache config files </li></ul>

Best practices rules - Server
<ul><li>5. Flush the Buffer Early </li></ul><ul><li>On page request the backend needs around 200-500ms to stitch together your HTML page, during this time the browser is idle. </li></ul><ul><li>In PHP you have function flush() which allows sending partically ready HTML to the browser while your backend is busy collection more component. </li></ul><ul><li>Best place to consider flush() is your HTML HEAD tag </li></ul><ul><li>6. Use GET for Ajax requests </li></ul><ul><li>POST request happen in 2 steps: send headers, send data </li></ul><ul><li>GET request takes on TCP packet to send </li></ul><ul><li>7. Avoid empty image scr </li></ul><ul><li>Read Empty Image src can destroy your site </li></ul>

Best practices rules – Cookies
<ul><li>1. Reduce cookie size </li></ul><ul><li>Eliminate unnecessary cookies </li></ul><ul><li>Apply cookies to domains NOT subdomains </li></ul><ul><li>Set Expires date </li></ul><ul><li>2. Use cookie-free domains for components </li></ul><ul><li>When a browser request a static image and sends a cookie with the request, the server does not use that cookie, so its only no good for traffic, you should make static components cookie-free request </li></ul><ul><li>Create a subdomain to host all your static data, that way *.example.com uses the example.com cookie </li></ul><ul><li>Omitting www from your domain oblige you to write cookies to *.example.com </li></ul><ul><li>So for better performance use www subdomain. </li></ul>

Best practices rules - CSS
<ul><li>1. Put CSS at top </li></ul><ul><li>Moving css to the head makes pages appear loading faster because the page is rendering progressively. </li></ul><ul><li>2. Avoid CSS expressions </li></ul><ul><li>CSS expressions are used to set CSS properties dynamically </li></ul><ul><li>CSS Expressions accept JS expressions </li></ul><ul><li>Background-color: expression( (new Data()).getHours()%2 ? ‘red’ : ‘black’ ); </li></ul><ul><li>Width: expression( document.body.clientWidth < 600 ? ‘600px’ : ‘auto’); </li></ul><ul><li>Drawbacks </li></ul><ul><li>Expressions evaluated on page render, resize, scroll, mouse over …etc. </li></ul><ul><li>Moving the mouse a little bit can generate more than 10,000 evaluation </li></ul><ul><li>To reduce CSS expressions evaluations user one-time </li></ul><ul><li>Background-color: expression(altBgColor(this)); </li></ul><ul><li><script> </li></ul><ul><li>Function altBgColor(element) { </li></ul><ul><li>elm.style.backgroundColor = (new Data()).getHours()%2 ? ‘red’ : ‘black’ ); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>

Best practices rules - css
<ul><li>3. Choose <link> over @import </li></ul><ul><li>4. Avoid Filters </li></ul><ul><li>IE-Proprietary AlphaImageLoader and others increase memory consumption and its applied per element not per image. </li></ul><ul><li>Solve this and user http://css3pie.com </li></ul>

Best practices rules - JS
<ul><li>1. Put JS at the bottom </li></ul><ul><li>Scripts block parallel downloads </li></ul><ul><li>We cannot put document.write at the bottom </li></ul><ul><li>We can use DEFER attribute to indicate that the script does not contain document.write (FF don’ t support, IE does) </li></ul><ul><li><script type=‘text/javascript’ src=‘ fly.js ’ defer= ‘ defer ’ ></script> </li></ul><ul><li>2. Make Javascripts and CSS external </li></ul><ul><li>Using external files (not inline) of JS and CSS generally produces faster pages because JS and CSS are cached by the browser. </li></ul><ul><li>While inline JS and CSS are loaded on each page load </li></ul>

Best practices rules - JS
<ul><li>3. Minify JS and CSS </li></ul><ul><li>Minifying removes unnecessary characters to reduce size (remove all comments, white spaces) </li></ul><ul><li>Minifying tools JSMin and YUI compressor </li></ul><ul><li>4. Remove Duplicate Scripts </li></ul><ul><li>Unnecessary HTTP requests caused by extra js get requests increases load time. </li></ul><ul><li>One good way to overcome this is using a script management system in your template system </li></ul><ul><li>5. Minimize DOM Access </li></ul><ul><li>Accessing DOM elements with JS is slow </li></ul><ul><li>Read http://yuiblog.com/blog/2007/12/20/video-lecomte / </li></ul>

Best practices rules - JS
<ul><li>6. Develop smart event handles </li></ul><ul><li>Attaching too many event handles to DOM elements might make pages less responsive </li></ul><ul><li>Event delegation/bubbling is a bingo; whenever you do something to an element, the elements tell parent elements or a like elements about it </li></ul>

Best practices rules - Images
<ul><li>1. Optimize Images </li></ul><ul><li>Use PNGs rather than GIFs </li></ul><ul><li>Run pngcrush on all your PNGS http://pmt.sourceforge.net/pngcrush / </li></ul><ul><li>Run jpegtran on all your JPEGs http://jpegclub.org / </li></ul><ul><li>2. Optimize CSS Sprits </li></ul><ul><li>Arrange sprites horizontally rather than vertically reduce small size file </li></ul><ul><li>Don’ t leave big gaps between image, this does not impact the file size, but requires less momory to decompress the image into a pixel map </li></ul><ul><li>3. Don’ t scallimages in HTML </li></ul><ul><li>4. Make favicon.ico small and cacheable </li></ul><ul><li>Under 1K </li></ul><ul><li>Imagemagick can help you create small favicons http:// www.imagemagick.org </li></ul>

Best practices rules – Mobile
<ul><li>Keep components under 25k </li></ul><ul><li>iPhone wont cache components bigger that 25K </li></ul><ul><li>Performance Reasearch , Part 5: iPhone cacheability </li></ul><ul><li>2. Pack components into multipart document </li></ul><ul><li>Packing components into multipart document is like an email with attachement, it helps fetching several components with one HTTP request. </li></ul>

Thank you Alaa H Batayneh
http://batayneh.me