Tools

Tools

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

Diagnostic

• YSlow
• PageSpeed
• WebPageTest
• DOM Monster

Automation

• Grunt
• mod_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

Try out async

None.

CSS

Minify your Stylesheets

• YUI Compressor
• CSS Minifier
• cssmin.js

Combining multiple CSS files

• grunt-contrib-concat

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

Combine multiple JS files into one

• grunt-contrib-concat

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

Data URI

• mod_pagespeed
• data: URI Generator
• data-uri.js

Don't rescale images in markup

None.

Optimize your images

Online tools:

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

Desktop tools:

• ImageOptim (Mac)
• RIOT (Windows)
• ImageAlpha (Mac)

Commandline tools:

• pngout
• jpegtran
• gifsicle
• imgopt

Server

Enable smart caching

None.

GZIP

None.