Fast and smooth online experience is important for a webmaster. If you want to attract more visitors and keep the current visitors on your website, you have to make it. There are many methods to speed up website, but one the best ways should be using a CDN.
It can directly reduce the load of your server and bring faster page load times for your clients. That also has a good effect on building good image for your site. Today, we are going to detail this solution and introduce different tips applied to speed up website with a CDN.
Basic Knowledge about CDN
Before we start to introduce the skills to speed up your websites with a CDN, we would like to introduce some basic knowledge about CDN, giving you a general understanding about integrating a CDN in your website. Actually, it is very simple.
You just need to replace the URL of the static resource that your server serves up with a URL of those resources on a CDN. For instance, replace http://yoursite.com/img/feature.png with http://cdn.yourcdnprovider.com/img/feature.png. After doing it, the CDN supplier will host the feature.png.
Because the CDN will host the static resources, your content should be loaded on the CDN network. Generally, we find out two ways: the one is that you can upload the content manually; the other is that the CDN will fetch the content from original servers automatically. With the second way, the original server cannot be yours; with both ways, the resources will be remained till they are updated.
When you modify feature.png, you need to update the corresponding resource on your CDN. If not, the unmodified feature.png will be delivered continuously. It is easy to understand if you look at CDN like a cache, which will be invalidated when sources change. Despite, you will be updating to CSS, images and JS, and you should think about how to update your CDN easily. However, there is no need to worry about it, because we will introduce you a simple solution to handle it.
Getting Started
After setting up CDN, you can clearly find out the performance improvements immediately by saving images, CSS, and JS via CDN. The next step you need to focus on setting up convention, so that you can interchange the URLs within code easily. Basically, you should use the CDN to output the URLs.
Looking at the screenshots of PHP snippet and Javascript snippet above, you can find that it is simple. You can make it work by just adding a general prefix to all of your related URLs. As for CSS, it is variable! That is why you will never write plain CSS. In addition, if you never use LessCSS or SASS, you should do the switch immediately. We recommend LESS, and you can learn about setting up the styles as following:
Now you should have complete control over those URLs that are used to provide your users and clients with static content. If you need to disable your CDN, you just set “CDN = ‘/’;”, then the resources can be pulled from the server.
Configuration of Server
The most projects come with 3 environments which are live/production, staging/testing as well as local/dev. Therefore, based on the environment you need a method to configure the CDN server used. If you do not like to use CDN on dev server, while the testing server will use another CDN which is different from production server, avoiding versioning conflicts. In below, we will show you an example of how to configure your sever with CND:
The configu files should not be examined version control, for these files are different from server to server. However, they need be checked in defaults like cdn.less.default or cdn.php.default, for that when developers deploying code to their server at the very first time, they will make the required configuration files long with your server-specific settings.
Resource and Versioning Invalidation
As we mentioned before, you may deploy diverse releases of static content. Even though major CDNs use Time To Live to make resources invalidate, you will get full control by being off to the version of your resources. Here we take an example of Amazon CloudFlare CDN to show the details about resource invalidation which means you will copy a file like /resources_ver2/ and save it into the versioned folder, or even create a new file named feature_ver2.png, rather than modifying feature.png. Nevertheless, it will be tough to manage!
Remember? We have mentioned previously that you could configure CDN to get resources from the original servers. If you decide to use a versioned folder method to invalidate resources, your URLs will look like: http://cdn.yourcdnprovider.com/ver-1.0.0/img/feature.png.
For invalidating feature.png, you should increment your version to 1.0.1, which will force your CDN to get the different resource copy file. With an easy-to-use URL Rewrite, your web server will cheat the version number within your URL and then deliver feature.png on your server from the same path.
This picture above shows the magic to make invalidate resources a cinch instead of duplicating it. Your CDN and your visitor or clients think they are downloading from the versioned folder.
Other Configuration
You may just modify the existing CDN config files including the version number. It will work, but if you want to remain your framework modular and code, you’d better have a dedicated version configuration file. In the following picture, we will show you how to create and use your version files:
This LESS files is some sort of awkward, because you have to maintain 2 version files. Hopefully, you have some environment scripts can make it easy to manage. However, if you do not have environment scripts, then you need to think about having something else which can help you increment version number easier. It should be the script reading in your existing VERSION, incrementing it, and then writing out version.less and VERSION.
Conclusion
Remember that CDN setup is maintainable and configurable. There’s no doubt that you may find out other ways to improve our ideas, but learn with this should be a good starting point. Beside, by setting up CDN to speed up your website, you also need to learn some excellent CDN providers who is better for your website. Therefore, in the end of this article, we recommend CloudFlare, Amason CDN and MaxCDN.