016 YSlow

05 Oct 2012

YSlow is a great guideline on how to make your websites load faster. We will explore most of the 23 guidelines from Yslow and implement them in a little project and have fun getting to know the history of processors!

Download video: mp4

Sample code: Github

Similar episodes: 003 HTML5 Boilerplate, 013 RequireJS, 014 Local Web Servers

##Tools used for Yslow:

  1. Yslow browser extensions
  2. PageSpeed by Google

##How to implement Yslow

  1. Minimize http requests
  2. Use a Content Delivery Network
  3. Avoid empty image src
    • ensure the picture source exists in html <img src="pic.jpg">
  4. Add an Expires or a Cache-Control Header
  5. Gzip components
  6. Put stylesheets at the top
  7. Puts scripts at the bottom
  8. Avoid CSS Expressions
  9. Make JavaScript and CSS External
    • link to one style.css
    • link to one script.js
  10. Reduce DNS Lookup
  11. Minify JS and CSS
  12. Avoid redirects
  13. Remove duplicate scripts
  14. ETags Removal
  15. Make Ajax Cacheable
  16. Use GET for AJAX Requests
  17. Reduce the Number of DOM Elements
  18. No 404s
  19. Reduce Cookie Size
  20. Use Cookie-free Domains for Components
  21. Avoid Filters
  22. Do Not Scale Images in HTML
  23. Make favicon.ico Small and Cacheable

##More resources

  1. html5 boilerplate
  2. require.js
  3. CSS Sprite Cow and a video tutorial by Chris Coyier
  4. Gruntjs
  5. SASS and Stylus
  6. Codekit
  7. tesxt page for reduced cookie size

##Build Link of this Episode

A Book Apart by Jeffrey Zeldman and team