Press enter to see results or esc to cancel.

Learn How to Supercharge Your Web Site’s Speed

One thing that doesn’t get talked about nearly enough when it comes to building websites is speed. Speed is vital for your web page, for a host of reasons. First, the user experience needs to be a cornerstone of your design. If your site takes ages to load then users will give up and WILL NOT COME BACK. This is the kiss of death. Second, your Google ranking depends on it. Google attributes a lot of your overall “score” for search ranking on site performance- this includes site load time. If it takes too long, then you will get dinged. The good news is that this is controllable, and you don’t have to bust your knuckles to do it.

  1. The Web Host Matters

web hostThis one is important, and frankly, it is the easiest one to knock out. Your host provides the physical server that your site lives on. The higher performance the servers are the faster and more reliable your site loads. Consider this to be pretty indicative of the overall quality of the host.

Do not underestimate how important your web host is. Do your research and determine what the best match for both budget and performance is going to be. Just remember not to skimp, a lot rides on this. In one particular study (found here), you can start to get an idea about their performance. In this particular case, over 100 sites were tested on each hosting provider’s network. This lends itself to a good size data set and results you can take at face value but don’t be afraid to do your own research and measure up the results.

  1. Lighten the Load with Content Delivery Networks (CDN)

cdnCDN’s could fill an entire article, but for the sake of brevity a Content Delivery Network, or CDN, lightens the load on your site by hosting cached versions of your static content like images, CSS/JS files, and other structural components. It is these elements that make up the lion’s share of load time for your page, so this is a great place to lessen the impact.

What a CDN does, is host cached version of elements in your page on localized servers around the world. Believe it or not, distance matters, and if you can shorten the trip for data then you will speed up your site. CDN’s aren’t for every site and can be an overkills for small blogs and personal sites. However, if you are running a larger site or one that is doing more complex functions like database calls, heavy scripting, or eCommerce then CDN’s can make a huge impact.

  1. Reduce your Server Response Time

This is somewhat related to the web host above, but this is where we get a bit more granular. Server response time is essentially the amount of time between a browser requesting something from your server and the server responding to the request. Obviously, the slower the response time- the slower the site speed. For best results, you want to look to keep your server response time to under 200ms.

A lot of this will depend on your hosting package you get from your host provider. If you get an economy package, do not expect top-shelf performance. It will be passable, but it will not be anywhere near the speeds you are going to get with higher quality web hosting packages. Once you have the best package you can afford, there are more ways to improve your response time. However, we will get to all of those as we continue on with the article.

  1. Don’t Use Five Files When One Will Do

This is really the first tip that depends on you doing a little work. Essentially look at it this way, if your server is having to deliver each individual element for your page upon request then doesn’t it make sense that it will be faster to deliver fewer files? Whether you are using CDN’s or not, using less “server calls” for elements will measurably affect your site’s speed.

The easiest way to do this is to simply combine your CSS and JS files to one file for each. Don’t create 5 CSS files when you can combine them into one. Of course, this is impossible when it comes to WordPress or other CMS solutions (unless you use a plugin- many of which have a mixed bag of results). But in most cases, it just makes sense to create one CSS file. What is more common is having multiple JS files. I have seen sites with separate JavaScript files for every single element and action on a page. In fact, on some sites, I have seen over well over 20 calls for JavaScript files. It doesn’t matter if you are coding your own JS by hand or using jQuery or other ready-made scripts, you want to put all scripting into one file. It will make a huge impact to not have to call each function separately.

Another free tip, put that call for the JavaScript at the bottom of your page- not the header. Let the site load visually, and then load the functions. Just put it before your closing BODY tag. This makes for a smoother experience for your user and quicker load time.

  1. Don’t Make Your Site Load Remote Data

HTTP requests are generally an accepted part of web development, but that doesn’t mean they are best for your site’s performance. An HTTP request is any element on your page that your site has to call in from a remote location. This can be CSS, JS, database queries, images, frames, etc. Let’s be clear, you can’t reduce everything down to one file for each and you can’t remove every HTTP request. For instance, you can’t remove database calls and it’s always easiest and keeps things up to date to link outward to Font Awesome’s style sheet, as well as jQuery’s main file.

Use your best judgment on decided what to eliminate and what to keep. Just realize you will want to reduce as much as you can. Just not to the detriment of the performance of the page. When in doubt, host locally.

  1. Avoid Redirects Whenever Possible

A redirect is when you send a visitor to a destination based on a file or page that has been visited. This is poor practice for both usability and site speed. Because you are causing all information to be reloaded on each page. And frankly, you are disrupting the flow of your visitor’s time on your site. A common one is redirecting from www.website.com to m.website.com for mobile users. With responsive web design, this is completely unnecessary.

There are, of course, exceptions. You will have 301 and 302 directs which redirect from a non-www address to a www address. This overall helps Google to navigate your site and improves your SEO, so you can definitely look to keep these redirects in.

A great tool is this redirect mapper tool, which will help you to map out and discover all redirects on your site. Use this information to make an informed decision about improving your performance.

  1. Optimizing Your Data Package with GZIP Compression

You are probably familiar with .ZIP or “compressed files”. These are files that have been compressed by removing any redundancy and minifying (more on that later) all data and blank space in a file. Did you know you can do the same thing with your website? Know, you aren’t sending a .ZIP file, but you can send a compressed version of your file to your users. In fact, this technique is so widespread it is usable on all modern browsers. Let’s face it, at this point, we can’t handhold for a user who is on Explorer 4 on Windows 95.

It basically works by removing redundant tags and compressing space within the file, which is then processed by the browser to open everything back up. How well does it work? Yahoo’s homepage compresses from 100kb to just over 15kb with compression. That’s an absolutely huge bandwidth savings. There are plenty of tutorials online to do this, and it is done server-side. It will require editing your .htaccesss file, so make sure you have access to it.

In a nutshell, you will be adding something like this to your .htaccess file:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Use a tool like this GZIP compression tool to ensure it is working correctly.

  1. Don’t Load Everything Everytime

Left to its own devices, a web browser will load every file on every page, every time. Somebody smarter than us, had the epiphany to store locally certain files so you didn’t have to load them every time. Hence, we got caching in our browsers. However, it painted in broad strokes, and often you had to “hard refresh” a page or go into internet settings and actually empty the cache to see updates on a page.

Thankfully we have control over how browsers cache now – as long as the user has allowed it. So how do we control it? Essentially we set refresh intervals for some pages or parts of pages that are likely to not need constant updates. This can be your logo, footer, header or “About” page. All things that you are likely not going to be updated often. For instance, you can set your logo image to update once a week. Now, every time the user loads a page it will load a locally saved version of the file within the span of a week. Once that has expired, the browser will look for that file again and cache the file currently on the server. This can be a huge lifesaver for sites with daily engagement, and will vastly improve performance.

This will, again, require editing your .htaccess file by adding information on certain file types or pages by adding something like this:

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access plus 1 year”

ExpiresByType image/jpeg “access plus 1 year”

ExpiresByType image/gif “access plus 1 year”

ExpiresByType image/png “access plus 1 year”

ExpiresByType text/css “access plus 1 month”

ExpiresByType application/pdf “access plus 1 month”

ExpiresByType text/x-javascript “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access plus 1 month”

ExpiresByType image/x-icon “access plus 1 year”

ExpiresDefault “access plus 2 days”

</IfModule>

## EXPIRES CACHING ##

You can use different expiry dates depending on the file, however, as a rule, you can plan using a minimum of one month. But do not go over a year, or you could run into some long term problems.

  1. Minify Your Code and Maximize Your Speed

It might surprise you to learn that every single character and space in your code and adds to your file. That includes even the blank spaces and empty lines between sections of code. While it might not seem like much, everything adds up and it doesn’t take much to start affecting the load time of your page. This is a good area to start hacking away at your data load.

Minifying works, as you might expect, by removing every unnecessary space, character, and any comments in the file- without affecting any of the functionality of the page. The great thing about minification is that it requires no additional processing by the browser, so you can reduce file size as well and page rendering time. A great bonus is that it makes it MUCH harder to steal your code since everything runs together.

Of course, minifying by hand is tedious and time-consuming- so thankfully there are many online tools for minifying all types of files. One great tool is http://www.willpeavy.com/minifier/ which will allow you to minify everything in the same interface. Another is CompressMyCode.com which also offers a high-quality toolset for compressing your code.

Remember that when saving your JS and CSS files you will want to use the following name convention filename.min.js (or .css) and that you keep a saved version of the full file for editing and then you can just keep updating the .min.css file with the newest minified code.

  1. Optimizing Your CSS Will Set You Free

Writing clean CSS is just good practice, and should be the easiest item on the checklist to mark off. If you aren’t already using these practices then you need to look into updating your process.

First off, you want to minimize the code and declarations you make. The easiest way to do this is to use shorthand coding. Shorthand is a pretty simple idea and just requires a little effort to make sure your formatting is correct. To explain, you can write your code as

p {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

}

But this is very much a long form way of writing with huge redundancy. An easier and more efficient way of writing this would be:

p { margin: 10px 20px 30px 40px; }

This reduces the breaks in your code, which also starts towards minifying your code- something we talked about above. You can also do this by putting as many attributes as is possible in an umbrella tag. For instance, instead of writing:

.class {

background-color: #666666;

Background-repeat: none;

Background-size: cover;

}

You can include everything under the “background” attribute:

.class { background: #666666 no-repeat cover; }

As you can imagine, this is not only easier and faster to write, it will load for the user much faster. A great resource for working with existing code is CodeBeautifier.com which you can use to help clean up and “beautify” any files you have already done or may be inheriting. However to learn from square one, check out this wonderful tutorial from TutsPlus.com

Another good practice is to write your CSS top to bottom. Meaning, don’t put your footer attributes over the header. And don’t just put things anywhere, breaking up all of the declarations for a class all over the place. Organize and order your code. This will make for even smoother performance when you minify your code. It also reduces the need (or assumed need) for multiple CSS files.

  1. Images Will Sneak Up On You

One of the quickest ways to increase your file size and let load times get away from you is to not manage your images on your site. You have a beautiful image that fits perfectly on your page, but you ignore that it’s way too big (you can always resize with CSS or attributes right?) and that it weighs in at 850kb and load it on your server. Then you site in wonder, trying to figure out where the extra load is.

There are some super easy ways to get a handle on your image use and dress up your pages without sacrificing page load. The biggest of which lies in using your Photoshop to “Save for Web”- found in the “File” tab or by pressing Ctrl Shift Alt S. This will wildly reduce the size of your file, and you can actually see immediately how quality will be affected by adjusting levels. Another huge one creates images that are only as big as you need them. If you are designing for mobile first, responsive design (and you should be) then design for the largest you will need if you want an image to be full width- I find 600px to be a good size to plan for to get 100% on a tablet.

Another trick is to use sprites. Essentially it is a number of images combined into a single file and then, by using CSS, you will specify the position of the image to show only a particular portion. This is a good one for icons (if you aren’t using Font Awesome for that) or social media icons. You can even use a sprite creator like InstantSprite.com and Spritebox.net.

Just be aware that sprites should be used for smaller images, as larger ones get unwieldy and will drive up file sizes big time. Also, sprites are on their way out. But they do still have their place, at least for the moment.

If you haven’t guessed it by now, there are many factors that contribute to page load. Each one makes its impact, but when combined you will begin to see major load time strains. So take advantage of these tips and “hacks” to reduce the strain on your server and take your content delivery to the next level.

Comments

Comments are disabled for this post