Performance Zone is brought to you in partnership with:

EXECUTIVE SUMMARY Craig S. Dickson is a software development professional with over 15 years of experience. He has proven leadership experience in both domestic and multi-national start-up and Fortune 500 corporations in the United States, Australia and Europe. Craig specializes in enterprise Java development and cloud architecture and holds multiple certifications including Sun Certified Architect for JavaEE and Certified Scrummaster. Craig brings specific expertise in enterprise software architecture and design, refining development processes and building development teams around Agile software engineering principles. Educated in Australia, Craig holds a BSc(Hons) in Computer Science. He is based in Huntington Beach, CA, and Brisbane, Australia. SPECIALTIES Enterprise Java - Software Development Best Practices - Software Development Team Leadership - Cloud Computing Craig is a DZone MVB and is not an employee of DZone and has posted 20 posts at DZone. You can read more from them at their website. View Full User Profile

Performance Tuning Resources For Web Clients

12.09.2009
| 14008 views |
  • submit to reddit

Recently I have been doing some research on tweaking websites to make them faster (either in reality, or at least in appearance to the client). Specifically the research has been focused on the actual client tier interaction - requesting the page, downloading the assets and rendering the page in the browser. In this post I will document some of the better resources I have found, focusing on client-side tweaks, so these resources should be relevant no matter if you are a Java, PHP, .Net or any other flavor of developer.

Why Should I Care About Website Performance?

It used to be that website performance (or lack of) was simply the cause of a poor user experience, which some sites cared about, and clearly other sites did not. So, if a bad user experience was not enough motivation for you to solve your performance problems, then how about losing money? As this article Proof that speeding up websites improves online business shows a slow site could be costing you money. Whether it is shopping cart conversions, or simply ad click conversions, a slow site is going to hurt you. And the situation is only going to get worse in the future if Google has its way.

Google

When it comes to all things web related, it is hard to not talk about Google. However, when it comes to discussing the speed of the web, Google has recently become even more relevant with a three pronged attack.

In early November Google's Matt Cutts discussed in a presentation about things to look out for in 2010 that there is a strong push internally at Google to include page speed into Google's page ranking algorithm - in other words, the faster your page loads, the better your page would rank in Google's search results.

Secondly, around the same time, a post appeared on The Chromium Blog entitled A 2x Faster Web which introduced a new technology named SPDY (pronounced Speedy) which is an experimental application layer protocol that addresses many of the causes of latency in the web browsing experience.

And thirdly, back in the middle of the year, Google added a section to the Google Code website, simply titled Let's make the web faster which contains a cornucopia of tweaks and articles on speeding up your website (although some have critiqued some of the suggestions).

One of the big pieces of this new section is the inclusion of the Page Speed tool, which is a free Firefox plugin that allows you to run performance diagnostics on an individual page from within the browser itself and get suggestions on how to speed it up. The Page Speed tool can also be installed from within Google's Webmaster Tools site under Labs > Site performance.

Even from within Google Analytics there are now ways to extend the reporting functionality with timing data (see Extending Event Tracking) so that you could conceivably create reports that track most popular pages against fastest loading pages, allowing you to focus resources in the right place.

Finally, if you have a spare hour and you count yourself as a genuine developer type person, then Steve Souders' presentation from Google I/O 2009 entitled Even Faster Websites is definitely worth watching. Many of the tips in the presentation are significantly more technical than the others you will find in the other resources. Interestingly Steve now works for Google, but was previously at Yahoo!

Yahoo!

Most of the critics of the new Google pages and the Page Speed tool point to the Performance page and the YSlow tool on the Yahoo! Development Network (YDN) site, which have been around much longer.

The Performance page on YDN presents its own set of tweaks and articles for improving the performance of your website. The main content is contained on the Best Practices for Speeding Up Your Web Site page which lists 34 rules broken down into 7 categories.

The Yahoo! YSlow tool is very similar to Google's Page Speed tool (or most likely it is the other way around) and is another Firefox plugin that allows you to run diagnostics against a single page right from within the browser and receive suggestions on how to improve its loading speed.

Firebug

If you are a web developer of any kind you MUST have Firebug as part of your toolkit. It will help you debug JavaScript and CSS problems as well as problems with your markup. The Page Speed tool from Google functions as an add-on to Firebug, so if you want to use Page Speed you will have to install Firebug anyway.

Other Resources

  • How would you make Mahalo's pages load faster?

    Recently Jason Calacanis posted a question on the Mahalo Answers site asking How would you make Mahalo's pages load faster? There is a very long thread of responses which is actually worth reading because some of the ideas are quite novel compared to the rest of the related resources on the web.

  • 12 Things To Make Your Websites FASTER -- interworksinc.com

    In an entry on his blog, Brad Fair posts his own experience with some of the tips listed on the Google speed pages.
  • How to build faster loading websites -- techradar.com

    Craig Grannell's article How to build faster loading websites has a good overview of many tweaks without getting too technical and includes a reference to the YSlow tool.
  • Web Site Performance Tips and Tools -- java.net

    Carol McDonald's blog entry on the java.net site is not specific to Java and contains a great list of links to tools to help with finding and diagnosing performance issues, including issues once the page has finished loading, like slow AJAX.
  • 7 Professional Web Design Tips for a Faster Website -- networksolutions.com

    This a short, fast, concise article of 7 tips for increasing website performance. All of the tips are solid and all are worthy of your attention.
  • 10 Tips for a Fast Website -- layersmagazine.com

    Layer's Magazine is targeted directly at the users of Adobe's tools, so not surprisingly this article by Nicolle Sullivan is focused on tweaks related to the visual design of your site as opposed to the technical side. While all of the tweaks are valuable, I am not 100% convinced that all of them would directly impact the speed at which your website initially loads.
  • How to Make Your Website Load Faster by Resizing Your Pictures -- associatedcontent.com

    As the title implies, this article specifically deals with resizing images to optimize your media for better website performance. The only downside is that it deals specifically with Photoshop, so if you don't have a license this is not for you.
  • 6 Useful Tips Making a Website Load Faster -- layoutspack.com

    This is a short simple article that emphasizes many of the same tweaks as the other references already mentioned above.
  • Building a Faster Web Site: An Overview -- help4web.net

    This article
    by Bruce Waldack is very technical and deals more with network level technologies, with only a brief mention of images and optimizing CGI scripts towards the end. This is really an article for System Administrators, rather than your average Web Developer.
  • Optimization section -- yourhtmlsource.com

    The Optimization section on the HTML Source site is broken into three sections - Basic Optimizations, Optimizing Images and Extreme Optimizations. Most of the tips are worthy for your consideration, however some of the content seems to indicate the pages are quite dated (even though the last modified dates on the pages show they were "updated" in the last week). For example there is no mention of PNG format images on the Optimizing Images page, and the reference to Netscape in the Basic Optimization page.

 What resources for tweaking web clients can you recommend?

Published at DZone with permission of Craig Dickson, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Paul Archer replied on Tue, 2011/10/25 - 11:04pm

Performance tuning, particularly when it comes to page load times is becoming a more and more important request among my clients these days. With a greater number of consumers than ever with high spped internet - not only at home, but with mobile devices as well - pageload lag is more noticeable than ever. Customers equate slow loading pages with badly managed businesses.

Paul - ECU remapping

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.