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.
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
How a Content Delivery Network Can Help Speed Up Your Website
1. How a CDN Can Help Speed
Up Your Website
#drupalCDN
2. #drupalCDN
Andrew M Riley
Director of Drupal Development
@AndrewMRiley
3. Agenda #drupalCDN
Why you The CDN
Using a CDN Example
should Module
4. Goal #drupalCDN
At the end of this presentation you will:
1. Understand why you and your clients should use a
content delivery network
2. Be able to set up a CDN for your Drupal site.
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: http://j.mp/QSQQNR
8. CDN History #drupalCDN
Around for over 15 years
Few players at first
Initially extremely expensive
Initially focused on large file distribution
Photo Source: http://j.mp/NfLona
9. CDN Today #drupalCDN
Many players in the game
From Free to Expensive
Covers video streaming, assets, etc
Includes new technology like P2P
10. So Why? #drupalCDN
Client Client/Server Client Server Transfer
1. DNS Lookup 2. Connect 3. Send 4. Wait 5. Load
12. Integration Methods #drupalCDN
CDN CDN
Origin Pull Push
Your Server Your Server
13. The right one? #drupalCDN
Integration Method
Analyze your traffic and correlate it with POPs
Cost
P2P Support
Media types
14. Environments #drupalCDN
Development - probably doesn’t need one
Staging - should have one
Production - of course!
15. Common Pitfalls #drupalCDN
Multi-Environment Conflict
File same name
Invalidating Objects
Command Propagation/Lag
Stacking CDNs
Photo Source: http://j.mp/PrYuCh
16. Browser Testing #drupalCDN
Client Client/Server Client Server Transfer
1. DNS Lookup 2. Connect 3. Send 4. Wait 5. Load
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. #drupalCDN
Why you
Using a CDN Example
should
http://drupal.org/project/cdn
19. Origin Pull #drupalCDN
Easiest Method
CDN
Pulls from your server on first load
Can sometimes have SEO implications
Your Server
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. 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. Far Future Expiration #drupalCDN
Will change some URLs
Has special requirements
Speeds up loading for return visitors (http://j.mp/PNz6Z3)
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. SEO Issues #drupalCDN
If using origin, map your Canonical URL
Update your robots.txt
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: http://j.mp/SfWrmQ
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: http://j.mp/RccQYb
36. Mediacurrent helps organizations architect custom websites by
leveraging our proven processes and deep expertise in Drupal.
@mediacurrent mediacurrent.com
Hinweis der Redaktion
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 webpagetest.org and loads.in 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 cdn.example.com 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