A few quick tips on how to improve site speed

Search engines care about page speed. Users care about page speed. It only makes sense that you try to make your pages load as quickly as possible, without losing anything important.

So, here's a few quick tips on how to do that. Let's get into it:

1. Reduce number of HTTP requests

Browsers have limitations how many parallel requests per server/proxy they do.

Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6

Source: stackoverflow, you can also take a look at Browserscope.

So, what can we do about this? First thing that comes to mind is bundling. Bundling basically means that you combine all the different CSS or JS files into a single file which then browser downloads using only one HTTP request.

Before bundle:

After bundle:

Pretty nice, huh? In this manner we can really reduce the number of HTTP requests. So how do we do bundling?

Another way to reduce number of HTTP requests is also to use CSS sprites. This means combining image parts of your layout into one large image and then use CSS background-position to show appropriate part. This way not many small images are downloaded, but one larger which again - reduces the number of HTTP requests.

Not really related to bundling or sprites, but I also found one extra tip for designers - this interesting point on Dawid Walsh's blog - Combine Your CSS Media Styles Into One File.

2. Use a Content Delivery Network

Remember what we said about maximum number of parallel downloads? Well, this is per server. When you use a CDN, you automatically enable browsers to download more stuff in parallel than they would download only from your servers.

Also, if we're talking about for example public JavaScript CDNs doing this increases the chance that the browser will have this content in it's cache, as there's a chance user already visited another site that has this exact Javascript from this exact CDN already downloaded. In this case browser will not download it again.

Third and also very important is that CDNs usually have servers all over the world, so the closest one to your user will be chosen.

Here are some free CDNs:

3. Reduce the number of redirects (301)

This one should really be self-explanatory. First user asks to go to one page. You redirect it to another. Another request. Maybe you then again redirect it. It's really annoying just to write this, let alone experience it as a user. Don't do too many redirects, especially when not needed.

Also, a lot of typically not-so-hardworking programmers seem to think that window.location.reload() is perfectly fine solution, when in reality maybe simply updating appropriate DOM element is enough.

4. Avoid inline JavaScript and CSS

When using external JS and CSS the files are cached by the browser. When using inline CSS and JS, browser always downloads the entire JS and CSS when the page is requested. So, always use external CSS and JS in combination with the above mentioned CDN & bundling.

5. Avoid requests to non-existent resources

We talked earlier how expensive it is to have a large number of HTTP requests needed to download the site. Now imagine a HTTP request that gets wasted. It's rather silly and very easy to fix. Just open firebug and switch to a Net tab and there you can see if during page load browser also asked for a resource that doesn't exist. Then open your editor and fix this.

It's like 2 minutes of work.

6. Add 'Expires' Header

When you set the "Expires" HTTP header for a static content, this instructs the browser to load a resource from a disk if it has it and not to download it from the server.

Pretty simple. So, how to add this?

This was a brief list of small things you should be able to do quickly to your website to make it load a bit faster and possibly improve your rankings a bit.

Here are some additional resources and tools if you'd like to know more.

7. Do server-side caching

This one should not be too difficult for a developer, plus you must already know this. What it comes down to, our code doesn't need to generate same HTML over and over again, from scratch. We could generate it once, store it into cache and invalidate cache once the need for this arises. For example, if we're generating menu automatically based on groups of content available, then we can cache the result and if that result exists in the cache, just return it.

Just remember to invalidate cache once someone adds new content that requires a new menu entry.

For those visitors that are not developers, there are caching plugins for Wordpress for example, like W3 Total Cache.

Additional resources

PageSpeed Insights

This is a tool from Google that analyzes your site performance and gives recommendations on how to improve. As part of Google's PageSpeed tools, they also have modules for Apache and Nginx which automatically optimize your site's speed. I strongly suggest you check what it's all about. You can find more info on PageSpeed module page.

Don't forget to share your speed tips and implementation in the comments.

Comments are closed