Front end web hosting sites and apps primarily consist of static content which goes unchanged, such as:
- HTML
- CSS
- JavaScript
- Images
- Video
- Audio
Web pages that contain static assets are essentially prebuilt, which makes it efficiently quicker to grab and render content. In addition, caching systems on edge servers and browsers grab these assets, further boosting web page performance.
Usually content is split across several files, so you will need to find and update whatever you want to offload onto the CDN.
Images
Image heavy sites can slow down pages and break the user's experince, especially with themes, headers, or any other main elements that rely on graphics or photos. Offloading your entire collection on the CDN ensures a backed up cached copy of your assets are stored and delivered on the servers closest to your users.
-
Find an image you want to deliver via the CDN.
http://mysite.com/images/logo.png
Replace the origin:
http://mysite.com
With the your resource:
https://myresource.a.cdnify.io
It should look like:
https://myresource.a.cdnify.io/images/logo.png
Video
Videos are by far the biggest concern on any site as they're huge in file size and consume a lot of data, not to mention can infuriate your users if the stream doesn't load quick enough. Offloading videos like .mp4s on the CDN can dramatically improve load times.
-
Find a video you want to deliver via the CDN.
http://mysite.com/videos/myvideo.mp4
Replace the origin:
http://mysite.com
With the your resource:
https://myresource.a.cdnify.io
It should look like:
https://myresource.a.cdnify.io/videos/myvideo.mp4
CSS/JavaScript
CSS and JavaScript are the backbone of your website, they make it look pretty and bring pages to life, but without this code in place your pages lose their structure. Offloading static code like CSS and JavaScript ensures your site is delivered intact and provides a seamless experience for your end users.
-
Find the static code you want to deliver via the CDN.
http://mysite.com/css/style.css
Replace the origin:
http://mysite.com
With the your resource:
https://myresource.a.cdnify.io
It should look like:
https://myresource.a.cdnify.io/css/style.css
Testing
You want to make sure your assets are being served quicker from the CDN then from the origin, so it's always a good idea to hit several servers where your users are based.
Use a third-party service like Cloud Monitor to bounce and check multiple edge servers - Alternatively, test from your local machine by using the command line: Terminal (Mac/Linux) and MS-DOS (Windows), then run traceroute followed by your asset's URL.
-
Check an asset from your origin to bench mark the speed.
-
Now check the same asset from the CDN to compare.
-
The origin's asset load times should be significantly faster, for example the test ran above brought back the origin's asset at 436.556ms, but the CDN load time was 62.26ms.