- CSS Sprites - http://css-tricks.com/css-sprites/
- Put CSS at the top of your page
- Reduce number of HTTP requests
- Use a CDN
- Expires/cache-control header
- Specify character set UTF-8 meta tag
- Minify HTML, CSS, and JS (Grunt!) - https://github.com/gruntjs/grunt-contrib-uglify, https://github.com/gruntjs/grunt-contrib-cssmin, and https://github.com/gruntjs/grunt-contrib-htmlmin
- Concatenate CSS and JS (Grunt!) - https://github.com/gruntjs/grunt-contrib-concat
- Enable GZip compression - http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
- Use efficient CSS selectors (mainly, don't use too many) - http://csswizardry.com/2011/09/writing-efficient-css-selectors/
- Don't use
@importkeyword in CSS -- causes blocking requests. Doesn't apply with Sass, since it's precompiled - Put non-essential JavaScripts at the bottom (where possible)
- Intention-based file loading (like loading a needed script when the mouse gets near a button that triggers the script)
- Asynchronous script loading - http://requirejs.org/
- Compress images - https://imageoptim.com/
- Responsive images - more solutions than you can shake a stick at. - http://css-tricks.com/which-responsive-images-solution-should-you-use/
- Don't make incorrect requests--they hang and take a while to timeout.
- Spread image files across multiple hostnames - only 2-4. Too many will cause new DNS lookups.
- Use external files. Inline styling will make HTML files take longer to load because the contents of HTML pages are often dynamic, and thus not cached. So if you put inline styles or JavaScript in your HTML, they'll be loaded anew every time.
- Use tools like WebPageTest and Google PageSpeed: http://webpagetest.org/ and https://developers.google.com/speed/pagespeed/
More links: