Automated ways to make your site load faster

All the tasks that are related to making your site faster should be as automated as much as possible. No one likes optimising photos with Photoshops "Save For Web" or pasting unminified code to a web app and then copying it from there. All these tasks can be automated by using the modern web development tools.

There are a lot of small things that you can do, none of them alone speeds your site up almost at all. Some shave just 00.5 or 0.1 seconds off, but when stacked up they add many seconds. Small, insignificant things count in the end.

There are four basic principals we’re gonna work on:

  1. Location: make the site to be as close to the computer requesting it (not really an automation thing but still crucial)
  2. Compress / Minify stuff: CSS, JavaScript, html and images
  3. Cache stuff: browser cache, database cache
  4. Cut back the http requests: use sprites and svg iamges, combine JavaScript files, combine CSS files, only load things when needed

But first:

Analysing your site

First of all, use YSlow to test your site. YSlow is a browser extension, developed by yahoo!, that analyses your site and suggests improvements. This site scored 99 points of 100, on a “Small Site or Blog” ruleset (fap fap fap).


Basically, get a server that is close to you, in a same country or on the same continent. I had an American server from Mediatemple and it was painfully slow to use. There’s nothing really wrong with Mediatemple, it’s a good server, and probably really fast when you’re on the same continent, their data centers are all in US, and they have no plans to have any in Europe.

There’s only one set of cables connecting the continents, making it a bottleneck. Here’s a photo of it:



You can always use a CDN (Content Delivery Network) like Amazon CloudFront, but that doesn’t make your ftp faster, your site will still be slow for you. Which, I think, is really important! Nothing is more irritating than working on a slow site, takes the fun out of it.

Few server providers with data centers in Europe:

You can test site response times by pinging them. If you’re on Mac you’ll have a tool called Network Utility that does just that (among other things) for you.

screengrab 2013-09-02 at 3.07.32 PM.png 2013-09-02 15-32-58

If you check your site with YSLow you probably noticed it nagging you about CDN. I don’t have a CDN, nor should I, nobody reads my blog. It’s more for the high traffic sites. But of course, it’s a speed improvement, the little things that stack up together.


  1. Get a server from the same continent where you live
  2. Get a CDN

Compress / Minify stuff

Not minifying CSS JavaScript is probably the most important singular speed blocker. If you only gonna do one thing to speed up your site, let it be this.

Minifying CSS and JavaScript

You can use some of the tools found online to do it. Like the or Those are nice and handy but, theres a better way: CodeKit.

CodeKit does CSS and JavaScript minification automatically! You don’t even need to click a button, such a big timesaver.

screengrab 2013-09-02 at 3.58.30 PM.png 2013-09-02 16-01-17

It also compiles your SCSS files to minified CSS files and you can use Compass with it also. Here’s a line from a Compass config.rb file where you can control the CSS output.

# Output setup
# Set it to compressed. Other values can be: nested, expanded or compact

output_style = :compressed

Minifying your source files

I think this is something people don’t do that much. CodeKit wont help you in that, it has to be done with other means. You’re in luck if you use WordPress, cause there is a plugin to do just that, and it’s called WP Minify, it has worked great for me. It can also minify CSS and JavaScript files, but you’ve already done that with CodeKit, right? So you can set it to only minify the template files.

Compressing (smushing) your images

Images can be separated into two categories, depending on their usage:

  1. Sprites and logos that are embedded into the site structure when you build it. Those can be optimised with
    • Photoshop / Illustrator / Fireworks has the “Save For Web” feature. This does a good job on jpg’s but not so good on png’s.
    • Again, CodeKit does this for you, smushes everything down looselessly (you have to click a button this time though)
    • ImageOptim is a great, little, easy to use app that just does one thing for you and it does it well and painlessly. Good for large amounts of images.
    • Svg images are rather new and CodeKit or ImageOptim can’t handle them, but there is a web app for it called SVG Optimiser (more about svg’s below).
  2. Images that are being uploaded to the site by users during it’s life span. You can optimise them also with the upper mentioned methods, but try to explain those to a clieent. It need’s to be automated
    • Theres a WordPress plugin called that automatically smushed your images, looselessly of course.

Gzip your CSS and JavaScript files before sending them

Server can gzip your stylesheets and js files on the fly, and send them over compressed. The compressing and uncompressing process is super fast and takes less time than sending uncompressed files.

You can do this in your .htaccess file. This is coped straight from the html5 Boilerplate. Just paste it in to your .htaccess file in the root of your site.

# ------------------------------------------------------------------------------
# | Compression                                                                |
# ------------------------------------------------------------------------------

<IfModule mod_deflate.c>

    # Force compression for mangled headers.
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding

    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    #  as `AddOutputFilterByType` is still in the core directives).
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml 

</IfModule> is a nice tool to check if the gzipping is working.

Cache stuff

There’s at least two kinds of caching (that I know of).

  1. Browser cache and
  2. Database cache

Browser cache…

…wont make the site load faster, but next time go to the site, you have all it’s files cached to your hard drive, thus the site loads faster.

This is again straight from the HTML5 Boilerplate. Paste it into your .htaccess file.

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!)
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"

  # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

  # Web fonts
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"


Database cache

Most likely your site is dynamic, it uses some server side language to generate the site from the written code every time someone asks for it. That’s kinda slow, to every time generate it again and again. A cache plugin will generate static html files from your templates and serves up those to the ones requesting them.

For WordPress there are myriad amount of different cache plugins!

Cutting back tose slow http requests

What is an HTTP request? For instance loading an image is http request, or loading a CSS or JavaScript file. Http requests are slow cause browsers can do only 6 of them at a time (may vary depending on a browser, old browsers only did 2). Data it self is fast to move, but starting the process of transferring data is slow. Ever uploaded a whole WordPress to a server (thousands of small files)? Takes like an hour, but a zip package takes about 3 minutes.

Combine CSS files

In most cases you should only have one CSS file on your site. Exception could be a site where you only need a big junk of CSS only on one page. For instance, you have a one page web app as a part of your blog, then of course only load the CSS on that page. But in most cases one CSS file.

If using SASS, you can combine files really easily:

// No extention needed for the file name
@import "scss/filename-here";

Combine JavaScript files

You should get jQuery from a Google CDN, right? Not necessarily, someone has shed new light on the subject, and the changes that a user has just the right jQuery cached is slim to none. Here’s a podcast talking about it. It’s more beneficial to save a one HTTP request and combine the jQuery file into the beginning of your main.js file, this is true especially when you use a CDN.

We can’t really get away with only one JavaScript file (or maybe we do…). The Modernizr (custom built of course) needs to be loaded in the header (all other JS is good to load in the footer, faster page rendering). Also, Google Analytics is loading a separate JS file.

CodeKit does a great job on combining JS files painlessly and automatically. Just call the external file somewhere in your JS file.

// It has to be commented out, cause it's really not JavaScript just CodeKit specific Kit language
// @codekit-prepend "cookies.js";
// or
// @codekit-append "another-plugin.js";

This way you can super easily combine plugins into your main JavaScript file.

Put images straight into the source

One image is one http request, not necessarily. Use SVG’s (Scalable Vector Image), SVG images are for winners! There’s almost nothing bad about them!

  • Smaller file size: WIN!
    • Simple forms like logos are always lighter than corresponding bitmaps. Really, really complex forms can be larger than a jpg or png.
  • Resolution independent: WIN!
    • No blurring in Retina screens
  • Can be embedded into the source: WIN!
    • Save those valuable http requsts
  • No iE8 support: FAIL!
    • It’s easy to write a fall back with Modernizr or IE conditional commands

The key is to use as much SVG images as possible, and embed them into the source code.

After you’ve done an SVG image in Adobe Illustrator (or whatever it is that you’re using), open it up in your tex editor and you’ll see that it looks a lot like HTML. Just copy the code and paste into your source file. Remember to optimise the image with the SVG Optimiser. Wish upon a star: hopefully CodeKit will do the optimising one day, maybe on version 2…

You can also load SVG images in CSS files, just as you would load a normal jpg’s. It needs to be base64 encoded but CodeKit will do that automatically for you (or is it Compass… anyway, something does it haha. Just use the tools to make your life more easy).

Then there’s dataURIs, the base64 encoded bitmap images, you can put them straight into the source also.

They look something like this:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

But, be ware of the slow rendering in mobile devices:

…when measuring the performance of hundreds of thousands of mobile page views, that loading images using a data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute!


Such a bummer :(

Base64 encoding can be automated with PHP:

// A few settings
$image = 'cricci.jpg';

// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format the image SRC:  data:{mime};base64,{data};
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

// Echo out a sample image
echo '<img src="',$src,'">';


Or with Compass:

.module {
    background: inline_image("image-to-convert.png");

Or you can use this drag-and-drop web app.

Tools and resources

This is just a drop in the page-speed-ocean, easy things that you can get for free by leveraging the power of handy tools.

Club-Mate, the beverage →