Frontend performance

Frontend performance Best practices for speeding up your website

Fact 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. 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?

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

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

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

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

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

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

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

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

Best practices rules - Content 10. No 404s Extra HTTP requests Alternatives ?

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

Best practices rules - Server 4. Configure Entity Tags (ETags) 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). Etags is a more flexible mechanism than last-modified date Etag is a string identifying version of component Last-modified: validate based on timestamp Etag: ’ 10c23bs-4ab-45345f2a ’ Drowback of Etags is it typically constructed on a specific server hosting a site and wont match on another server If you are not taking advatages, disable it from Apache config file because it increases the size of HTTP headers in response and requests. FileETag none // in apache config files

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

Best practices rules – Cookies 1. Reduce cookie size Eliminate unnecessary cookies Apply cookies to domains NOT subdomains Set Expires date 2. Use cookie-free domains for components 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 Create a subdomain to host all your static data, that way *.example.com uses the example.com cookie Omitting www from your domain oblige you to write cookies to *.example.com So for better performance use www subdomain.

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

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

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

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

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

Best practices rules - Images 1. Optimize Images Use PNGs rather than GIFs Run pngcrush on all your PNGS http://pmt.sourceforge.net/pngcrush / Run jpegtran on all your JPEGs http://jpegclub.org / 2. Optimize CSS Sprits Arrange sprites horizontally rather than vertically reduce small size file 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 3. Don’ t scallimages in HTML 4. Make favicon.ico small and cacheable Under 1K Imagemagick can help you create small favicons http:// www.imagemagick.org

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

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

Frontend performance

More Related Content

What's hot (19)

Similar to Frontend performance (20)

Recently uploaded (20)

Frontend performance