{"id":853,"date":"2017-12-15T05:51:56","date_gmt":"2017-12-15T05:51:56","guid":{"rendered":"http:\/\/stackofcodes.in\/?p=853"},"modified":"2017-12-15T05:51:56","modified_gmt":"2017-12-15T05:51:56","slug":"how-to-setup-a-cdn-to-speed-up-your-website","status":"publish","type":"post","link":"https:\/\/www.chandansharma.co.in\/blog\/how-to-setup-a-cdn-to-speed-up-your-website\/","title":{"rendered":"HOW TO SETUP A CDN TO SPEED UP YOUR WEBSITE"},"content":{"rendered":"

HOW TO SETUP A CDN TO SPEED UP YOUR WEBSITE::<\/i><\/h2>\n
\u00a0<\/i><\/div>\n
\u00a0<\/i><\/div>\n
\n
\n
If you\u2019re looking for ways to speed up your website, one of the best is to setup a CDN. You can think of a\u00a0Content Delivery Network<\/a>\u00a0as a service that hosts your website\u2019s static files and delivers them to the client instead of your own web server. Direct benefits of this are reduced load on your own server and faster download times for the client. Sounds good? Let\u2019s get to it.<\/div>\n

Considerations<\/h3>\n
This how-to will offer some high level tips and tricks that should apply to any web project. Some specifics will be shown in the examples, but this is definitely not a copy-and-paste solution that will solve your CDN ambitions.<\/div>\n

The Basics<\/h3>\n
First you need a basic understanding of how to integrate a CDN into your website. It\u2019s simple really: for any static resource you serve up, replace its URL with the URL of the same resource on the CDN.
\nFor example:\u00a0http<\/span>:<\/span>\/\/mywebsite.com\/img\/logo.png<\/span><\/span><\/span>
\nbecomeshttp<\/span>:<\/span>\/\/cdn.mycdnprovider.com\/img\/logo.png<\/span><\/span><\/span>\u00a0.<\/p>\n

This means that your CDN provider will need to host\u00a0logo.png;<\/em>\u00a0let\u2019s talk about that next.<\/div>\n

The CDN hosts your static resources so somehow your files must be loaded onto its network. There are two ways this usually happens: You upload the files manually, or the CDN fetches the files automatically from an\u00a0origin server<\/em>. With the latter method, there\u2019s no reason why the origin server can\u2019t also be your web server. With both methods, the resources persist until they\u2019re updated. This means that if you modify\u00a0logo.png<\/em>\u00a0you must update its corresponding resource on the CDN, otherwise the old, unmodified version will continue to be delivered. You can almost think of the CDN as a type of cache that needs to be invalidated when the source changes. Regardless, there\u2019s no doubt you\u2019ll be making updates to your CSS, JS and images so you need to consider how you\u2019ll easily update the CDN. Don\u2019t worry \u2013 we\u2019ll cover a simple, yet elegant solution for this.<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
\n

Getting Started<\/h3>\n
\n
You\u2019re going to see immediate performance improvements by serving up your images, JS and CSS through your CDN so we\u2019ll focus on these. You\u2019ll want to set up some sort of convention that makes it easy to interchange URLs within your code. Basically, whenever you output a URL, use your CDN instead.<\/div>\n
<\/div>\n
index.php::<\/strong><\/em>\n\n\n<?php define('CDN', 'http:\/\/cdn.mycdnprovider.com\/'); ?>\n<html> \n<head> \n<script type='text\/javascript'>\n \/* A javascript global for using the CDN inside scripts *\/ \nvar CDN = '<?php echo CDN ?>'; \n<\/script> \n\n<!-- (generated server side from less\/style.less) --> \n\n<link rel='stylesheet' href='<?php echo CDN ?>css\/style.css' \/> \n<\/head> \n<body> \n<img src='<?php echo CDN ?>img\/logo.png' \/> \n<button>Submit<\/button> \n<script type='text\/javascript' src='<?php echo CDN ?>js\/main.js'><\/script> <\/body>\n<\/html>\n\njs\/main.js<\/strong><\/em>\n\n(function() {\n\u00a0 \u00a0 var preloadImage = document.createElement('img');\n\u00a0 \u00a0 preloadImage.src = CDN + 'img\/button_hover.png';\n\n})();\n\n\n<\/pre>\n<\/div>\n
\n
As you can see in the PHP and Javascript snippets above, it\u2019s as simple as using a global prefix in front of all your relative URLs. But what about CSS? There\u2019s no such thing as CSS variables, which is why you should never write vanilla CSS. If you don\u2019t already use either\u00a0SASS<\/a>\u00a0or\u00a0LessCSS<\/a>, then make the switch \u2013 NOW! We prefer LESS, so here\u2019s how to set up your styles.<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\n
\n
style.less<\/strong><\/em>\n\n\n@CDN: 'http:\/\/cdn.mycdnprovider.com\/';\n\nbutton {\n\n\u00a0 \u00a0 background-image: url('@{CDN}img\/button.png');\n\n\u00a0 \u00a0 &:hover {\n\n\u00a0 \u00a0 \u00a0 \u00a0 background-image: url('@{CDN}img\/button_hover.png');\n\n\u00a0 \u00a0 }\n\n}<\/pre>\n<\/div>\n
You should now have full control over the URLs used to serve up static content to the client. If you want to disable the CDN, you only need to set\u00a0CDN<\/span>\u00a0<\/span>=<\/span>\u00a0<\/span>‘\/’<\/span>;<\/span><\/span><\/span>\u00a0and resources will be pulled from your server.<\/div>\n
Server Configuration<\/h3>\n
This might be enough to satisfy you, but there\u2019s more. Most projects have three environments \u2013 local\/dev, staging\/testing and live\/production so you should have a method to configure which CDN server is used based on the environment. You likely don\u2019t want to use any CDN on your dev server and your testing server should use a different CDN from the production server to avoid versioning conflicts (discussed later). So all you need are a few configuration files. (The following example is using the\u00a0CakePHP<\/a>\u00a0framework)<\/div>\n
\n
app\/Config\/cdn.php<\/span><\/p>\n
PHP<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n<\/div>\n<\/td>\n
\n
\n
<?php<\/span><\/div>\n
\/\/ A CakePHP configuration file<\/span><\/div>\n
$config<\/span> =<\/span> array<\/span>(<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>‘CDN’<\/span> =<\/span>><\/span> array<\/span>(<\/span>‘path’<\/span> =<\/span>><\/span> ‘http:\/\/cdn.mycdnprovider.com\/’<\/span>)<\/span><\/div>\n
)<\/span>;<\/span><\/div>\n
?><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
\n
bootstrap.php<\/span><\/p>\n
PHP<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/div>\n<\/td>\n
\n
\n
.<\/span>.<\/span>.<\/span><\/div>\n
Configure::<\/span>load<\/span>(<\/span>‘cdn’<\/span>)<\/span>;<\/span><\/div>\n
define<\/span>(<\/span>‘CDN’<\/span>,<\/span> Configure::<\/span>read<\/span>(<\/span>‘CDN.path’<\/span>)<\/span>)<\/span>;<\/span><\/div>\n
.<\/span>.<\/span>.<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
\n
less\/cdn.less<\/span><\/p>\n
LESS<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
@CDN<\/span>:<\/span> ‘http:\/\/cdn.mycdnprovider.com\/’<\/span>;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
\n
style.less<\/span><\/p>\n
LESS<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n<\/div>\n<\/td>\n
\n
\n
@import ‘cdn’;<\/span><\/div>\n
\/* @CDN defined above, the rest of your LESS below *\/<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
The configuration files above shouldn\u2019t be checked into version control because they\u2019re presumably different from server to server. Instead, check in defaults such as\u00a0cdn<\/span>.<\/span>php<\/span>.<\/span>default<\/span><\/span><\/span>\u00a0and\u00a0cdn<\/span>.<\/span>less<\/span>.<\/span>default<\/span><\/span><\/span>, with the intention that the developer deploying the code to the server for the first time will create the required config files with the server-specific settings.<\/div>\n<\/div>\n
<\/div>\n
\n
\n
Versioning & Resource Invalidation<\/h3>\n
As mentioned in the\u00a0Basics\u00a0<\/i>section, you\u2019re likely to deploy multiple releases of your static files. Most CDNs use some sort of TTL to invalidate resources, but if you want full control, you\u2019re better off to version your resources. If you\u2019re using Amazon\u2019s CloudFront CDN service, here is a good discussion on\u00a0resource invalidation<\/a>. This essentially means that instead of modifying\u00a0logo.png<\/em>, you create a new file called\u00a0logo_ver2.png<\/em>\u00a0or put a copy in a versioned folder such as\u00a0\/resources_ver2\/<\/em>. However, that would be a nightmare to manage wouldn\u2019t it?<\/div>\n
We previously mentioned that you can configure your CDN to fetch resources from an\u00a0origin server<\/em>. If you use the versioned folder solution for the invalidation problem, your URLs would look something like this:\u00a0\u00a0http<\/span>:<\/span>\/\/cdn.mycdnprovider.com\/ver-1.0.0\/img\/logo.png<\/span><\/span><\/span>. To invalidate\u00a0logo.pn<\/em>g<\/em>\u00a0you would increment the version number to\u00a01.0.1\u00a0<\/em>thereby forcing the CDN to fetch a\u00a0different<\/em>\u00a0copy of the resource. With a simple URL Rewrite, our web server can spoof the version number in the URL and deliver\u00a0logo.png<\/em>\u00a0from the same path on the server.<\/div>\n
\n
.htaccess<\/span><\/p>\n
<\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n<\/div>\n<\/td>\n
\n
\n
<IfModule mod_rewrite.c><\/div>\n
RewriteEngine On<\/div>\n
RewriteBase \/<\/div>\n
RewriteRule ^ver-[0-9]+.[0-9]+.[0-9]+(.*)$ $1 [L,NC]<\/div>\n
RewriteCond %{REQUEST_FILENAME} !-d<\/div>\n
RewriteCond %{REQUEST_FILENAME} !-f<\/div>\n
RewriteRule ^(.*)$ index.php?\/$1 [QSA,L]<\/div>\n
<\/IfModule><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
This little piece of magic makes it a cinch to invalidate any resource without duplicating it. The CDN and the client browser think they\u2019re downloading from some versioned folder, but we know better, don\u2019t we!<\/div>\n
More Configuration<\/h3>\n
You might be tempted to just modify your existing CDN configuration files to include a version number. This would work, but to keep your code and framework modular it\u2019s best to have a separate VERSION config file. You\u2019ll want to check this file into version control, especially if you have multiple developers working on the same project. You\u2019ll have to come up with some sort of scheme as to when you increment the VERSION number, but that\u2019s out of the scope of this discussion. Create your version files and make use of them:<\/div>\n
\n
VERSION<\/span><\/p>\n
<\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
1.0.0<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
\n
bootstrap.php<\/span><\/p>\n
PHP<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/div>\n<\/td>\n
\n
\n
.<\/span>.<\/span>.<\/span><\/div>\n
Configure::<\/span>load<\/span>(<\/span>‘cdn’<\/span>)<\/span>;<\/span><\/div>\n
define<\/span>(<\/span>‘VERSION’<\/span>,<\/span> file_get_contents<\/span>(<\/span>APP<\/span>.<\/span>DS<\/span>.<\/span>“Config”<\/span>.<\/span>DS<\/span>.<\/span>“VERSION”<\/span>)<\/span>)<\/span>;<\/span><\/div>\n
define<\/span>(<\/span>‘CDN’<\/span>,<\/span> Configure::<\/span>read<\/span>(<\/span>‘CDN.path’<\/span>)<\/span>.<\/span>VERSION<\/span>.<\/span>‘\/’<\/span>)<\/span>;<\/span> \/* the trailing slash is important *\/<\/span><\/div>\n
.<\/span>.<\/span>.<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
\n
version.less<\/span><\/p>\n
LESS<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n<\/div>\n<\/td>\n
\n
\n
@VERSION<\/span>:<\/span> ‘1.0.0’<\/span>;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
\n
style.less<\/span><\/p>\n
LESS<\/span><\/div>\n<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n<\/div>\n<\/td>\n
\n
\n
@import ‘cdn’;<\/span><\/div>\n
@import ‘version’;<\/span><\/div>\n
@CDNVER<\/span>: ‘@<\/span>{<\/span>CDN<\/span>}<\/span>@<\/span>{<\/span>VERSION<\/span>}<\/span>\/’<\/span>;<\/span><\/div>\n
<\/div>\n
button <\/span>{<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>background-image: url(‘@<\/span>{<\/span>CDNVER<\/span>}<\/span>img\/button.png’<\/span>)<\/span>;<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>&:hover <\/span>{<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>background-image: url(‘@<\/span>{<\/span>CDNVER<\/span>}<\/span>img\/button_hover.png’<\/span>)<\/span>;<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span><\/div>\n
}<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
The above LESS files are a little awkward because now you have two version files to maintain. Hopefully your environment scripts will make this easy for you to manage. If you don\u2019t have any environment scripts, you should consider having something that makes it easy for you to increment the version number \u2013 a script that reads in the current VERSION, increments it, then writes out VERSION and version.less.<\/div>\n
Conclusion<\/h3>\n
The key concepts to setup a CDN that is configurable and maintainable are:<\/div>\n