cfObjective(): Speedy Websites: Through Better Front-End Optimization with Peter Farrell

The first of the sessions I attended. This session I really liked. I have never really looked at the different rules that websites can break causing pages to be slower. This session was VERY informational and probably one of my favorites. Peter Farrell did a really good job with this session. And here is the notes. Also this is just a copy paste from OneNote so I apologize for the weird icons.

• 80% of the time a page loads is spent on HTTP request.
  • 20% is spent on back end requests like queries.
• Tools
  • Firebug
    • Yslow
      • Developer.yahoo.com/yslow
    • Google Page speed
      • Code.google.com/speed/page-speed
• The 34 Rules
  • It's not wise to violate rules until you know how to observe them - T.S. Elliot
  • Content RUles
    • Minimize HTTP requests
      • Reduce # of components on files
      • Combine JS files into 1 file.
      • For images use CSS sprites
      • Imagemaps
    • Reduce the # of DNS lookups
      • 20-100 seconds to do a DNS lookup
      • IE caches DNS lookups for 20 minutes.
      • Firefox caches for 1 minute
      • Too many hosts can penalize a page. Limit to 2-4 hosts per page.
    • Avoid Redirects
      • Redirects are slow
      • Browsers will NOT cache redirects
      • Trailing /s can cause penalties.
    • Make AJAX cacheable
      • Set expires header with cfhttpheader
      • Post loading components instead of pre loading
        • Drag and drop features could be post loaded
        • Photo gallery
          • Load first image instead of the rest.
      • Preloading
        • Unconditional Preload
        • Conditional Preload
        • Anticipated Preload
      • Reduce the # of DOM elements
    • Split your components across domains
      • Ex: static.google.com
    • Minimize iframes
      • If iFrame stalls out, your page stalls out
    • No 404 errors
      • Slows down user experience
      • Send back light 404 error pages
  • Server Rules
    • User a Content Delivery Network (CDN)
      • Using a CDN improved Yahoos load time by 20%
    • Add Expires or Cache-Control Header
      • Turn expire headers on specific static stuff (images)
    • Gzip Components
    • Configure Etags
      • Turn eTags on when serving one host
    • Flush Buffer Early
    • Use GET for Ajax Requests
      • POSTs are 2 step process
      • IE only allows for URLs that are 2KB long
    • Avoid Empty Image Src
      • Browsers do weird things with blank src tags
      • Makes request to the directory of current page
  • Cookie Rule
    • Reduce the size of cookie
      • When making a request all the cookies get sent
      • *.mydomain.com = bad. Be mindful of domains
      • Set expire date
    • Use Cookie-free domains
  • CSS Rules
    • Put stylesheets in the head
      • Allows for the page to load progressively
    • Avoid CSS expression
    • Choose to use XML link over at import
    • Avoid filters
      • _ filter hack
  • Javascript Rules
    • Put Javascript rules as far on the page as possible
    • Make css and js external files
      • Cacheable
    • Minify external css and js files
      • Minimize can be a 21% reduction
      • Jasmine
    • Remove duplicate script
      • IE will request a file if it finds a duplicate
    • Minimize the access to the DOM
  • Image
    • Optimize Images
    • Use CSS Sprites
    • Don't scale with HTML
      • Create thumbnail
    • Make your favicon small and cacheable
      • Under 1 Kb
      • Set an expires header