10 Ways to Speed Up Your Site

Justyn Hornor

You’ve designed a beautiful site. It looks great, it sells widgets, and it gets the job done! But, there’s always room for improvement, especially on the technical side of things. One of the best ways to improve the overall experience on your site is to enhance your site speed.

Besides making the experience better for your users, page speed is also becoming a major influence on search engine optimization. So, don’t downplay the value of page speed, even if your site is pretty fast already. Look at how fast your competitors are loading and you may find the quick way to get ahead of the search engine curve — faster sites get preferential treatment.

1. Faster Servers Mean Faster Results

This is the easiest way to make sure your site runs fast all the time, but it can also be the most expensive option. 99% of my clients run off shared hosting via companies such as at GoDaddy or BlueHost.

If you’re delivering a lot of media content, it may be time to upgrade to a dedicated server or check into a Content Delivery Network (CDN) that specializes in hosting larger media files. This can dramatically decrease the load time of your pages, as the HTML, CSS, and other basic content of the page is loaded from your server while the big files get handled by a CDN.

2. Turn on File Compression

Most servers can handle file compression, which means that a file gets compressed by the server, sent to the user in a compressed format, and then unzipped. While this puts a bit more pressure on the user’s computer, it can have a significant impact on download speeds.

While this sounds intensive, it’s not too difficult. If you’ve got any experience at all with a web server, you should be able to go in there and make these changes.

For Windows-based servers, you have to configure IIS to compress files: Configuring HTTP Compression in IIS 7

For Apache-based servers, you’re looking for the mod_deflate functionality, which can be changed in the .htacess files: Mod Deflate.

This can have a huge impact, so take some time to explore this option. It can have a negative impact on older browsers that don’t have built-in decompression, but modern browsers will be fine.

3. Put Images into CSS

We all have files that get accessed on every page. Header graphics, menu graphics, and lots of icons are standard fare. So why not put these into a CSS file and stop requiring the browser to retrieve each file for each page?

When an image is in your CSS file, a separate CSS parser handles the process of finding these files. This is referred to as asynchronous processes. In short, this allows your browser to do a lot more at one time.

For example, let’s say you have the following images for your site header and menu:

  • header.jpg
  • facebook.png
  • twitter.png
  • myspace.png (<– really?!)
  • instagram.png
  • favicon.ico
  • …and so on.

If these files are referenced directly within your HTML, the browser has to download the HTML, render it, and then grab each file individually.

or, you can let the CSS parser built into browser handle those requests while your browser is rendering the HTML. It’s a far more efficient way to get the job done.

Minification

Minification is simply removing whitespace from site files. In many cases, minification can reduce file size by 20-50%. But, you don’t want to go through the process of minifying the files until you’re done; minified files are much harder to edit because all your nice line breaks and indents are gone. So, wait until your site is finished before minifying.

After you minify any content, head over to W3.org and validate your content. This will ensure you haven’t broken anything in terms of valid markup. Then, put the content on your site and make sure you haven’t broken anything in terms of your site’s functionality and content.

4. Minify CSS

In most sites I’ve worked on over the past few years, the CSS can be incredibly large and often divided into multiple CSS files. WordPress is just one example. To make these CSS files load faster, minification is the answer.

There are lots of powerful tools available ranging from simple to uber-complex. In my experience, the simple tools have a very large impact on file sizes and the advanced tools may only have a little better results.

My favorite is over at MinifyCSS.com

Just paste the CSS contents into the CSS input area, tweak the compression settings and options, and process it. Then, replace the processed contents. If you’re only getting 5-10% improvements, you may have to get more aggressive with the compression settings.

You can validate the CSS via http://jigsaw.w3.org/css-validator/

5. Minify JS

Javascript minifying is a little more touchy than CSS. You can break your code fairly easily, so be careful. Having said that, more and more sites depend on JS for basic functionality, so exploring minification of your JS files can have a big improvement.

99% of the time, the only thing removed from JavaScript files that are minified are the comments and whitespace. So, all should go well, but if you find that your functionality gets broken at a specific place/functionality within your JS document, you can always compress above and below this functionality in several steps to get almost all the same minification results.

I use http://jscompress.com/ to get my JS files cleaned up fast.

6. Minify HTML

HTML is another great candidate for minification, but it’s less used because much of the HTML is generated dynamically via PHP or other server-side technologies these days. But, there are examples where you include large blocks of HTML in files and there’s no need to skip minifying these blocks of code.

A great, simple tool for HTML compression can be found at http://www.willpeavy.com/minifier/. Then, head over to http://validator.w3.org/ once again to make sure the code is still valid HTML markup.

7. Proper Image Sizes

Images are bandwidth hogs! It’s not uncommon to find a stray graphic that is 200k+ but only 150x150px on the page — which should only be 10k with light JPG compression. I see this all the time. I take the time to go through top-level pages and look at each image and be sure that the image served is the same size as being displayed.

This typically happens when WordPress or another CMS is being used. The user may have dragged and dropped a massive image and didn’t choose the correct size, using percentages to reduce the size on the page.

I recently found a little gem that was more than 2MB for a small image on the page. Page speed dropped from 20+ seconds to under 2 seconds. Make sure a small, devious image isn’t slowing you down similarly!

8. No CSS @import

A common practice while in development is to use CSS imports to grab styles like fonts. I use these all the time for things like Google Webfonts or some other library or resource that I’ve developed.

This is fine while in development. But when it’s time for production, take the time to consolidate your CSS into a single or few files. This is especially important for larger files or fonts. The browser has to wait for the content to be loaded and you don’t want to be dependent upon a 3rd party.

9. Browser Caching

This can be one of the more complex and time-consuming tasks a designer may face. The easiest way to take advantage of browser caching is to use a WordPress or other CMS plugin. These will handle the vast majority of caching duties you’ll want to mess with and save you the time of combing through the files that could benefit from caching.

In short, a file is a good candidate for caching if the content doesn’t change frequently. Headers, footers, and basic content on your page are just a few good examples. But, if much of this is dynamic that gets updated very frequently (hourly or daily), then caching can be a bad idea since the browser will not get the newest version.

For Windows-based servers: Configure IIS 7 Output Caching

For Apache-based servers, check out their Caching Guide (version 2.4): http://httpd.apache.org/docs/2.4/caching.html

10. Clean Up Bad Requests

I only bring up checking bad requests because they happen to everyone and should be a part of a maintenance cycle of your site. Bad requests can start occurring at any  time and they’re not so obvious.

A common example is when Twitter changes up their API and some part of your site that queried their API no longer functions. Now you’re sending and getting bad requests. Enough of these and you’ll start seeing major speed issues with your site.

Check for bad requests regularly. Images get moved. CSS gets updated. Clients mess with stuff. Don’t underestimate just how much of an impact bad requests can have on site speed, even though they may be a rare occurrence.

Checking for Speed Opportunities

A great way to check out what areas your site could use improvements on is by using the Chrome browser’s built-in PageSpeed tool. Simply hit F12 or right-click and select inspect element. In the developer pane, you’ll see the PageSpeed tool:

You can get a lot of clues as to issues and areas of importance to focus on first with this simple tool.

How have you been optimizing your site? What’s your magic bullet for major speed improvements?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Niraj Vishwakarma

    Absolutely stunning information. As Google has already started to counting site speed in ranking factor, these points are worth following making safe in the race. You can read the the Post by Google @ http://googlewebmastercentral.blogspot.in/2010/04/using-site-speed-in-web-search-ranking.html

    Thumbs up for this post…….:)

  • http://www.purplepier.com.br Carlos Garcia

    I missed one point, the Javascript files should be loaded on the end of your html, not the head. As the Javascript is not important to the layout this approach turns your loading faster, showing the page before it starts loading the Javascript.

    Great post!

  • http://www.salyris.com Sean Cook

    There are compression and enhancements if you use CloudFlare even on the free version.

  • http://skateandannoy.com Kilwag

    What exactly do you mean by “Put Images into CSS?”

    • https://twitter.com/asciilator asciimo

      Maybe the author means using data URIs? http://css-tricks.com/data-uris/ I can’t find any evidence that using CSS background images has any request advantage over

    • http://www.vpillsgold.web.tr devamını oku

      Hey, If one is using jquery or jquery UI these libraries should be included from the Google Code repository. More and more sites are doing this already and the odds are that the user’s browser cache already contains the file (referenced from some other site visited) and therefore is served from the browser cache!

  • Mkn

    A notice: There is not much point in minifying anything if your server’s gzip compression is on. The minified gzipped file is about the same size a non-minified gzipped one.

    Another notice: Instead of “browser caching” one should title the section “server side caching”. As the writer says this is the trickiest part and heavily dependent on the CMS chosen.

    As for browser side caching: If one is using jquery or jquery UI these libraries should be included from the Google Code repository. More and more sites are doing this already and the odds are that the user’s browser cache already contains the file (referenced from some other site visited) and therefore is served from the browser cache.

    A VERY important hint is missing: combine all CSS-used .png images you need to a single .png and use it instead of maybe a two dozen independent ones. (Google for “CSS Sprites”). This technique will reduce the number of http calls to one instead of the two dozen. This one works, really.

    Then the rant: If one is using out-of-the-box Worpress the bottleneck may reside in the choice itself. A typical query to a simple WP page uses a HUGE amount of server memory (up to 20+ MB) and makes dozens of database queries, ending up a long CPU time at the server. Using a more lightweight system these figures can drop down to 1/10 of the WP use. But if one really needs WP there may be some tuning to be done.

    These are findings from several dedicated and VP servers I have been running. Tests have been run during several years and the results have not got any better.

  • Jessica

    Great info, both from the author and the response by Mkn. Thanks!

  • http://www.microedges.com MicroEdges

    Nice Post, very helpful for web designer’s world.

    Thanks.