References

References

If you need resources to learn about web performance optimization here is the best place.

General

Books

• Steve Souders - High Performance Web Sites
• Steve Souders - Even Faster Web Sites

Web

• Yahoo! Best Practices
• Google Speed
• 14 Rules for Faster-Loading Web Sites
• FrontEnd Development Guidelines
• Front-end performance for web designers and front-end developers
• Performance Calendar

People

• Steve Souders
• Stoyan Stefanov
• Ilya Grigorik
• Marcel Duran

HTML

Avoid inline/embedded code

• Yahoo! Best Practices - Make JavaScript and CSS External
• Perf Calendar - Make your mobile pages render in under one second

Styles up top, Scripts down bottom

• Google Speed - Move CSS to head
• Yahoo! Best Practices - Put Stylesheets at the Top
• Google Speed - Put styles before scripts

Minify your HTML

• Google Speed - Minify HTML

Try out async

• Google Speed - HTML5 Performance

CSS

Minify your Stylesheets

• Yahoo! Best Practices - Minify JavaScript and CSS
• Google Speed - Minify CSS

Combining multiple CSS files

• Google Speed - Combine CSS

Prefer over @import

• Steve Souders - Don't use import
• Yahoo! Best Practices - Choose over @import
• Google Speed - Avoid CSS @import

JavaScript

Load 3rd party content asynchronously

• Stoyan Stefanov - Social Button BFFs

Cache array lengths

• Front-End Development Guidelines - JavaScript Loop Cache Array Length

Avoid document.write

• Steve Souders - Don't docwrite scripts

Minimize Repaints and Reflows

• Front-End Development Guidelines - JavaScript Reflow
• Nettuts - 10 ways to instantly increase your jQuery performance

Minify your script

• Yahoo! Best Practices - Minify JavaScript and CSS

Combine multiple JS files into one

• Google Speed - Combine external JS

jQuery

Always use the latest version of jQuery

• Addy Osmani - jQuery Proven Performance Tips & Tricks - #13

Use for instead of each

• JSPerf - jquery.each vs for loop
• JSFiddle - native loop vs jquery.each

Don't use jquery...

• Addy Osmani - jQuery Proven Performance Tips & Tricks - #43
• JSPerf - $(this).attr('id') vs this.id

Images

Use CSS Sprites

• Google Speed - CSS Sprites
• Yahoo! Best Practices - Optimize CSS Sprites

Data URI

• CSS Tricks - Data URIs
• Google Speed - Mobile

Don't rescale images in markup

• Yahoo! Best Practices - Don't Scale Images in HTML
• Google Speed - Specify image dimensions

Optimize your images

• Yahoo! Best Practices - Optimize images
• Google Speed - Optimize images

Server

Enable smart caching

• Yahoo! Best Practices - Add Expires or Cache-Control headers
• Google Speed - Caching

GZIP

• Yahoo! Best Practices - Gzip components
• Google Speed - Enable compression