June 24, 2009

Tips for Making Websites Run Faster

Installing a fast browser is not always enough to have a good experience when you browse the web: many web pages aren't optimized for performance. To help webmasters improve their sites, Google launched a new section as part of Google Code: "Let's make the web faster", which includes useful articles, videos and downloadable tools.

You'll learn how to optimize CSS declarations, how to optimize JavaScript code and avoid memory leaks, how to use the best image format and prefetch resources.

Google also released a Firebug plug-in for Firefox that evaluates web pages and provides suggestions to improve them. Here are the suggestions provided for this blog's homepage:


* There is 58.8kB worth of JavaScript. Minifying could save 15.7kB (26.7% reduction). Google provides the minified versions of all the inline blocks and external files.

* The following cacheable resources have a short freshness lifetime. Specify an expiration at least one month in the future for the following resources: [list of resources].

* The following domains only serve one resource each. If possible, avoid the extra DNS lookups by serving these resources from existing domains.

* An inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

* A width and height should be specified for all images in order to speed up page display.

* Serve the following static resources from a domain that doesn't set cookies: [list of resources].
at

16 comments:

  1. AlexJune 24, 2009 at 4:28 AM

    Google is years behind Yahoo's YSlow; ironic, huh?!

    ReplyDelete
  2. venkatJune 24, 2009 at 5:43 AM

    @chitu can u share what program do you use to optimize images.

    ReplyDelete
  3. UnknownJune 24, 2009 at 6:42 AM

    You want to knwo the funny part. People will migrate to google's tool. A bit sad, but it long as it does the trick :)...

    ReplyDelete
  4. Alex ChituJune 24, 2009 at 7:49 AM

    @Alex:

    Use whatever tool works best for you. YSlow and Page Speed are similar, but the suggestions are not always the same and Google's add-on shows more detailed results. For example, Google shows how much you could save by "minifying" JavaScript code, but YSlow doesn't show this information. YSlow doesn't list the resources that use large cookies and it doesn't show the inefficient CSS rules.

    Yahoo's add-on has a lot of cool stats and additional tools (JSLint, minify JS, run Smush.it to optimize images), so I recommend to install both add-ons.

    ReplyDelete
  5. UnknownJune 24, 2009 at 7:55 AM

    Thanks alex, another great tool.

    Keep reporting!

    ReplyDelete
  6. obzavejdaneJune 24, 2009 at 11:42 AM

    Nice. Results from 30 minutes work - 6 second more fast. :)

    ReplyDelete
  7. AnonymousJune 24, 2009 at 3:39 PM

    I don't think that someone needs such thing... just use few images and scripts in your site and it will run faster...

    ReplyDelete
  8. EvelienJuly 8, 2009 at 3:22 PM

    The slowest thing on my pages are the AdSense ads....

    ReplyDelete
  9. Facebook ApplicationsJuly 22, 2009 at 2:22 AM

    Hey this is great tips for those who have low bandwidth really. Its great tip . Thanks

    ReplyDelete
  10. SEO packagesSeptember 17, 2009 at 1:03 AM

    i think the best way to make your blog run faster is to lessen the graphics embeded on the blog. Avoid flash on your blog coz it will just make your page slower. Optimize your images in photoshop to make the file smaller and easier to load.

    ReplyDelete
  11. Facebook Applications DeveloperNovember 4, 2009 at 11:25 PM

    If CSS and tabling is good and website running on a high quality server so website will automatically run fast. The most important thing the server on which website is running must be the only server for the website not any other things or any kinda applications running at that server.

    ReplyDelete
  12. GraemeFebruary 9, 2010 at 8:06 PM

    Hey I just want to thank the top comment for YSlow. Had never even heard of that program - very detailed and offers a lot more things to speed it up. I'm anal enough to try and get an A Grade :)

    ReplyDelete
  13. BoniApril 19, 2010 at 9:31 AM

    It is better more care for Page Speed, because Google look at the grade for its page rank now.

    ReplyDelete
  14. AnonymousMay 30, 2010 at 12:57 AM

    If you want to capture historic results (privately) from yslow & page speed, you can use their beacon facility with http://pageshow.jaoudestudios.com and pageshow will validate it against w3c too.

    ReplyDelete
  15. wupload downloadsSeptember 5, 2011 at 8:44 AM

    thanks for this tip ..
    i search how i can Specify an expiration at least one week in the future for the following resources .gtmetrix say

    _main.css(10 minutes)

    how i can increase the time thrown htacsses file

    ReplyDelete
  16. JMNovember 16, 2011 at 6:18 PM

    Thanks for the info. I was able to improve my score using firebug by 11 points!

    ReplyDelete

Note: Only a member of this blog may post a comment.