Cut The Noise - Improving Website Speed Behind The Screen

lessons from our LAB

Subscribe To The Lab

We share the highlights so you don't have to worry about missing anything.

February 27, 2013

Cut The Noise - Improving Website Speed Behind The Screen

Our Digital Scientists are made up of tech-loving, results-oriented, passionate, digital marketing nerds who have an unnatural obsession with all things digital. Most likely seen glued to a screen and spewing new digital marketing trends.

Kirk is a local technical entrepreneur and manager, specializing in designing and deploying highly-scalable web applications. He puts a large focus on optimizing a site’s inner workings in order to increase speed and performance for the end user. Kirk is a Computer Science graduate of Arizona State University’s Ira A. Fulton School of Engineering.

“The website looks great, but it takes so long to load!”

 After passing through the design, development, re-design, re-development, and deployment phases, this is one of the last things you want to hear about the website you’ve worked so hard to complete. Unfortunately, it’s a common complaint. Often spurred by one’s impatience, it still cannot be ignored. Let’s face it, Internet users are impatient, so if your website is taking too long to load, the user is likely to click Back and try another site!

There are countless things that can, and frankly should be done, especially for larger, more popular sites, to speed up and improve a user’s experience. This short list is one I recommend every web developer follow before setting a site loose to the wild. It will catch the most common speed issues normally encountered and will make a surprising difference to you and the user. They can all be easily done by anyone that has access to the website’s content, including the web designer.

Use a Content Delivery Network Where Applicable

A Content Delivery Network (CDN) is a network designed for quickly and efficiently serving up web files such as scripts, images, and stylesheets. They include caching technologies not present on common web servers, thus allowing your browser to download a file much quicker than it would if you hosted it yourself.

If it were up to me, all externally referenced files on a web page would be hosted on a CDN, but this becomes difficult to manage and could be expensive. Fortunately, Google offers a CDN that hosts commonly used files, such as jQuery, AngularJS, and Yahoo! User Interface Library, for free! All libraries can be found here: https://developers.google.com/speed/libraries/

At the minimum, any of these common files in use on your website should be swapped out to reference the version hosted on a CDN. These are also likely to be the largest files in use on your website, so the time it takes to download all files together will be significantly reduced.

Minify Scripts and CSS Files

When scripts and stylesheets are transferred from the server to your browser, every single byte in the file, including spaces, tabs, and developer comments, have to go along with them. This is just a waste as there’s no sense in taking the time and bandwidth to transfer this information. The process of minifying a file will remove all comments, whitespace, and oftentimes optimize a script or stylesheet so that it’s much smaller and runs more efficiently. I’ve seen fairly large JavaScript files be reduced from 30 to 65% from this process! This could result in seconds worth of savings.

I always recommend the Google Closure Compiler (https://developers.google.com/closure/compiler/). It’s free, works on both JavaScript and CSS files, and is used by Google itself for its web applications. The Closure Compiler has many settings that can make it do anything from simple minification to the most advanced code optimization.

Minimize the Number of External Requests Made

Let’s say your website references 5 JavaScript files, 3 stylesheets, and 20 images, all separately. That’s 28 individual HTTP requests that need to be made after loading the main page of your website. Depending on the type of server hosting these files, that could take a bit of time (extra seconds). This same site could load the same number of resources in a shorter time span simply by combining the resources into single files. The total transfer size doesn’t change, but the number of requests the user’s browser needs to make is reduced, thus shortening the load time.

Here are a few ways to do this:

● Combine all scripts into as few files as possible. If you can, take any scripts that aren’t using a CDN, combine them into one, then use the Closure Compiler to make it smaller.

● Combine all CSS declarations into a single file, in a similar manner to scripts.

● Use CSS sprites for referencing images, so that all images may be combined into a few as possible. W3Schools gives a basic example of how sprites work: http://www.w3schools.com/css/css_image_sprites.asp

BONUS: Enable GZip Compression on the Web Server

Okay, so for this last one, you may need to contact your hosting provider, but it will make a significant impact on the load time of your website. When files are “GZipped”, their contents are compressed on the server before being sent to the browser, where they are uncompressed. This means that only a percentage of the original file is transferred, therefore decreasing the time it takes to get from the server to your browser.

Now, some may ask, “doesn’t the time it takes to compress/decompress the file negate the time saved during transfer?” The answer is no - GZip was designed to be quick and efficient, so the time spent during compression is nothing compared to the transfer time saved by using it!

These are simplest ways for any web developer to improve the load time of a website. They are commonly overlooked. In fact, even the most popular Content Management Systems (including WordPress) don’t have any method of implementing these tactics.

If you’re interested in learning additional ways to improve the efficiency of your website, I recommend reading an article by Yahoo! (http://developer.yahoo.com/performance/rules.html) which describes the methods above in more technical detail and describes other advanced features that can be implemented.



COMMENTS: