Optimizing Site Speed

Talking about site speed today almost seems superfluous, with so many users accessing the web with powerful Internet connections and download capabilities. Most desktop users access the web via cable or fiber optic lines, brandishing download capacities of 15 megabits per second (Mbps) or greater. Although many users will often access those same Internet services via wireless signal, the rapid spread of 4G networks has brought similar download speeds to mobile devices even when they aren’t connected to WiFi.

Despite all that, there are still some desktop users that access the web using DSL or dial-up connections and many mobile users that are restricted to less powerful networks.

But, regardless of all the latest technologies, there will always be some subset of users that hit your web site with poor Internet connections. In addition, many mobile users are limited to how much they can download over their provider’s data network. Personally, I’m limited to 2 gigabytes of data usage per month, excluding any data transferred over WiFi.

That means that when we build and maintain web sites, we need to be cognizant of users’ technology capabilities, as well as their limitations, and plan accordingly.

Understanding Your Users

The first step towards building an optimized web site is simply getting to know your users. Getting a basic idea of user demographics such as age, income, and location will allow you to make some general assessments about how they are accessing your site.

I recommend utilizing Google Analytics to help verify (or nullify) any assessments that you have made about your users. There are several “Audience” reports that will help you gain some insight.

  1. Demographics > Location – Shows where your users are located geographically.
  2. Technology > Browser –  Shows what browsers your users are accessing the site with. I like to check this prior to development to help determine what browsers need to be supported for the site.
  3. Technology > Network – Shows what Internet networks are being used to access your web site. This may give you some idea about your users’ download capabilities.
  4. Mobile > Overview – Shows a basic breakdown of your total desktop, mobile, and tablet users.

Google Analytics doesn’t collect enough information to paint a detailed picture, but these reports, combined with your own experiences, should give you a pretty good idea of what to expect.

Once you understand your users, you can then determine which optimization practices are necessary for your site.

Optimization Basics

Here are some easy techniques that I recommend for all sites, regardless of user technology.

  1. Minify CSS and JavaScript files. This will remove all unnecessary spaces from your files and reduce their size. I prefer cssminifier.com.
  2. Combine CSS files to reduce HTTP requests. Previously, I would keep my screen, mobile, and print styles in separate files, but I have begun combining them into a single file to reduce the number of requests the browser has to process.
  3. Create image sprites. Likewise, you can reduce requests by creating a single image with all of your design files. High traffic web sites like Amazon.com use this technique frequently, but I find it to be a bit cumbersome and avoid it unless I feel it’s necessary.
  4. Scale down and optimize images for the web. I recently noticed a client site was loading slowly and discovered that three of the photos on the home page totaled over 12 mb. By simply scaling those images down to dimensions that fit their container, I was able to reduce the page weight to well under 1 mb.
  5. Optimize PNGs. Photoshop is notorious for creating bloated PNGs. There are many services that you can use to reduce the bloat and overall file size. I like TinyPNG.
  6. Only reference the files that you really need. If you are only using JavaScript on the home page, only call the file on the home page. There’s no need to impact the loading of other pages if they never use the file.
  7. If you are using jQuery or another popular code library, consider referencing Google’s hosted copy. Since many other sites do the same, users may already have the file cached in their browsers, which will save loading time.
  8. Many JavaScript libraries such as Modernizr allow you to customize what code is included in the file that you create. Only download the functionality that you really need.

Most of these steps are simple and can easily be implemented on any web site without impacting quality or deadlines. Doing these things will reduce page weight, decrease loading time, and ultimately improve user experience.

There are many other things that you can do to help reduce page weight and decrease load time, but you’ll need to decide what techniques are right for you and your site. In many cases, the basics may be fine, but in others, every kilobyte may be important.

To learn more about page weight optimization, I recommend reviewing the Network and Audits features within Google Chrome’s Developer Tools. I also really like the Pingdom Tools website speed test. Both of these will break down how long it takes each resource to load and provide suggestions for optimizing your site.

Advertisements

2 thoughts on “Optimizing Site Speed

  1. YSlow is also a very good tool for determining your speed metrics. (http://developer.yahoo.com/yslow/)
    Depending on the framework you develop websites in, there are many tools that will also minify your files for you. If you are on the .NET stack, WebGrease’s bundling will essentially compile (minify) any javascript or style sheet files you specify when you set up your web site for production. (http://kenhaines.net/post/2012/06/09/WebGrease-As-seen-in-Visual-Studio-2012.aspx)

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s