Surf the Dream A discourse of links and articles from Justin Avery

Making your website faster

Quite a few months ago Google came out with Google Page Speed Online. This is a great tool for anyone to test how their web page is performing, but it’s nothing new when it comes to reporting performance. Recently they’ve also released an opt in service that delivers your content right from the Google Servers. I was given access to trial this but was on the road at the time, and I missed the expiry by 3 days. Rest assured another request is waiting in the wings at Google, but for now lets take a look at the other page speed helpers.

YSlow

YSlow was the first of the products released by Yahoo as a plugin for Firefox. It was developed by Steve Souders, author of the High Performance Websites: Essential Knowledge for Front-End Engineers and Even Faster Web Sites: Performance Best Practices for Web Developers.

From the Yahoo site….

“Yahoo!’s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow’s web page analysis is based on the 22 of these 34 rules that are testable. These testable rules are listed below roughly in order of importance and effectiveness. Studies have shown that web page response time can be improved by 25% to 50% by following these rules.”

  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires or a Cache-Control Header
  4. Gzip Components
  5. Put StyleSheets at the Top
  6. Put Scripts at the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript and CSS
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make AJAX Cacheable
  15. Use GET for AJAX Requests
  16. Reduce the Number of DOM Elements
  17. No 404s
  18. Reduce Cookie Size
  19. Use Cookie-Free Domains for Components
  20. Avoid Filters
  21. Do Not Scale Images in HTML
  22. Make favicon.ico Small and Cacheable

Page Speed

Steve then went across to Google and developed Page Speed for Firefox, and then the Page Speed Chrome Extension.

From Google PageSpeed….

Page Speed is a browser extension for Google Chrome and Firefox. It runs a number of diagnostic tests against a web page, and analyzes the page’s performance on a number of “rules” that are known to speed up page load time. The rules are based on general principles of web page performance, including resource caching, data upload and download size, and client-server round-trip times. They examine factors such as web server configuration, JavaScript and CSS code, image file properties, and so on. For each rule, Page Speed gives a general score, using a simple red-yellow-green grading scheme, and suggests specific techniques for correctly implementing each rule. It also provides some automatic optimization of external resources included on a page, such as minifying JavaScript code and compressing images.

mod_pagespeed

Steve wasn’t quite finished with those two books with their awesome recommendations, nor was he finsihed with the two plugins that gave you the tools to see how the site was performing and instructions on how to fix them.

He decided that he would take the development out of the web developers hands and make the server do all the hard work for you. mod_pagespeed takes an ordinary HTML page and does a lot the performance enhancements for you.

Personally I disagree with this approach as it’s automating something that you should be doing already. Automation is a guessing game, not an exact science, and this kind of performance will make you lazy. You can always do things better yourself by tweaking each element to the best of your ability, rather than relying on code to do it for you. It will also put an additional load on your server!

Which do I use?

When it comes to these two tools you might ask which one is better or which one should I use? The answer is both of them. While they have been developed by the same person they work in slightly different ways and focus on slightly different areas of performance. It’s important that you run both to get a wholistic picture of the performance of your site.

Remember! – performance matters. It is the first impression that everyone gets when they visit your site even before the first pixel is loaded

We’ve done a lot of performance enhancements on sites and you see a marked improvement in search results and customer coversions. If you need a hand coming to grips with it, get in touch and we can help.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter