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
Minimize the Number of External Requests Made
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.