Is your website slowing you down?

In case you missed it, Google has officially become a race. 

Yes, your ranking on Google is now directly related to how fast your site loads.

Jockeying for Google Position

Ok, that’s a bit of an overstatement.

A bit of background:

Last year, Google announced it would be including site speed as a factor in their search algorithms. On their official announcement, they stated that less than 1% of pages on the web would be affected by page speed. But ever since their recent update (Panda), SEOers across the web started to notice slow speeds affecting their rankings and have been scrambling to optimize their clients’ sites.

Keep in mind, it’s still only one part of their overall ranking algorithm. Either way, having a faster loading site not only will assist you in ranking well, but will also provide a better user experience. No one likes sitting around waiting for a webpage to load, and these days, people expect near-instantaneous results.

So what causes a website to be slow?

Most developer blogs out there point to excessive HTTP requests being the primary cause of slow webpages.  A request is what your web browser sends to a web server, which sends back a response.  For each component on a web page  (images, stylesheets, scripts, Flash, etc) there will be a separate request.  The more components you have, the more requests/responses there are between your browser and the web server, and the longer it will take to render a page.

Request/Response

There are other factors that affect the speed at which a page loads, such as the size of files and the distance to the web servers. There are various ways to reduce requests without sacrificing content. There are also a number of ways to address the other issues. Most of them require a fair amount of technical expertise, so it’s best to leave the actual changes to experienced web developers.

How can I see what’s making my website slow?

For starters, use Google’s  Page Speed assessment tool to see where you can make improvements. This simple tool  conveniently breaks down improvements by priority, with high priority changes being the simplest to implement and providing the most immediate results. To get a feel for it, I picked a site that I knew had issues with speed. Here is what the results page looked like:

As you can see there are a host of suggested changes, from optimizing images, to  deferred parsing of Javascript.

This is a good jumping off point, but don’t rely solely on page speed’s recommendation. I ran a test of a page that was voted “worst webpage ever” on numerous blogs. It’s a poorly coded site that is overloaded with images & sound, yet it somehow scored a 99 out of 100. So Page Speed is good at identifying certain specific problems, but leaves out many others.  There’s a number of other site speed assessment tools out there you can use for comparison.

Wait, what about all these recommendations?

Image optimization is probably the easiest change to implement with a good editing tool (e.g. Photoshop). The general idea here is to reduce file size so downloads happen quicker. Changing simple logos to 16 color GIF files greatly reduces their size, while other file-type changes may vary in size depending on the individual image ( JPG vs. PNG for example). You should also make it a habit of reducing the size of an image file to match the display size on the page. If you set your image to 100 x 100 on your page,  then the image tag shouldn’t point to a file that’s 500 x 500.

CSS Sprites and combined images are handy ways to reduce the number of requests a browser makes. If you have a number of custom buttons and icons on your page that use images, you can put all those images into one image file instead of several. Then use CSS Sprites to pick out which part of the image will be used on a particular element. For example, all the icons on the Yahoo! homepage come from a single GIF file that looks like this. They then use CSS code that basically instructs the browser to “crop out” the appropriate section of the image file for a particular icon on the page.

Minification isn’t something out of a Disney movie. No, minifying your code (HTML, CSS, JavaScript) is simply a matter of removing all the extra spaces, line breaks and indentation. This is another change intended to reduce file size as opposed to reducing the number of requests.  There are tools available that automate this for you, some within Google’s PageSpeed add-on. However, there is a drawback to this method, in that it makes the source code incredibly difficult to read for human eyes. Make sure you save a copy of the original un-minified code and make it available to those working on your page.

Caching is a widely used method of reducing requests and speeding up the browsing experience. You may have noticed that when you visit a website for the first time, it may take a while to load, but subsequent visits load much faster. What has happened is your browser stored a  local copy (the cache) of the webpage,  so it doesn’t have to request all the info and download all the files from the web server every time you type in the URL.  You can tell browsers to cache your page by use of expires headers, Etags and validators. These bits of code give a time frame for how often the browser needs to request new information from the site. You can also set different components to have different expiration dates. Here is  a more detailed explanation of web caching.

Structure Matters. According to Yahoo!, putting CSS stylesheets in the document HEAD section allows the page to render progressively. This ultimately means the user will see things like the navigation bar and images earlier while a page is loading. If CSS is put at the bottom, the user will stare at a blank white screen until the page is fully loaded. Another issue they identify is Javascript at the top of  a page prevents parallel downloads, so they recommend putting it at the bottom of the page or using a DEFER attribute.

To sum up, speed matters, not  just to search engine rankings, but to the overall user experience. Boosting your sites load time may require a fair amount of work and technical expertise, but it will be worth it if it brings you more visitors and more customers.  There are plenty of other ways to make your site faster as well. Fore more information, check out the links below:

Best Practices for Speeding Up Your Website

Optimizing Page Speed

Web Performance

by Anand Perala

About these ads

Leave a comment

Filed under Search Engine Optimization

Leave a Reply

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