Sep 13, 2018

CDN for Performance

CDN stands for content distribution network. Without such a CDN all your static files are being served by your web server from a single location. That's all fine until a visitor from the opposite side of the globe tries to open your site. The distance between your server and your visitor leads to a quite massive latency issue for all the assets, which have to be loaded. Even if your site is super fast on your end it might feel horribly slow on your visitor's end.
A CDN takes your assets and stores them on servers at strategic locations around the world. As soon as a visitor comes to your site, the CDN will then find the nearest possible server and load all assets from there. This significantly increases request times and your site will load faster no matter where your visitors come from.

Push and Pull Zones

CDNs usually work with so called push and pull zones.

Push zones

With a push zone, you upload all your assets via FTP or SSH to the CDN's origin server and the CDN will spread them from there for you. This is perfect for static assets that don't change too often or if you have some custom deploy script, which will handle the uploads for you when something changes. You will then get a public URL for your assets from the CDN. Something like
http://mypushzone.mycdn.com/myfile.jpg
It actually feels a lot like a simple static file server, but with magic superpowers.

Pull zones

A pull zone is much easier to setup. Your original assets stay on your server and must be reachable there. You route every request through the Pull zone, which will then fetch the assets from your server according to the URL.
So for example when your logo is located at
http://yourdomain.com/assets/images/logo.png
you would simply request the logo from your pull zone like this:
http://mypullzone.mycdn.com/assets/images/logo.png
The pull zone would then fetch the logo on the first request and spread it for you across the network. You can define an expiration date for your assets, so the CDN knows when to fetch the logo again.