Webdev:Performance

From MozillaWiki
Jump to: navigation, search

Tools

Code

  • Minify - CSS/JS PHP minifier
    • Very configurable
    • Can restrict to specific files to concat in config
    • Supports memcache, gzip and far-future expires headers
  • Far-future expires headers for Apache
    • Put in .htaccess file or http.conf
 <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|ttf)$">
 Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT" 
 </FilesMatch>
  • Note: you will have to change the url to update any static content.
  • Gzip
    • On by default for all Mozilla sites
  • Spriteme.org - Awesome bookmarklet that sprites similar sized and positioned background images. Works pretty well. You have to manually download the sprited image and copy/paste the new CSS, but you can preview the changes live.

Profiling

  • YSlow - #1 perf. tool for frontend. Graded score for page and each rule. Use this and try to hit the first 5 rules as much as possible. (Except CDN req.)
  • PageSpeed - Performance rules, some overlap with YSlow. Harder to figure out what is a priority. Recommend to use after getting an 'A' in YSlow.
  • WebpageTest - Use defaults to get a 'normal' test. Good for seeing how long a page takes to load for a normal user and around the world.
  • Firebug JS Profiler - use this if your JS is locking up browsers. Has ok profiling for JS functions.

Optimizing Your Site

New Site

Easy

  • Sprite icons and bg images before building site
  • Use a build script to merge and minify CSS & JS files for production
  • Put JS at bottom
  • Put CSS at top
  • Add expires headers for static content and add version # in URLs
  • Don't use inline JS except for bottom of page (blocks rendering and downloading of other assets)
  • Put stats tracking code in footer, not head
  • Use -moz-box-shadow, -moz-border-radius and -moz-linear-gradient for drop shadows, rounded corners and gradients (reduces # of images significantly)
  • Smush images - best done via YSlow

Hard

  • Post-load assets after page load
  • Pre-load assets for subsequent pages a user may visit
  • Reduce cookie size
  • Move static content to a cookieless domain

Live Site

Easy

  • Copy/paste CSS & JS libraries into 1 file each
  • Move JS to bottom of page
  • Run images through smushit
  • Far-future expires static files
  • Gzip
  • Use SpriteMe to sprite images easily.

Hard

  • Post-load assets after page load (extra css & js files)
  • Reduce cookie size
  • Move static content to a cookieless domain
  • Minimize redirects
  • Sprite related images (icons, bg images)