How a Content Delivery Network Can Help Speed Up Your Website


Published on

In this day and age, time is money—both for website developers and site visitors. Page load times can be the difference that impacts search engine rankings, ad revenue, and overall sales. Content Delivery Networks (CDNs) will cut the load time of assets between 20-50%, especially for users outside of the United States which amounts to an improved customer experience.

By speeding up CDNs, with geographically distributed servers, you can help deliver the fastest possible download for all users. In the past, CDNs were cost prohibitive and mostly reserved for sizable organizations who could afford to pay thousands of dollars per month. Recently, there has been an overall shift in CDNs that even the lowest traffic web sites can afford.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • If you are here, you are already interested. Content Delivery networks can speed up page loading for your users domestically and internationally at now affordable prices. Large and small sites can use it.
  • Need to understand whats happening under the hood. We ’ ll see this diagram throughout the presentation. DNS Lookup = finding your server Connect = Establishes the connection to your server. Send = Client sends the HTTP request tot he server Wait = Server processes request, starts to send databack. Overloaded servers will be slow in this stage. Load = Client loads the content. Far away servers will have longer loading times than up close servers in most cases.
  • Content Delivery Network large geographically distributed system of servers deployed in multiple datacenters Left only one server right CDN multiple servers causing the distance traveled to be much shorter.
  • CDNs aren ’ t new At first it was expensive and you didn ’ t have many options Initially used to server up large zip files (think dialup days)
  • Wikipedia lists over 100 CDN providers and that isn ’ t a comprehensive list Pricing can range from Free, to a few cents a month up to thousands of dollars a month A lot of factors play into pricing, such as number of pops, service levels, overall speed etc Its now possible to stream using CDNs, deliver small assets, large files Most CDNs use a variety of technology to supplement end-to-end delivery, P2P offloads the burden to its clients
  • One server can be overloaded much more easily than multiple (the wait section of the http request) Even on the fastest pipes distance still matters in round trip time - Pretend you were in a car example on the left, the request goes from Alabama all the way over to California and then back example on right, the same request gets routed over to Georgia, this is a much faster round trip Remember, the load section of the HTTP request (pink) is affected by distance
  • CDNs can have a lot of technical mumbojumbo. In these next two sections I ’ ll walk you through the major terms you ’ ll need to understand to get a cdn running
  • We ’ l be going over two different integration methods Origin Pull and Push Will go into more detail later but this feature set is one of the first items I ask a CDN provider when shopping
  • Out of the hundreds of CDN providers out there, how do you choose the right one? Determine what integration method you want, pull or push Most of the time sites use a CDN to better serve users in far away locations. Look at your traffic, got a lot from SE Asia, does the CDN provider have a CDN pop? How much is it going to cost you. Is it a metered plan, are there monthly service fees? Do they offer P2P support - This is currently a minimal concern but sites with media services should pay attention What will you be serving? Are you streaming video, does the CDN support your video format etc?
  • Staging - This should be as close to production as possible. That means having a CDN setup on it, yes that needs to be tested. Also make sure that this doesn ’ t cost you too much extra with your CDN provider.
  • Remember different staging and production CDN buckets. Thats to avoid multi-environment conflict. Think of having the same image that changes Invalidating objects = when uploading changes to files they should have different names. If they don ’ t you have to invalidate the object. Invalidating can be slow and affect different POPs at different times Stacking CDN FB Example
  • 1) Check that files are coming from the CDN and not your server 2) Keep an eye on waiting time and receiving time Waiting = server processing time Receiving = loading time (transferring the file from the server to your computer)
  • Sites like and can be used for load testing. Services of this type can asses first views, repeat views, individual file loading time etc from different locations (depends on the service you are using). Some services allow you to remote desktop into servers around the world where you can use real world browsers to test loading like you would with standard browser testing.
  • There is a drupal module for that The cdn module is an easy way to integrate just about any CDN with your drupal site.
  • Remember Origin Pull from a few slides ago? In some ways its the easiest to setup. When a user requests a file, if the cdn has it, it serves it, if it doesn ’ t, it asks your server for the file and then serves it. We ’ ll cover some of the SEO gotchas in a few minutes. Not all CDNs support Origin Pull
  • You upload the files to your CDN. If a cdn gets a request for a file it doesn ’ t have, it returns a 404. Does have some benefits You can preprocess your files like minimizing css or modyfing images before uploading your files The file conveyor method requires you to install a daemon to watch for file changes and then push them to your cdn.
  • Excluding paths for your CDN is important. Javascript and Fonts (like WOFF files) can cause issues on older browsers that don ’ t support CORS (I avoid CDNing JS and Fonts due to this) If you are custom generating content or images per user you probably don ’ t want the CDN to get a hold of that. Module authors, there is now support to hook into the CDN module to blacklist certain paths that you don ’ t want getting in the CDN
  • Sometimes just called an Expires header Tells browsers to hold on to a file for a very long time. This saves loading time and server hits since the browser won ’ t bother pinging the server at all Sometimes it will change paths to various assets. 99% of the time the automated settings are fine. It does require aggregating and compressing css files
  • DNS resolution time can lead to a significant amount of user perceived latency. Behind the scenes it tells the operating system to query the domain name before any assets are requested for that domain Hopefully by the time you need to load assets for that domain the operating system has completed its query and cashed the information While not directly CDN related the cdn module takes care of adding the link tag to your pages
  • If using origin pull users/bots could go to your CDN and pull up the CDN cached version of pages, use canonical URLs to not get penalized by search engines If your CDN lets you set a CDN specific robots.txt, do it!
  • The next few slides will walk you through setting up a CDN using cloudfront and using the CDN module on your site This is not an endorsement of Amazon Cloudfront, merely an example In this example we ’ ll setup a CDN to do serving of basic assets (images, css etc)
  • Log in or create your account Once in find the cloudfront icon in the sea of icons.
  • In the top left hand corner find the “ create distribution ” button It will create a modal dialog asking if you want “ download ” or “ stream ” choose Download for normal asset serving Stream is used for streaming audio/video. This example we ’ ll use Download
  • Origin domain name is a URL to access your server and its assets. You don ’ t need the http:// in there It is possible to have multiple origins but that is beyond the scope of this talk I did change the Origin Protocol Policy to be Match viewer. You can leave it http only if you won ’ t have any HTTPS on your site.
  • I usually leave the Create Default Behavior in its default settings Note: Object Caching. Set it to Use Origin Cache Headers if you are using the CDN module to set the Far Future Expires Forward Query Strings, leave it at “ no ” for this example since we ’ re just serving basic assets.
  • I also leave Distribution Details default. Alternate domain name CNAMEs can be set to give your CDN a pretty name like I generally don ’ t change it since it causes an additional DNS lookup when you define a CNAME Users will be able to tell you are using cloudfront by looking at the headers.
  • Once you ’ ve created your distribution click on the info bucket Note: Distribution Status. Until it ’ s Deployed you won ’ t be able to use it Make note of the domain name, we ’ re going to need that for our cdn module.
  • After enabling the CDN module, go into configuration for the module and click on the Details tab For this example choose origin pull In the CDN mapping box paste in that URL from the info screen. You can enable far future once you ’ ve verified everything is working Don ’ t forget to click on the General tab and enable the CDN too
  • How a Content Delivery Network Can Help Speed Up Your Website

    1. 1. How a CDN Can Help Speed Up Your Website #drupalCDN
    2. 2. #drupalCDN Andrew M RileyDirector of Drupal Development @AndrewMRiley
    3. 3. Agenda #drupalCDN Why you The CDN Using a CDN Example should Module
    4. 4. Goal #drupalCDNAt the end of this presentation you will:1. Understand why you and your clients should use acontent delivery network2. Be able to set up a CDN for your Drupal site.
    5. 5. #drupalCDNWhy you The CDN Using a CDN Exampleshould Module
    6. 6. Anatomy of a Request #drupalCDN Client Client/Server Client Server Transfer 1. DNS Lookup 2. Connect 3. Send 4. Wait 5. Load More Info:
    7. 7. What is a CDN? #drupalCDN One vs Many
    8. 8. CDN History #drupalCDN Around for over 15 years Few players at first Initially extremely expensive Initially focused on large file distribution Photo Source:
    9. 9. CDN Today #drupalCDN Many players in the game From Free to Expensive Covers video streaming, assets, etc Includes new technology like P2P
    10. 10. So Why? #drupalCDN Client Client/Server Client Server Transfer 1. DNS Lookup 2. Connect 3. Send 4. Wait 5. Load
    11. 11. #drupalCDNWhy you The CDN Exampleshould Module
    12. 12. Integration Methods #drupalCDN CDN CDN Origin Pull Push Your Server Your Server
    13. 13. The right one? #drupalCDN Integration Method Analyze your traffic and correlate it with POPs Cost P2P Support Media types
    14. 14. Environments #drupalCDN Development - probably doesn’t need one Staging - should have one Production - of course!
    15. 15. Common Pitfalls #drupalCDN Multi-Environment Conflict File same name Invalidating Objects Command Propagation/Lag Stacking CDNs Photo Source:
    16. 16. Browser Testing #drupalCDN Client Client/Server Client Server Transfer 1. DNS Lookup 2. Connect 3. Send 4. Wait 5. Load
    17. 17. Service/Remote Testing #drupalCDN Both Free and Pay options Use this for load time testing Remote Desktop tends to give you more options
    18. 18. #drupalCDNWhy you Using a CDN Exampleshould
    19. 19. Origin Pull #drupalCDN Easiest Method CDN Pulls from your server on first load Can sometimes have SEO implications Your Server
    20. 20. File Conveyor #drupalCDN aka Push CDN Should work with *any CDN Allows for file pre-processing Requires system access for daemon Doesn’t have to come from your server Your Server
    21. 21. Excluding Paths #drupalCDN You don’t want to CDN everything Avoid JS and Fonts (CORS IE < 8) Exclude custom generated images/data Module authors: hook_cdn_blacklist() and hook_cdn_blacklist_alter()
    22. 22. Far Future Expiration #drupalCDN Will change some URLs Has special requirements Speeds up loading for return visitors (
    23. 23. DNS Prefetching #drupalCDN Speeds up the initial HTTP request Adds a link tag to your pages Client Client/Server Client Server Transfer 1. DNS Lookup 2. Connect 3. Send 4. Wait 5. Load
    24. 24. SEO Issues #drupalCDN If using origin, map your Canonical URL Update your robots.txt
    25. 25. #drupalCDNWhy you The CDN Using a CDNshould Module
    26. 26. Log In #drupalCDN
    27. 27. Create Bucket #drupalCDN
    28. 28. Create Bucket #drupalCDN
    29. 29. Create Bucket #drupalCDN
    30. 30. Create Bucket #drupalCDN
    31. 31. Create Bucket #drupalCDN(Click the info icon for your bucket)
    32. 32. Setup Drupal Module #drupalCDN
    33. 33. Test Your CDN #drupalCDN Log out of your site Load up the network view Reload your page Check CSS and other assets Check for breaks too! Photo Source:
    34. 34. Summary #drupalCDN CDNs can fit all site sizes They’ll reduce server load They’ll reduce load time Cost isn’t really a factor any longer Photo Source:
    35. 35. #drupalCDN
    36. 36. Mediacurrent helps organizations architect custom websites byleveraging our proven processes and deep expertise in Drupal. @mediacurrent