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

Getting Started with Google Analytics

Google Analytics is an incredibly powerful asset for marketers, site administrators, and business owners, but with a seemingly infinite quantity of data points, graphs, segments, and reports, it can be completely overwhelming.

At Algonquin Studios, we encourage all of our clients to sign up for Google Analytics because of its many benefits and because it’s free–it really is a no-brainer–but that’s just the first step. Once you’ve signed up, then what?

Step 1: Understand Your Web Site

In order to use Google Analytics successfully, you need answer one big, general question about your web site:

What is the purpose of your web site? Why does it exist?

At this point, there’s nearly universal agreement that if you run a business, program, charitable organization, or pretty much anything else, you need a web site. But why? Are you hoping to sell products, promote to a larger audience, or just make it easier for people to find your phone number? There could be any number of reasons and you may have many, but, in order to get the most out of Analytics, you need to understand what they are.

It’s also useful to identify your target audience. What group of individuals are you hoping will access your web site? Doctors, grandmothers, hockey players, men in general? Try to be as specific as possible.

Step 2: Identify Your Goals

Let’s say that you’re a partner at a law firm and you’ve identified that the main purposes of your site are generating leads and reinforcing your firm’s reputation. From there, you can identify the following goals:

  1. Build interest by providing information about services and related content.
  2. Capture leads (via email or phone).
  3. Reinforce qualifications through firm history and accomplishments.

Step 3: Pick Your Measurement Tools

At this point, you can determine the data points and reports in Google Analytics that will help you measure the success of your site. These are often referred to as Key Performance Indicators or KPI. For example, here are some indicators that could be useful to your sample law firm:

Time on Site/Page – Since many of your goals are related to your site visitors reading content, you can examine how much time they’re are spending on your site and its individual pages to determine if they’re actively engaging with that content. It will be especially important to review the time spent on the pages you’ve deemed most crucial to your goals of building interest, capturing leads, and reinforcing your qualifications.

Bounce Rate – Another indicator that will show whether users are actively viewing pages and continuing to interact with your site is Bounce Rate. Your bounce rate is the percentage of visits that only include one page view. A low bounce rate indicates that your visitors are viewing several pages before exiting and implies that they are interested in your content and and engaging with it in a meaningful way.

Visitor Loyalty – If your law firm is attempting to reinforce its qualifications, you may expect to see a high percentage of return visitors. Strong visitor loyalty implies that your content is engaging and can help strengthen your position as a trusted resource. However, a high percentage of new visitors implies that a lot of potential clients are viewing your site. In general, it’s healthy to have a mix of each visitor type.

Keywords – The Keywords report identifies the search terms that drove users to your site from Google or other search engines. While returning visitors will probably access your site directly or search for your firm name, new visitors may be searching for services that you provide or for a firm in your geographic location. If you’re not seeing the results you expect, this indicator may show that you need to adjust your content to include better search terms.

Location – Geography-based reports and segments allow you to see where your users are located. This can be particularly important if you are targeting users from a specific area and may even influence your traditional marketing initiatives.

Step 4: Set Targets

Once you’ve determined which indicators will most accurately help you to measure success, you should set appropriate targets for each goal. These targets may be for a day, week, month, or longer, or they may even be for a specific time of the day.

Determining what your targets should be may not be easy at first, but you’ll get a feel for it over time. The key is to have a  goal number to work towards and compare against. The actual numbers are less important than the trends you’re seeing in the data.

Step 5: Identify Segments

If you want to take it a step further, try identifying any segments that could be applied to make certain reports more valuable. For example, you could segment the Landing Pages report by Keyword to see the keywords that are driving users to your top entrance pages.

Step 6: Review Your Data Regularly

There are many ways that you can utilize Google Analytics to measure your data. You can set up Goals, Alerts, Custom Reports, Advanced Segments, or Filters. You can even create reports that are automatically emailed to you on a regular basis. Or you can simply log into Google Analytics and review the default reports, focusing on the KPI that you’ve determined are important.

The key is reviewing your data on a regular basis. You can evaluate the success of your goals by measuring your KPI for a given period and then comparing them against past performance. Remember to focus on the trends, not the actual numbers.

Step 7: Adjust Your Site as Needed

As you review your data, you may identify areas of your site that need to be updated to improve user engagement or search engine performance. Ideally, you’ll see trends that reflect site growth and success, but you’ll need to set aside time to review the data and update the site on a regular basis.

Conclusion

Google Analytics can be a powerful tool, but to get the most out of it you need to know where to begin. Understanding your site and setting goals will get you on the right track. Then, you just need to pick your key indicators, set your targets, and get analyzing. Easy, right?

If you are new to Google Analytics, I highly recommend checking out Google’s educational library, but you should also consider just logging in and getting your hands dirty. It may seem overwhelming at first, but if you stick with it, the rewards will be well worth it.

Comparing Mobile vs. Desktop Data for Improved Experience

Mobile web sites and web pages are all the rage and it’s no wonder, with sales of mobile devices soaring (Gartner). So, maybe you’re considering a mobile version of your own site, but you want to be smart about it, doing what’s best for your site based on what makes good sense for your business. Thankfully, web analytics is here to the save the day! Analytics = super exciting, right? Well, bear with me here.

Start by accessing your Google Analytics account (if you don’t have Google Analytics installed on your web site, check it out to learn more about the insights and information the service can help you gather about your site).

You’ll want to set your date range for the past 12 months and go to the Mobile Overview section* (Click images for larger screen shots):

Mobile Data Overview

This report will show the percentage of visitors came to your site from mobile devices during the past year. If it’s a decent piece of the pie chart, usually 10% or more, the data is telling you it would probably be smart to invest in the development of a mobile site.

Click one level down to Devices and you’ll see which mobile devices are the biggest drivers to your site. It’s important to note if Apple devices are at the top of ­the list as Flash won’t work on these devices (and probably never will). You’ll want to keep this in mind and consider an alternative to Flash when designing your mobile site.

Now, let’s dig a little deeper. What kinds of content are your mobile visitors viewing most often (Content>Site Content>Pages)? Does it differ from desktop users? If so, those answers can point you to better ways to organize your content for a mobile site design.

Here’s how: Hop down to the Content section, click on Pages, and bust out some Advanced Segments. Under the defaults, you’ll automatically have a Mobile Traffic option at your fingertips. This report will give you insight on what the most viewed content from your mobile visitors is. Is this same content at the top of your mobile site design or extremely easy to access on a mobile device? It should be.

You could just compare “Mobile Traffic” to “All Visits” but let’s be more awesome.

Create a quick and simple “Custom Segment” for Desktop Visitors.

Click “+ New Custom Segment” > Name itDesktop Visits” >Select “Include Mobile Exactly Matching No” > Test then Save your segment. You’ll know you did it right if your Mobile Traffic and Desktop Visits add up to All Visits.

Creating Desktop Visits Custom Segment

Now, you can start comparing differences between your mobile and desktop site visitors. Just select the “Mobile Traffic” advanced segment and your new “Desktop Visitors” custom segment, hit apply, and check out the differences. For example, on our own site I found mobile visitors spend way more time on our Web Design and Careers pages than a typical desktop visitor.

Mobile vs Desktop Visitor Data

If you don’t see a lot of differences between the way mobile and desktop user visit and interact with your site, simply creating a more mobile-friendly version of your current site is probably a valid option and should work perfectly for the vast majority of your mobile visitors. On the other hand, if there are big differences between the two kinds of interaction, you may want to consider a new design for your mobile site, pushing the most important content for mobile visitors to the top or highlighting it to make it more easily accessible via mobile devices.

If you’re an analytics user, have you tried any of these reporting options and checked out your metrics? Did you find anything interesting? I’d love to hear about it.

*All data shown is anonymous and is not reflective of our clients’ accounts.