Tools

If you need tools for web performance optimization here is the best place to find it.

Diagnostic

• YSlow
• PageSpeed
• WebPageTest
• DOM Monster
• SpeedCurve
• DareBoost

Automation

• Grunt
• mod_pagespeed
• ngx_pagespeed

HTML

Avoid inline/embedded code

• Assetgraph-builder

Styles up top, Scripts down bottom

None.

Minify your HTML

• HTML Compressor. Also available as a Grunt plugin: grunt-htmlcompressor
• HTML Minifier. Also available as a Grunt plugin: grunt-contrib-htmlmin
• Django HTMLmin
• grunt-contrib-htmlmin

Try out async

None.

CSS

Minify your Stylesheets

• YUI Compressor
• CSS Minifier
• cssmin.js
• CSSO
• grunt-contrib-cssmin

Combining multiple CSS files

• grunt-contrib-concat
• borschik
• minify

Prefer over @import

None.

JavaScript

Load 3rd party content asynchronously

None.

Cache array lengths

None.

Avoid document.write

None.

Minimize Repaints and Reflows

None.

Minify your script

• YUI Compressor
• Google Closure Compiler
• UglifyJS
• grunt-contrib-uglify

Combine multiple JS files into one

• grunt-contrib-concat
• borschik
• minify

jQuery

Always use the latest version of jQuery

None.

Use for instead of each

None.

Don't use jquery...

None.

Images

Use CSS Sprites

• SpritePad
• Compass Sprite Generator
• SpriteMe
• Sprite Cow
• glue
• Texture Packer
• Stitches
• Instant Sprite

Data URI

• mod_pagespeed
• data: URI Generator
• data-uri.js
• dataurl bash function (line 51)
• PHF: Portable Hypertext Format

Don't rescale images in markup

None.

Optimize your images

Online tools:

• Kraken.io
• Smush.it
• TinyPNG
• JPEGmini.*
• Compressor.io

Desktop tools:

• ImageOptim (Mac)
• RIOT (Windows)
• ImageAlpha (Mac)
• JPEGMini (Mac, iOS, soon Windows)
• Trimage (Linux)

Commandline tools:

• ImageOptim CLI
• optipng
• pngout
• jpegtran
• gifsicle
• imgopt

Optimize your SVG

Commandline tools:

• SVGO

Server

Enable smart caching

None.

GZIP

None.