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

24 - Avoid inline/embedded code

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

23 - Styles up top, Scripts down bottom

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

22 - Minify your HTML

• Google Speed - Minify HTML

21 - Try out async

• Google Speed - HTML5 Performance

CSS

20 - Minify your Stylesheets

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

19 - Combining multiple CSS files

• Google Speed - Combine CSS

18 - Prefer over @import

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

JavaScript

17 - Load 3rd party content asynchronously

• Stoyan Stefanov - Social Button BFFs

16 - Cache array lengths

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

15 - Avoid document.write

• Steve Souders - Don't docwrite scripts

14 - Minimize Repaints and Reflows

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

13 - Minify your script

• Yahoo! Best Practices - Minify JavaScript and CSS

12 - Combine multiple JS files into one

• Google Speed - Combine external JS

jQuery

11 - Always use the latest version of jQuery

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

10 - use for instead of each

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

9 - Don't use jquery...

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

Images

8 - Use CSS Sprites

• Google Speed - CSS Sprites
• Yahoo! Best Practices - Optimize CSS Sprites
• Sprite Tools:
  • Texture Packer
  • SpritePad
  • Compass
  • SpriteMe
  • Sprite Cow
  • glue

7 - Data URI

• CSS Tricks - Data URIs
• Google Speed - Mobile

6 - Don't rescale images in markup

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

5 - Optimize your images

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

Server

4 - Enable smart caching

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

3 - GZIP

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