Webdev:Performance
From MozillaWiki
Contents
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)