The number one performance issue I have with my clients Sitefinity sites is their inability to manage their images. This last week I have had a job to review image management on one site and explain to another client the difference between 1MB and 20Kb image effect on their site. And to top it off a third client with a database of over 1GB of image storage. So I thought I would do a couple of posts on the subject starting with using a CDN.
To quickly cover it off. A CDN is a Content Distribution Network run by a cloud provider. They have servers located around the world. When a client needs a static resource such as a image, script or document, rather than traveling around the world to your web server they get a cached copy at a server nearest them.
Note: Going forward I will just refer to images but keep in mind documents and even videos can be used as well.
The result is less stress on your web server and a faster delivery of your content to browsers.
In Sitefinity this can also be extra helpful if you are storing your images in the database as it then also reduces the calls and thus resources on your database environment.
External storage for your libraries
You can of course store your library data in an external storage such as Azure or AWS or even just the local file system. This removes the data out of the database. This is not a bad thing to do especially if your database size is growing. The only downside is that when you backup your database you need to take a snap shot of that storage as well to ensure that all image references match. Otherwise you may find a lot of 404 missing images. I use SQL Azure and have restore to any point in time so backing up the image to sync is an effort. For me I start with keeping images and docs in the database and use a CDN. I move it out when the I feel the extra backup hassle and out of sync risk is worth it.
How it works
Sitefinity has documention on this and this nice diagram below. Once set up, your image url's are changed to that of the CDN. When a browser gets your html it sees the image is located at http://yourcdn.com/image.jpg and contacts that system for the image. The first ever request for that image won't exist in the CDN but the CDN knows where to get it from. It then pulls the image from your site, stores it in its global cache and then serves the image to the client browser. The next request from another browser and the image will be deleivered from the CDN and not from your server.
The best bit is that there really is no code or 'integration' modules to set up. It just works and the price of these CDN's is 'cheap as chips' so its an easy win.
I will run through a quick config of using the Azure CDN for Sitefinity.
First thing is to set up your CDN on Azure. When creating the service you can choose Azure Storage Blobs, Web Apps (formerly Web Sites) or even provide a custom Url. Me, I run my site in an Azure Web App so I selected my site from the drop down list. It then provides me the sites url. But I could have easily just typed the url into the Custom Origin option.
Once created you have some options to decide on and you will get a endpoint address.
Https or not? If your site is secured then you will want https.
If you enable this then the CDN will cache different query strings. To save CDN space you may consider not enabling this. Sitefinity allows you to specify query string params for different image sizes, so if you do use that feature, then you will want this setting enabled. (You can create different end points for different libraries in your system.) Though something else to consider. If you update the image how does the CDN know. Well it doesn't but if you have query string enabled then Sitefinity will generate a new query string value, ?sfvrsn=8, and thus the CDN will fetch the new version. So by default I think you should enable this.
You will have your default domain name as specified in your end point address but you can assign a custom domain. You can see I have created and assigned one. You can then use that rather than the Azure generated one. Looks nicer I think.
Currently you can not use a custom domain and HTTPS. It is a requested feature and on its way but until then you will need to use the azure domain to deliver your images. If you are just using HTTP then you are free to use a custom domain.
Any item you serve through a CDN is public. If the item needs to be secured or for members only then do not serve it through a CDN.
The above set up is also the same if you want to use AWS's Cloud Front.
First and recommend. Do not set up the CDN on the default Database and File System providers. Create new ones and then move selected resources to it. (under the library actions to can select to 'Move to new storage'.)
Me I created a new storage provider from Settings -> Basic -> Storage providers of type database using my Sitefinity database. Then
go to the Settings -> Advanced-> Libraries -> Blob Storage -> Blob Storage Providers and add a new
Value: your cdn endpoint. For me - https://az781013.vo.msecnd.net
Click save. You now need to restart your site for the changes to take affect. (I know, hassle)
Move a library to use the new provider and volia! Those images will now be served and saved at the CDN. You can check this by looking at the network traffic in yoru browser.
Thanks for reading and feel free to comment - Darrin Robertson