0
Laat ons weten wat u vindt van deze sessie! Vul de evaluatie
in via www.techdaysapp.nl en maak kans op een van de 20
prijz...
Reducing latency on
the web with the Azure
CDN
Maarten Balliauw
@maartenballiauw
Who am I?
• Maarten Balliauw
• Antwerp, Belgium
• Technical Evangelist, JetBrains
• Founder, MyGet
• AZUG
• Focus on web
•...
Agenda
• Why use a CDN?
• The Azure CDN
• Blob containers
• Cloud services
• Serving dynamic content over the CDN
• Conclu...
Why use a
CDN?
How browsers work...
•Request fetching <html>
• Download CSS
• Download images
• Download JavaScript
• Download Google Ana...
How browsers work...
http://www.browserscope.org/?category=network
Browser # connections / host Max # connections
Chrome 3...
Why care? I use bundling and
minification!
Speed of light and TCP don’t like each
other
•US East – US West = 7400 km
• or 25 ms at speed of light (299792,458 km/seco...
Combine TCP slow start and fibre optics
US East – US West
~90ms + TCP slow start
256 kB ~ 10 TCP roundtrips
that 90 ms bec...
Cost of web load
•Serving static files costs CPU
• Full IIS pipeline for a tiny static file
•Serving static files costs I/...
So there are some problems on the
Internet...
•Browsers / connections
•Speed of light / TCP slow start
•Cost of web load (...
“The Internet sucks and
so does your server.”
- Andy Cross - @andybareweb
Workarounds!
•Browsers / connections
• Serve some content off a different hostname
•Speed of light / TCP slow start
• Move...
The Azure CDN
The Azure CDN
•Serve content from storage / cloud service
•Separate hostname (custom domain possible)
•Many locations arou...
CDN locations (April 1st, 2014)
http://msdn.microsoft.com/en-
US/library/azure/gg680302.aspx
How it works: no CDN
How it works: with CDN
Demo
Creating a CDN endpoint
What did we just do?
•First request
•Second request (on same endpoint)
yawn!
How to use this in real life?
•Create one/more public blob containers
•Upload static files in there
(CSS, images, scripts,...
Demo
An application with a CDN endpoint
How to delete content from the CDN?
•Read a book or 2 and wait  (7 days default...)
•Think about this upfront!
• If you k...
Versioning
•Enable query strings on the CDN endpoint
•Use a query string with a meaningful version number
•CDN will keep a...
Cloud services will make life easier
•We had to “manually” upload content to storage
• May be good, may be cumbersome, dep...
Demo
Using Cloud Services as the CDN origin
Best-practices for content on the CDN
•Set headers!
• Cache-Control
• Content-Type
• Content-Encoding
•Version content!
•H...
Serving
dynamic
content
Defining “dynamic content”
•Content that is generated
• Parameters from query string, ASP.NET routing, ...
• And/or based ...
Demo
Serving dynamic content
Conclusions
Conclusions
• Why use a CDN?
• The Azure CDN
• Blob containers
• Cloud services
• Serving dynamic content over the CDN
Wha...
Thank you!
http://blog.maartenballiauw.be
@maartenballiauw
http://amzn.to/pronuget
Laat ons weten wat u vindt van deze sessie! Vul de evaluatie
in via www.techdaysapp.nl en maak kans op een van de 20
prijz...
Reducing latency on the web with the Azure CDN- TechDays NL 2014
Upcoming SlideShare
Loading in...5
×

Reducing latency on the web with the Azure CDN- TechDays NL 2014

1,558

Published on

Serving up content on the Internet is something our web sites do daily. But are we doing this in the fastest way possible? How are users in faraway countries experiencing our apps? Why do we have three webservers serving the same content over and over again? In this session, we’ll explore the Azure Content Delivery Network or CDN, a service which makes it easy to serve up blobs, videos and other content from servers close to our users. We’ll explore simple file serving as well as some more advanced, dynamic edge caching scenarios.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,558
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Maarten
  • Twitter does too... Still there are 9 requests on this page going to the same host, causing delays in rendering the page.
  • TCP slow start: start with 1 concurrent connection, then upgrade to multiple when ACK is received
  • So for 256 kB
  • Go to the portalCreate a new CDN endpointExplain it can be based on a storage accountExplain it can be based on a cloud serviceExplain options briefly, we’ll cover most of them in more detailExplain linking a custom domain is possibleExplain SSL is possible, unfortunately with a MS provided cert which is useles for custom domainProvisioning takes +/- an hour for settings to propagate to all CDN locations, be patient!Do a tracert to e.g. az591544.vo.msecnd.net and show that it resolves to a nearby location and does not go overseasNow make a request to the CDN https://az591544.vo.msecnd.net/demo/helloworld.gif Explain it is coming from https://azurecdndemo.blob.core.windows.net/demo/helloworld.gif Mention it has to come from a public container
  • Open Demo1StaticOpen the _Layout.cshtml and change all scripts/css at the top to the CDN urlsLaunch the application and note it does not work because our content is not on the CDN yetGo to /Home/Synchronize and explain what it does in the background, show the codeExplain what we are doing (uploading, setting content type, ...)Mention by default blobs are cached for 7 days! 7 days!Illustrate this by updating bootstrap.min.js and adding an alert in there, resync and refresh: NOTHING HAPPENSThere are some solutions to this:Set the cache-control header on the blob, see /Home/Synchronize source code for an example. Note you would have toknow what the expiry will be...Work with query string parameters, for example version. Update our _Layout.cshtml to use a version / timestamp / whatever query stringThe CDN will now create a cache per file/querystring
  • Open Demo2StaticOpen the _Layout.cshtml and note the application is using bundlingLet’s configure bundling to use the CDN when not debuggingOpen bundle config and mention we can enable CDN, which will use the alternate URL when not in debug mode. This allos nice debug/release workflow.Mention we still want to use the query string versioning! New deployment should yield new contents! // Configure CDN var version = System.Reflection.Assembly.GetAssembly(typeof(BundleConfig)).GetName().Version.ToString(); var cdnUrl = &quot;http://az592218.vo.msecnd.net/demo2static/{0}?&quot; + version; bundles.UseCdn = true;Explain the URL we are using as the alternative URL and why there is no /cdn in thereDEPLOY! Run the application and notice it fails because no content could be found. Why???We’re not rewriting content to the /cdn folder! Good thing is we can solve that with some Web.config rewrite rulesAdd &lt;rewite&gt; block and explain what it doesDeploy, now it works, yay!Go through some other web.config options:setting cache-control and expires headers!http compression!
  • Open Demo2StaticShow the application: /MemeGenerator with some quotes (when i peel onions, onions cry – counted to infinity, twice – can divide, by zero – refactors, with his fists)Open the MemeGeneratorController and go through codeExplain this one is not too heavy, but still measuring strings, doing computation, ...Imagine world cup score table, a bit more dynamic (where we hope Belgium score increases pretty much all the time) and high load, why not serve that up through the CDN. Yes, delay on data freshness, but fast and not too much work for the server.http://az592218.vo.msecnd.net/demo2static/MemeGenerator/Show?top=When%20I%20peel%20onions&amp;bottom=Onions%20cry
  • Transcript of "Reducing latency on the web with the Azure CDN- TechDays NL 2014"

    1. 1. Laat ons weten wat u vindt van deze sessie! Vul de evaluatie in via www.techdaysapp.nl en maak kans op een van de 20 prijzen*. Prijswinnaars worden bekend gemaakt via Twitter (#TechDaysNL). Gebruik hiervoor de code op uw badge. Let us know how you feel about this session! Give your feedback via www.techdaysapp.nl and possibly win one of the 20 prizes*. Winners will be announced via Twitter (#TechDaysNL). Use your personal code on your badge. * Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prizes are examples
    2. 2. Reducing latency on the web with the Azure CDN Maarten Balliauw @maartenballiauw
    3. 3. Who am I? • Maarten Balliauw • Antwerp, Belgium • Technical Evangelist, JetBrains • Founder, MyGet • AZUG • Focus on web • ASP.NET MVC, Azure, SignalR, ... • MVP Azure & ASPInsider • Big passion: Azure • http://blog.maartenballiauw.be • @maartenballiauw Shameless self promotion: Pro NuGet - http://amzn.to/pronuget2
    4. 4. Agenda • Why use a CDN? • The Azure CDN • Blob containers • Cloud services • Serving dynamic content over the CDN • Conclusions
    5. 5. Why use a CDN?
    6. 6. How browsers work... •Request fetching <html> • Download CSS • Download images • Download JavaScript • Download Google Analytics •Finite # of concurrent requests per host (and in total)! • Bundling/minification • Use multiple hosts
    7. 7. How browsers work... http://www.browserscope.org/?category=network Browser # connections / host Max # connections Chrome 32 6 10 Firefox 26 6 17 IE 9 6 35 IE 10 8 16 IE 11 13 17 Safari 7 6 17 Android 4 6 17 IEMobile 9 6 60
    8. 8. Why care? I use bundling and minification!
    9. 9. Speed of light and TCP don’t like each other •US East – US West = 7400 km • or 25 ms at speed of light (299792,458 km/second in a vacuum) • or 37 ms through fiber optics (66% of SoL, glass refraction index 1.5) •TCP request/response, ACK request/response • double that 37 ms, add some compute: ~90 ms US East to West •Theoretical max. packet size is 64 kB • usually +/- 1500 bytes (MTU) •TCP slow start http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and- the-lower-bound-of-web-performance/
    10. 10. Combine TCP slow start and fibre optics US East – US West ~90ms + TCP slow start 256 kB ~ 10 TCP roundtrips that 90 ms becomes 900 ms... http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and- the-lower-bound-of-web-performance/
    11. 11. Cost of web load •Serving static files costs CPU • Full IIS pipeline for a tiny static file •Serving static files costs I/O • Files have to be copied from file stream to response stream • Why do this? Why not let the server handle our dynamic content? •Cookies! • Request/response cycle adds the cookie • Even for a 1 kB PNG
    12. 12. So there are some problems on the Internet... •Browsers / connections •Speed of light / TCP slow start •Cost of web load (CPU, I/O and cookies)
    13. 13. “The Internet sucks and so does your server.” - Andy Cross - @andybareweb
    14. 14. Workarounds! •Browsers / connections • Serve some content off a different hostname •Speed of light / TCP slow start • Move content closer to the user •Cost of web load (CPU, I/O and cookies) • Serve off a cookieless domain • Move content off the web server and let someone else handle it
    15. 15. The Azure CDN
    16. 16. The Azure CDN •Serve content from storage / cloud service •Separate hostname (custom domain possible) •Many locations around the globe •DNS anycast to get content close to user
    17. 17. CDN locations (April 1st, 2014) http://msdn.microsoft.com/en- US/library/azure/gg680302.aspx
    18. 18. How it works: no CDN
    19. 19. How it works: with CDN
    20. 20. Demo Creating a CDN endpoint
    21. 21. What did we just do? •First request •Second request (on same endpoint) yawn!
    22. 22. How to use this in real life? •Create one/more public blob containers •Upload static files in there (CSS, images, scripts, ...) •Update your application to the new URLs
    23. 23. Demo An application with a CDN endpoint
    24. 24. How to delete content from the CDN? •Read a book or 2 and wait  (7 days default...) •Think about this upfront! • If you know expiry, set the Cache-Control header (shorter = more updates) • If you don’t, use versioning in query strings • Better: use both
    25. 25. Versioning •Enable query strings on the CDN endpoint •Use a query string with a meaningful version number •CDN will keep a cache per URL per query string • /foo/bar?v=1 • /foo/bar?v=2 • /foo/bar?v=3
    26. 26. Cloud services will make life easier •We had to “manually” upload content to storage • May be good, may be cumbersome, depends! • Would be nice if we could “deploy and forget” •Set a cloud service as the CDN origin • Will serve all content from /cdn URL • Same cache-control rules as with storage
    27. 27. Demo Using Cloud Services as the CDN origin
    28. 28. Best-practices for content on the CDN •Set headers! • Cache-Control • Content-Type • Content-Encoding •Version content! •HTTP compression on origin = HTTP compression on CDN
    29. 29. Serving dynamic content
    30. 30. Defining “dynamic content” •Content that is generated • Parameters from query string, ASP.NET routing, ... • And/or based on data •Content that refreshes, but not too often • Anything > a couple of minutes •Examples • Charts, images, generated documents, json, API’s, ...
    31. 31. Demo Serving dynamic content
    32. 32. Conclusions
    33. 33. Conclusions • Why use a CDN? • The Azure CDN • Blob containers • Cloud services • Serving dynamic content over the CDN What have we learned?
    34. 34. Thank you! http://blog.maartenballiauw.be @maartenballiauw http://amzn.to/pronuget
    35. 35. Laat ons weten wat u vindt van deze sessie! Vul de evaluatie in via www.techdaysapp.nl en maak kans op een van de 20 prijzen*. Prijswinnaars worden bekend gemaakt via Twitter (#TechDaysNL). Gebruik hiervoor de code op uw badge. Let us know how you feel about this session! Give your feedback via www.techdaysapp.nl and possibly win one of the 20 prizes*. Winners will be announced via Twitter (#TechDaysNL). Use your personal code on your badge. * Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prizes are examples
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×