Fast Websites make People happy - 6 Tricks to load faster than Google

[media.io] loads many times faster than google.com; your whole homepage has fully rendered before I’ve noticed the loading wheel in Firefox starts spinning.

While it’s true that media.io loads faster than Google in Sweden where the author of this quote is coming from, it’s sadly not true for all places on Earth – media.io is 200–300 ms slower in New Zealand and here and there in the USA, too.

On the other hand, you can see that web performance has a tremendous impact on the perception of your service so it really pays to invest in web performance.

6 Tricks to load faster than Google

While I cannot afford the infrastructure Google has in place, media.io’s performance benefits from the fact that Google’s homepage isn’t what it used to be: At more than 150 KB and over 10 HTTP requests – most of which are not well cacheable –, it’s easier than ever to be faster than Google. Here are five tricks I use to make media.io really fast.

  1. Inline all Style Sheets

    Best practices say that a CSS Style Sheet should be one external file. For most sites including media.io, I don’t care. Even if you have only one Style Sheet URL (which you should), the extra HTTP request adds valuable time to the time before the browser will start rendering anything, slowing down the first page view. Plus, the loading main document might cause the browser to open another socket to load the Style Sheet which adds time.

  2. Load all widgets post onload

    To make the StumbleUpon badge that I use load faster, it is inserted on the page only once the user starts moving its mouse over the page. With jQuery, this boils down to $(document).one('mousemove', function() { $('#widgetcontainer').html('...'); }).

  3. Put all files larger than 10 KB on a CDN

    The largest files on my websites are usually the JavaScript files. Since bandwidth drops with increasing distance to the server, I keep all files larger than 10 KB on a CDN. I have done a bit of research here. Note that 10 KB is just my gut feeling since a perfect value would be very difficult to calculate.

  4. Re-use the home page connection for small resources

    After downloading the home page, I load two more small resources through the still open connection: The CSS sprite and the favicon. While I could place the CSS sprite on the CDN, it would load in parallel with the JavaScript, forcing the browser to open a new connection. By loading the CSS sprite over a lower-bandwidth connection that’s already open, I save time over opening a new higher-bandwidth connection.

  5. Load all JavaScript asynchronously

    Loading JavaScript asynchronously is now a mainstream technique which has tremendous potential of increasing parallelism in web browsers, as well as reducing time to display. All JavaScript on media.io is loaded asynchronously. Of course, it is compressed by Closure Compiler first and served GZIP compressed.

  6. Inline on-page JavaScript

    JavaScript that is needed on all main pages (think JavaScript libraries) is concatenated into one JavaScript file. Extra JavaScript that is only needed on some pages is included on the page in an inline script block.