To those who are not aware of CDN (Content Delivery Network) is a system of distributed servers (network) that deliver web resources (JavaScript, CSS, Fonts, Images, etc…), based on the geographic locations of the user. It is effective in speeding up the delivery of content of websites with high traffic and websites that have global reach.
Advantages of CDN are
- Browsers limit the number of concurrent connections (file downloads) to a single domain. Most permit four active connections so the fifth download is blocked until one of the previous files has been fully retrieved. You can trick the browser to download more files from publically available CDN’s
- Resources/Files may be pre-cached so better performance if it is already downloaded by the web browser
- Your website might be hosted in a single server whereas CDN’s are distributed across various locations of the world so again latency to download a resource files gets reduced
- CDN has a version control mechanism so you can point to any version of the resource.
- Most of the hosting providers charge you based on the bandwidth consumption with the help of CDN you can save bandwith by pointing it to CDN.
- Decreases your servers load when the resources which you need for your website is downloaded from CDN. It also provide protection from large surge in traffic
Is linking GitHub resources directly to your website good idea? It is not a good idea because GitHub is not a CDN instead it is a repository based on Git. So how do you point to the GitHub? There are many CDN’s which provide a solution for this.
RawGit.com
You just need to copy paste the GitHub url
for example if you are url is https://github.com/xxx/repo/blob/master/js/some.js
It will output something like
- For Production => https://cdn.rawgit.com/xxx/repo/7d639525/js/some.js
- For Development => https://rawgit.com/xxx/repo/master/js/some.js
There is a catch in using this service because ‘this is a free service, so there are no uptime or support guarantees.‘ also execessive traffic will be throttled and blacklisted if you are using Development URL.
JsDelivr.com
JsDelivr.com is an Open Source CDN and it can deliver sources from GitHub, NPM and WordPress packages
// load any GitHub release // note: we recommend using npm for projects that support it https://cdn.jsdelivr.net/gh/user/repo@version/file // load jQuery v3.2.1 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js // use a version range instead of a specific version https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js // omit the version completely to get the latest one // you should NOT use this in production https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js // add ".min" to any JS/CSS file to get a minified version // if one doesn't exist, we'll generate it for you https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js // add / at the end to get a directory listing https://cdn.jsdelivr.net/gh/jquery/jquery/
Click here to know how this works