• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Frontend performance
 

Frontend performance

on

  • 7,990 views

Frontend performance tips to boost your website load time

Frontend performance tips to boost your website load time

Statistics

Views

Total Views
7,990
Views on SlideShare
3,722
Embed Views
4,268

Actions

Likes
3
Downloads
49
Comments
0

16 Embeds 4,268

http://batayneh.me 3794
http://localhost 274
http://worchestra.com 82
http://www.batayneh.me 62
http://50.56.83.87 25
http://worchestra.dev 9
http://translate.googleusercontent.com 6
https://p.yammer.com 4
http://drupalservers.net 3
http://webcache.googleusercontent.com 2
http://drupal.org 2
http://paper.li 1
http://www.netvibes.com 1
http://static.slidesharecdn.com 1
http://twitter.com 1
http://worchestra.com. 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Frontend performance Frontend performance Presentation Transcript

    • 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(&quot;../images/cart.gif&quot;)) ?>);}
      • 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