Skip to content
Dec 5 10

Speed Tip: Number 2

by Toby Somerville

Put all JavaScript before the closing body tag (</body>).

Why?

Putting the JavaScript at the end of the page allows the whole document structure to load before executing any JavaScript. You do this because the browser blocks any further page loading as soon as any JavaScript is encounter. The browser only continues to load the page, once the JavaScript has been downloaded and executed.

Dec 1 10

Speed Tip: Number 1

by Toby Somerville

Put all CSS files in the head of the page.

Nov 30 10

Case Study: Reducing page size by three quarters

by Toby Somerville

Case study: in-the-end.org home page
Original page size: 5007.8K
Optimized page size: 836.7K

Saving: 83% (over 4mb) and 2 minutes of download time on a broadband connection.

If you would like more  information on how we can supercharge the performance of your web site please contact us.

Nov 2 10

How to save Facebook 100 terabytes and 1.3 trillion http requests

by Toby Somerville

At the time of writing, Facebook is one of the largest websites in the world and boasts over 500 million users. We wanted to see if we could squeeze any extra performance from it. For this example we looked at Facebook’s home page. We did not test the server side code (obviously), we did however look at the code sent to the client. The optimisation we did does not include any changes to actual the code itself.

Summary

The table below shows a summary of the savings we made:

BeforeAfterSaving
HTTP Requests16115 (27%)
CSS45.5 kb45.0 kb127 bytes (compressed)
Javascript184 kb183.6 kb130 bytes (compressed)
HTML9,718 b9,565 b152 bytes (compressed)
Image compression51.4 kb51.4 kb33bytes

That totals 5 requests and 442 bytes saved. Now that may sound pretty insignificant, but with a popular site like Facebook the actual bandwidth saving is significant. It equates to a saving of over 100 terabytes and 1.3 trillion server requests per month (when scaled up to the 260,000,000,000 page views Facebook recieves a month and assuming that a similar savings could be made throughout the site).

The details

Initial impressions show that as expected, a lot of work has already been done to optimize the page; The text based pages all use GZIP compression and the files are served from a CDN (Content Delivery Network).

Headers

The page has been set so the browser must fetch a new version of the page every time it is called by the client. This is something I find slightly surprising, given that the front page doesn’t change very often. I would have expected them to set a far future expiry date or at least an expiry date of a month in the future, (actually set for the 1 January 2000).

Page Size

The total weight of the page is 127.5 kb (compressed) with 16 HTTP requests. On second loading with a primed cache there is only one HTTP request with a total weight of 9.6 kb (if the expiry date was put to a far future date the page weight would be zero as the whole page could be loaded from the client’s cache [assuming caching is turned on]).

HTML

The page has a doctype of XHTML strict, but does not validate correctly, with 12 errors reported by W3C Markup Validation Service.

Original files: 30,071 bytes (uncompressed) 9,718 bytes (compressed) ~68% compression ratio.
After optimisation: 29,599 bytes which equates to approximately 9,565 bytes compressed, giving a saving of 152 bytes(compressed).

JavaScript

Original files: 184,001 bytes (uncompressed)
After Optimisation: 183,566 bytes (uncompressed)
Saving: 435 bytes(uncompressed) or at 70% compression ~130 bytes

CSS

Original files: 45,511 bytes (uncompressed)
After Optimisation: 45,004 bytes (uncompressed)
Saving: 507bytes (uncompressed) or approximately 127bytes compressed at 75% compression ratio.

HTTP Requests: 16

Overall there are four JavaScript files, three stylesheets, seven images, one favicon and the page itself. Optimisation reduced the number of CSS files and JavaScript files to one each a saving of 5 http requests.

Images/Media: 7

The images within the documents are well compressed. Only one image could be further compressed (without a loss of quality), saving 33 bytes.

Conclusion

As you can see, even in a well optimised site there is usually some scope to squeeze out some more performance. We tried to err on the side of caution with compression ratio percentages (the uncompressed bytes savings are accurate). Also we haven’t looked at optimising by changing the page code. we have purely taken what is there and optimised it, no monkey business. There is further scope to wring even more speed out of the page, but that is beyond what we wanted to show here. Over coming posts we’ll be reviewing other popular sites to see if we can find similar performance gains.

Oct 29 10

7 Quick Fixes to Speed up your Website

by Toby Somerville

Two things that are often overlooked when it comes to building websites is speed and efficiency. Everyone is so focused on getting their site ‘out there’, and getting it to the top of Google or appearing on the front page of Digg, that when they get to that elusive and exclusive place they find their sites load slowly or not at all. Not good.

Now there there are a large number of reasons that this happens. So, how do you make your site fast and efficient, no matter what hosting you are using?

Here are a 7 quick and dirty ways to increase the speed and efficiency of your website:

  1. Include JavaScript and CSS as external files
    Putting your JavaScript and CSS in external files allows the same file to be used across multiple pages. The web browser can therefore cache (store) a version locally and so does not need to retrieve it again for every new page. This reduces page load times for the client and your bandwidth usage.
  2. Include the CSS at the top of the page and the JavaScript at the bottom
    That external CSS file should be called in the head of the page as it is a non blocking i.e. can be loading at the same time as the rest web page. JavaScript on the other hand is blocking and must be completely downloaded and run before anything after it can be downloaded. Therefore the JavaScript should be loaded at the end of the page just before the closing body tag.
  3. Make sure all your images are optimized for the web
    Optimizing an image for the web really means making the image as small as possible in terms of file size and dimensions. Images from your digital camera will in general be too big. They should be saved as jpg images at 72 dpi at a maximum quality rating of 80%. An excellent free service to wring every last byte from an image is Smush It.
    The image should also be resized to the correct dimensions for the page. A Free online image editor is  Picnik.
    There is more to image optimization as there are 3 main compression types used on the web: gif, jpg and png. They each have their benefits and disadvantages depending on the image being used and the browser displaying it, but we’ll look at them in another post.
  4. Load as few external files as possible
    Every CSS, JavaScript, image and media object that exists in your page requires a separate call to the Internet to retrieve it. Browsers limit the number of simultaneous connects they can make, so that slows the loading of the page especially if you have a large number of external files. A simple way to reduce the number of external call is to combine as many of your CSS and JavaScript files into as few files as possible.
  5. Make sure your HTML and CSS are valid
    Valid code is rendered faster by web browsers. To check validity use the World Wide Web Consortium’s validator.
  6. GZIP your text based files
    GZIPping is compressing the text base files (HTML, CSS, JavaScript) prior to sending them to the client, this can reduce the file size by up to 80%. It is built into most common web servers by default. Ask your hosting provider to make sure GZIP is enabled for your site.
  7. Use a CDN
    A CDN is a Content Deliver Network. That is a network of servers around the globe that deliver files from the closest geographical location to the client.

Hopefully that has given you a few quick pointers on how to speed up your site. Future posts will give you even more tips on how to make your site perform even faster whilst using fewer resources.