Client Area

Do Drupal Right

Andrew M Riley's picture
Andrew M Riley  | Director of Drupal Development
Aug
08
2012

Do you hate it when you go to a site and the loading of the page takes forever? Most of the time that is spent waiting isn't really for the page to load, it’s for the various assets like images, css and javascript to be transferred from the server. Using simple tools provided in most browsers (or through an add-on/plugin) you can determine just how much those assets are slowing you down.

As a first step you'll need to locate the network panel within the developer tools for your browser:

  • Chrome - Select the Wrench menu then select Tools -> Developer Tools and then the Network tab
  • Internet Explorer 9 - Hit the F12 key
  • Safari 6 - Develop menu then select Show Web Inspector and click on the stopwatch icon
  • Firefox - After installing Firebug, click on the Firebug icon and select the Net tab
  • For the remainder of this post I'll be using Chrome as my example platform.

The second thing you'll want to do is load the page with the Network tab open. This will allow the developer tools to record what is happening in the page and will show you which files are loading. The network panel will also show you the time taken to load the files.

For this blog post we'll be focusing on the total time for the page to load. In this case the total time is 1.18 seconds. This is the time that it's taken my system to make a request to the server, which may be located thousands of miles away, the server to form a response and send it back the distance to my office. From an end users perspective this round trip “distance” is what causes the perceived delay in loading a page.

Before using a CDN:

The third step is to add a Content Delivery Network (CDN). A Content Delivery Network is a geographically distributed system of servers that keep a local copy of your assets/content to be able to better serve it to local users. In Drupal the process of adding a CDN can be pretty easy if you use the CDN module.

After using the CDN module:

In my example I've used the CDN module along with Amazon Cloudfront to save an additional two tenths of a second on the page loading time. While this decrease in loading feels low, it does have financial impact. Amazon found that every 100ms increase in load time decreases sales by 1% (Kohavi and Longbotham 2007)

The loading time issue is magnified for users that are further away from your server. For example, without a CDN the page loads in 6.17 seconds from Sydney, Australia. When the CDN is enabled, that load time greatly decreased to 4.25 seconds. Imagine the sales impact using the 1% Amazon rule from a worldwide audience perspective.

Helpful tip: Try out loads.in to test your site load time from different parts of the globe.

There are many other steps you can do with the CDN module and CDNs in general to get more performance both domestically and world wide out of your website. For a more indepth look at CDNs, how to use them, common pitfalls and using CDNs in development environments be sure to sign up for my Acquia Webinar, "How a Content Delivery Network Can Help Speed Up Your Website."

Share This Post