3 Tips for a Faster Website

Site performance is a key factor in turning virtual window shoppers into paying and loyal customers. In fact, a Get Elastic post on performance according to some recent research, online shoppers will only tolerate about two seconds’ worth of page load time. Shoppers are unlikely to return to poor performing sites, and consumer expectations have been rising steadily since 1999.

A joint Bing and Google study demonstrated the negative impact slower loading search engine results pages had on user experience. Users became less likely to click and less likely to refine a search query when page load times increased by as little as 450 milliseconds.

With so much at stake, it’s vital to reduce page load times while still doing everything possible to include great site aesthetics, video, and graphics. Even if you’re not a developer, it’s important to understand what might be dragging your page load speed down.

Measuring Page Performance

The first step is to measure your current page performance, and there are a number of tools that should be in your measurement arsenal.

The first of these is WebPagetest. This free service gives you a waterfall view of your site’s performance, along with other reports. This resource will give you an idea of which page dependencies are the biggest hold-ups to your site performance. Knowing where the problems are is a huge part of working toward a solution.

In the example above, image files were some of the slowest loading page items and accounted for most bytes of data required for the page.

Next, you will want to install 3 Firefox plugins designed to measure page performance or review code. Firefox is, perhaps, the best web browser for designing, developing, and updating a website because it provides so many great add-ons that make it easier to learn what a site is doing or how it is coded. So if you’re not a regular Firefox user, you will want to download it at least for monitoring site performance.

The first Firefox add-on to get is Firebug. Firebug is the premier, free site inspection, debugging, and analysis tool. It will do a lot more than just help with site performance, and it is a prerequisite for the next two add-ons you’ll need.

Once Firebug is installed on your Firefox browser, add YSlow from Yahoo!. This add-on builds on Firebug to analyze your web page, comparing it to known performance best practices. YSlow returns an actual grade for your site along with several suggestions for improvement.

Next, get the Google Page Speed add-on. This tool is very similar to YSlow, with a slightly different rule set. It is a very good idea to compare results from these two tools to learn what areas of site performance are the most critical.

Three Tips for a Faster Website

Now that we have some means of measuring a site’s current performance, we can start to discuss what you can do to boost your own page’s performance. Of course, each site is a unique combination of files, dependencies, and conditions, but these tips are generally a good way to get better performance.

Three Tips for A Faster Website

1. Make Fewer HTTP Requests

Steve Souders, a world-leading expert on site performance, starts his book High Performance Web Sites: Essential Knowledge for Frontend Engineers with an HTTP overview, perhaps because HTTP requests can be a leading cause of slow page load times.

You can think of an HTTP request as a conversation between the browser and the web server. The browser requests a file or URL and the web server responds with the requested data. Generally speaking, it is better for performance to make fewer requests even if those requests are for larger files.

Specifically, try these 3 techniques to cut down on HTTP requests.

First, load JavaScript files with LABjs. LABjs is a free tool that loads JavaScript files in parallel, meaning that your pages could load much more quickly, especially if you have a lot of JavaScript files on your site.

Next, when possible concatenate style sheets or other files. Simply put, consider having one or two larger cascading style sheets instead of several smaller files.

Third, use image sprites. A sprite is a compound image that contains all of the various states of variable site graphics. For example, take a look at the menu in Apple’s online store. When you hover over one of the links you are encountering a sprite. Rather than loading lots of images, Apple is loading one image and reusing it.

Apple Sprite

2. Optimize Images

Image files can be a major contributor to slow loading pages, so after your designers have created your page graphics, do your best to optimize the file size and format of each image. For example, if you’re designer used GIF files (which should probably be avoided) try converting them to PNG files. Often this can result in a file size savings, especially when you’re using transparency. PNGs are much higher quality than GIF too.

Also, consider using Pngcruch, an image file optimizer that can squeeze every wasted bit out of a PNG file. In many cases, a “crushed” PNG will be the smallest image file you can find.

For product photographs or similar you may find that JPG files offer the best balance of image quality and file size.

3. Use a Content Delivery Network

A content delivery network is essentially a series of data depots that store copies of some files. When a user makes a request the requested data is pulled from the depot nearest to the client, shaving milliseconds off of site load times.

*Linda’s note: There are a number of free and enterprise CDN’s out there like CoralCDN (free), Akamai and Strangeloop Networks.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.

Tags:

Related Articles

9 Responses to “3 Tips for a Faster Website”

  1. A lot of great tools mentioned. I’ve been using Google speed test for about a year now and it’s great for pointing out things that have been missed.

    However when working with product images I tend to fall more towards quality instead of size.

  2. David Minor says:

    Also be sure to look at the “Site Performance” page in Google’s Webmaster Tools (in the Labs section), which gives page load times from actual users of your site. It’s great for judging the effect of any big changes you make.

  3. Jestep says:

    If you’re going to use Yslow or any other optimizing program, make sure you understand and actually test before committing to anything they suggest. Things like compression sounds great, but can drastically slow down the site’s speed in the time it takes for the server to compress the content. Browser caching is another often recommended optimization technique. This works well as long as your images, or cached content doesn’t change. If it does, your users can end up with a stale version for a long time. This can also hurt search ranking if they think your content is stale and never updated.

  4. Some quick correction’s on Linda’s note:

    - Strangeloop isn’t a CDN. They sell a site accelerator appliance that will do a lot of the optimizations to your site automatically (reducing requests and bytes) but they don’t offer a CDN service.

    - CoralCache is often actually slower than using the original site and is a CDN designed for absorbing enormous traffic surges (like a good old-fashioned slashdotting) but not for delivering individual assets faster like a normal CDN.

    A quick note on the image compression as well, often jpeg’s can be compressed more than they are without a visual difference by reducing the quality (sometimes the savings are quite significant) so make sure to use the lowest acceptable quality for them as well.

  5. Josse says:

    Keep in mind that these are all client-side optimizations. Bigger improvements can often be made on the server side:

    - Cut down on the amount of queries that are executed on the database;
    - Don’t use template engines that interpret a separate file;
    - Cache external files (that are downloaded by FTP/HTTP for displaying information);
    - Create indexes in the database;
    - Optimize your database.

    • Armand says:

      Thanks for bringing that into light, anyone optimizing a website needs to take a holistic approach and investigate all aspects of load time.

      In our experience we find 80% of load time is taken after the server has processed the page. We recommend server processing should be kept (and can be kept) under 1 sec.

      In Webpagetest.org reports, you can identify server processing time as the ‘Time to first byte’ on the first bar in the waterfall, the remaining bars in the waterfall is ‘Client side’ which is downloading all the resources from the server to the browser

  6. Joshua says:

    Thanks for clarifying, Patrick. Just to give a bit more information, we here at Strangeloop offer a solution called Site Optimizer, which implements a number of performance best practices to accelerate websites. Our solution, which is available as an appliance and a cloud-based service, is used by companies like Travelocity, Petco, Visa, and O’Reilly Media.

    As Patrick mentions, we’re not a CDN, though our solution can work in conjunction with CDNs to compound the benefits of performance optimization. You can learn more about this on our site:

    http://strangeloopnetworks.com/products/how-it-works/how-site-optimizer-complements-your-cdn/


    Joshua Bixby
    President, Strangeloop

  7. Dodo says:

    “PNGs are much higher quality than GIF too.”

    This is absolute nonsense. The author obviously has no idea of what he’s writing about. Both formats use lossless compression on 8 bit palette images with 24 bits per color. The result can only be the _exact same_.

    Sure, PNG supports truecolor, but that’s comparing apples with pears, as GIF doesn’t support truecolor – you’d have to go for JPEG vs PNG. And it contradicts the subject; storing a source as truecolor might result in better quality, depending on the source, but for sure results in bigger file size (usually a lot bigger).

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS