{"id":42222,"date":"2017-12-05T15:44:37","date_gmt":"2017-12-05T22:44:37","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=42222"},"modified":"2017-12-10T23:20:57","modified_gmt":"2017-12-11T06:20:57","slug":"what-is-a-cdn-and-why-does-your-website-need-it","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/what-is-a-cdn-and-why-does-your-website-need-it\/","title":{"rendered":"What is a CDN and why does your website need it"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Both as a web designer, and as a user of the internet, you know that a fast website is a good website<\/span><span style=\"font-weight: 400\">Speed of a website is something which you don\u2019t notice, until it\u2019s missing that is.<\/span><\/p>\n<p>Then it becomes frustrating. A bad user experience. A reason for bouncing off a website never to return.<\/p>\n<p>If you want visitors to enjoy their experience on your website, you don\u2019t need to think only about the design of the website, but how <i>fast<\/i><span style=\"font-weight: 400\"> the website performs for ALL of your users!<\/span><\/p>\n<p>Because good design is only one part of a good user experience.<\/p>\n<p>After website design, the speed of page-loading is one of the most important factors which contribute to the success of a website. Besides that, it\u2019s also a ranking factor.<!--more--><\/p>\n<h2>Why is speed so important?<\/h2>\n<p>The necessity of having a fast website is a factor has been studied time and time again.<\/p>\n<p><span style=\"font-weight: 400\">A negative experience is created in the mind of the user who is perceiving a site as being slow. A site\u2019s conversion rate is also affected very negatively by slow performing websites.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Have a look at the graph below by research firm <\/span><a href=\"https:\/\/www.soasta.com\/blog\/mobile-web-performance-monitoring-conversion-rate\/\"><span style=\"font-weight: 400\">Soasta<\/span><\/a><\/p>\n<div id=\"attachment_42223\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42223\" class=\"size-medium wp-image-42223 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/01-mobile-case-study-conversions-500x284.png\" alt=\"Loading time vs conversion rate\" width=\"500\" height=\"284\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/01-mobile-case-study-conversions-500x284.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/01-mobile-case-study-conversions-768x436.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/01-mobile-case-study-conversions.png 800w\" data-sizes=\"(max-width: 500px) 100vw, 500px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/284;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42223\" class=\"size-medium wp-image-42223\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/01-mobile-case-study-conversions-500x284.png\" alt=\"Loading time vs conversion rate\" width=\"500\" height=\"284\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/01-mobile-case-study-conversions-500x284.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/01-mobile-case-study-conversions-768x436.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/01-mobile-case-study-conversions.png 800w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/noscript><p id=\"caption-attachment-42223\" class=\"wp-caption-text\">Loading time vs conversion rate study<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">As can be clearly seen from the graph above, as load time of a page increases, the conversion rate drops drastically. The best conversion rates actually happen when pages take less than 3 seconds to load. Unfortunately, very few websites are actually able to provide such a fast user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Is your website one of these slow-loading sites? Are you killing conversions and are not even aware of it?<\/span><\/p>\n<p><span style=\"font-weight: 400\">But there are solutions which can help boost your website\u2019s speed.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">What is a CDN? <\/span><\/h2>\n<p><span style=\"font-weight: 400\">The term CDN is an acronym which means content delivery network. That is a fancy way of saying, a network of servers which are optimized to deliver the content (of your website) in the most optimal way.<\/span><\/p>\n<p><span style=\"font-weight: 400\">But how does this content delivery network provide benefits to my website and how does it make the website load faster?<\/span><\/p>\n<p><span style=\"font-weight: 400\">The CDN\u2019s network of servers is an infrastructure which is designed to handle the load of traffic of a website better than that of generic hosting services.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Most hosting services, especially the ones aimed at generic websites are geared at creating a stable but generic environment, at a low cost to both the hosting service and the client. These websites typically run on generic environments, such as Apache, PHP, MySQL and other stacks of popular hosting frameworks.<\/span><\/p>\n<p><span style=\"font-weight: 400\">However, the environment has not been specifically optimized and tuned for website speed. Shared hosting services are typically quite slow, particularly in their initial response. The fact that each environment is hosting multiple websites simultaneously means that they suffer from a resource bottleneck problem. Essentially, each website is hosted on the same server as many others, they are \u201csharing\u201d the same resources. But while the term used is sharing, in reality, they are competing for the same resources. To keep costs low, this sharing creates a situation where each request sent to a website has to wait before it can be served. (Incidentally, if you are looking for a good share host, <a href=\"https:\/\/www.collectiveray.com\/web-design\/web-hosting\/inmotion-hosting-review.html\" target=\"_blank\" rel=\"noopener\">check out this review of Inmotion hosting<\/a> &#8211; we really don&#8217;t complain much here)<\/span><\/p>\n<p><span style=\"font-weight: 400\">Have a look at the below. One of my websites, which is aimed primarily for ecommerce (<\/span><a href=\"https:\/\/www.dronesbuy.net\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">dronesbuy.net<\/span><\/a><span style=\"font-weight: 400\">) is hosted on a shared hosting environment, without a CDN.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Have a look at the following waterfall graph:<\/span><\/p>\n<div id=\"attachment_42224\" style=\"width: 727px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42224\" class=\"size-full wp-image-42224 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/waterfall_load_time_dronesbuy.png\" alt=\"Load time without CDN\" width=\"717\" height=\"170\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/waterfall_load_time_dronesbuy.png 717w, https:\/\/webdesignledger.com\/wp-content\/uploads\/waterfall_load_time_dronesbuy-500x119.png 500w\" data-sizes=\"(max-width: 717px) 100vw, 717px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 717px; --smush-placeholder-aspect-ratio: 717\/170;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42224\" class=\"size-full wp-image-42224\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/waterfall_load_time_dronesbuy.png\" alt=\"Load time without CDN\" width=\"717\" height=\"170\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/waterfall_load_time_dronesbuy.png 717w, https:\/\/webdesignledger.com\/wp-content\/uploads\/waterfall_load_time_dronesbuy-500x119.png 500w\" sizes=\"(max-width: 717px) 100vw, 717px\" \/><\/noscript><p id=\"caption-attachment-42224\" class=\"wp-caption-text\">Load time without CDN<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Can you see the waiting time above of 1.26\u00a0<\/span><span style=\"font-weight: 400\">seconds?<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is the time it is taking for the server to start \u201cworking\u201d on the request sent to it. Essentially, at this point, my website is queued up, competing for resources with other sites hosted on the same server as mine.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is an implicit delay in created by using a shared website hosting service<\/span><\/p>\n<p><span style=\"font-weight: 400\">Bear in mind, that this delay is before the server event starts to send any kind of content back to the user.<\/span><\/p>\n<p><span style=\"font-weight: 400\">With a delay of 1.26 seconds, you can forget having a page-speed load time of less than 3 seconds.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is a problem. So how do we go about solving this problem?<\/span><\/p>\n<p><span style=\"font-weight: 400\">On the other hand, a CDN\u2019s primary function is to make websites load fast. Their actual infrastructure setup is designed such that they help deliver a lightning fast website.<\/span><\/p>\n<p><span style=\"font-weight: 400\">But how does a CDN actually speed up my site?<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">How a CDN speeds up your site <\/span><\/h2>\n<p><span style=\"font-weight: 400\">There are a few reasons why a website can load slowly:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400\">the shared hosting server has a lot of websites (to keep the price cheap) and is thus overwhelmed. The response times are therefore slow.<\/span><\/li>\n<li>Images and other large content of the are not optimized and take a lot of time to download.<\/li>\n<li>The website has installed many different WordPress plugins which are generating many CSS and JS files and other resources<\/li>\n<li>The hosting server is located geographically far away from the actual visitors of your website (think website hosted in the US, with readers mostly in Europe)<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400\">There are other reasons, but these are the main ones which generate the largest loading time hits.<\/span><\/p>\n<p><span style=\"font-weight: 400\">You can take mitigating steps to fix each of the above-noted problems individually, but we\u2019ll focus mostly on the last two in this article.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Your shared hosting is overwhelmed and slow<\/span><\/h3>\n<p><span style=\"font-weight: 400\">Shared hosting servers are by their definition &#8211; slow, especially if they are cheap. It\u2019s just the economics of it. <\/span><\/p>\n<p><span style=\"font-weight: 400\">When a hosting company rents or buys a server, they need to share that cost with their clients.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Put simply, and for the sake of example, if your server costs $100\/month and you want to price your plan at $10\/month, you need to host 10 accounts to break even.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If you want to price your plan at $5\/month, you need to host 20 accounts to break even.<\/span><\/p>\n<p><span style=\"font-weight: 400\">You get the gist. The cheaper the plan, the more the accounts you\u2019ll need to host on the same server.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If a hosting service is advertising itself as cheap, and you want your website to be fast &#8211; run a mile!<\/span><\/p>\n<p><span style=\"font-weight: 400\">So what happens, on shared servers, each time somebody visits your website, the server is (at the same time) handling the websites of all of the other users \/ accounts on that same server. \u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">With shared hosting, it can take more than a whole second to even start working on delivering your website\u2019s contents. <\/span><\/p>\n<p><span style=\"font-weight: 400\">You can clearly see that delay on the screenshot above.<\/span><\/p>\n<div id=\"attachment_42225\" style=\"width: 950px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42225\" class=\"size-full wp-image-42225 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared.png\" alt=\"VPS vs Shared hosting environment\" width=\"940\" height=\"409\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared.png 940w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared-500x218.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared-768x334.png 768w\" data-sizes=\"(max-width: 940px) 100vw, 940px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 940px; --smush-placeholder-aspect-ratio: 940\/409;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42225\" class=\"size-full wp-image-42225\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared.png\" alt=\"VPS vs Shared hosting environment\" width=\"940\" height=\"409\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared.png 940w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared-500x218.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/02-VPS-vs-Shared-768x334.png 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/noscript><p id=\"caption-attachment-42225\" class=\"wp-caption-text\">VPS vs Shared hosting environment<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">If you want to make a website fast, this delay of one second in response time is creating a serious issue for you.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Here are our first recommendations<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">If your website is using WordPress as the CMS, <\/span><a href=\"https:\/\/www.collectiveray.com\/web-design\/web-hosting\/kinsta-review.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">choose from the best WordPress hosting companies<\/span><\/a><span style=\"font-weight: 400\">, the ones with known good service and great reviews. Stay away from cheap hosts.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Going for the highest plan you can afford, <\/span><a href=\"https:\/\/www.collectiveray.com\/web-design\/web-hosting\/inmotion-vps-hosting-review.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">a Virtual Private Server is a good balance<\/span><\/a><span style=\"font-weight: 400\"> between a (cheap but slow) shared hosting site and a dedicated server (fast but expensive). With a VPS, your site will have plenty of resources to deal with the load and respond within a few milliseconds, rather than a whole second.<\/span><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">The images of your site are not optimized<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Images are one of the primary reasons why websites can be slow to load.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">It\u2019s always great advice to use images in your articles. They help to create a break in large pieces of text. Images are also great for readability.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u201cAn image is worth a thousand words\u201d or so they say.<\/span><\/p>\n<p><span style=\"font-weight: 400\">But images can also create problems. <\/span><\/p>\n<p><span style=\"font-weight: 400\">Primarily, images which are not optimized for speed can have a serious negative effect on the loading time of a website. <\/span><\/p>\n<p><span style=\"font-weight: 400\">It\u2019s actually quite a laborious process to remember to save each file in a speed-friendly format, and compressing them to a size which is small enough but which does not lose any of the quality of the image.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Besides being labor-intensive, some people are simply not aware of the need to optimize images. <\/span><\/p>\n<p><span style=\"font-weight: 400\">So what\u2019s the solution to this problem? We need to find a method which will automatically optimize images.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Here\u2019s where a CDN comes to the rescue. CDNs are designed to address this problem without requiring any manual intervention<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is because image optimization (including lossless compression) is typically a built-in feature of most CDNs<\/span><\/p>\n<p><span style=\"font-weight: 400\">That means you don\u2019t have to worry about the images. While you handle the design and creation of a website with awesome imagery, the Content Delivery Network will automatically compress and optimize the images.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">The website is using a lot of scripts<\/span><\/h2>\n<p><span style=\"font-weight: 400\">This is another factor which has a bad effect on the speed of a website.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Almost all plugins which are installed on a website have an impact on the loading time of your website &#8211; each plugin adds more and more assets to the site, making it slower and slower.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Each plugin which is used to create a specific piece of functionality is also slowing down the site.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Some plugins create more JS files, CSS files, and other assets, so some are worse than others, but all of them have at least a bit of an effect. The fewer plugins you install &#8211; the better. This is a golden rule.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Each plugin also adds overhead in the form of requests.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Have a look at the following screenshot from a site which has not been optimized for speed. You can see that the performance scores are very slow, whilst the fully loaded time is horrendous.<\/span><\/p>\n<div id=\"attachment_42226\" style=\"width: 1028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42226\" class=\"size-full wp-image-42226 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/03-reqeusts_loading_time.png\" alt=\"Slow loading time due to many requests\" width=\"1018\" height=\"162\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time.png 1018w, https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time-500x80.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time-768x122.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time-970x154.png 970w\" data-sizes=\"(max-width: 1018px) 100vw, 1018px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1018px; --smush-placeholder-aspect-ratio: 1018\/162;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42226\" class=\"size-full wp-image-42226\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/03-reqeusts_loading_time.png\" alt=\"Slow loading time due to many requests\" width=\"1018\" height=\"162\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time.png 1018w, https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time-500x80.png 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time-768x122.png 768w, https:\/\/webdesignledger.com\/wp-content\/uploads\/03-reqeusts_loading_time-970x154.png 970w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/noscript><p id=\"caption-attachment-42226\" class=\"wp-caption-text\">Slow loading time due to many requests<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Thankfully, there are ways to mitigate these problems:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Install as little plugins as possible on any website<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Combine the files created by all the plugins into a few files only<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Enable HTTPS and then HTTP\/2 on your website for better overall loading times<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400\">Once again, a CDN can help with the combining the files into fewer files and delivering that content over HTTP2.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The CDN actually performs compression and minification of JS and CSS files; this makes the overall size of your site\u2019s resources smaller and therefore, faster to load.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Setting up of HTTP\/2 in also highly recommended. HTTP2 is something which is a whole topic of its own so we\u2019ll recommend a couple of great articles <\/span><a href=\"http:\/\/www.webdesignerdepot.com\/2016\/10\/speed-up-your-sites-with-http2\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">on WebDesignerDepot<\/span><\/a><span style=\"font-weight: 400\"> and <\/span><a href=\"https:\/\/www.collectiveray.com\/wordpress\/wordpress-tutorials\/wordpress-http2.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">on CollectiveRay blog<\/span><\/a><span style=\"font-weight: 400\"> which we\u2019ve already written.<\/span><\/p>\n<p><span style=\"font-weight: 400\">HTTP\/2 has been created specifically to make improvements in the loading time of websites. It is designed to address certain shortcomings which older technologies did not deal with.<\/span><\/p>\n<p><span style=\"font-weight: 400\">CDN services typically can enable HTTP\/2 on your website, simply through the flick of a switch. HTTP\/2 requires that HTTPS has been enabled on your site. Once again, CDNs typically have built-in support to serve content over HTTPS. Thanks to the CDN, you can enable HTTPS without incurring the cost and complication which is associated with secure website certificates. A CDN is also able to <\/span><a href=\"https:\/\/www.incapsula.com\/cdn-guide\/cdn-and-ssl-tls.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">improve the overhead associated with the SSL\/TLS handshake<\/span><\/a><span style=\"font-weight: 400\"> (which is a heavy operation). This ensures that even with HTTPS enabled &#8211; the site incurs no overhead.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There\u2019s still one problem which we haven\u2019t addressed which can slow down the loading speed of your website.<\/span><\/p>\n<p><span style=\"font-weight: 400\">What is it and how can we fix it?<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">The geographical location of your website server<\/span><\/h2>\n<p><span style=\"font-weight: 400\">There is one thing which can negatively your website\u2019s loading speed, even after you\u2019ve performed all sorts of speed optimizations mentioned above.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Have a look at the following diagram.<\/span><\/p>\n<div id=\"attachment_42227\" style=\"width: 354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42227\" class=\"size-full wp-image-42227 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/04-server_location_vs_user_location.png\" alt=\"Hosting server location vs visitor location\" width=\"344\" height=\"323\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 344px; --smush-placeholder-aspect-ratio: 344\/323;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42227\" class=\"size-full wp-image-42227\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/04-server_location_vs_user_location.png\" alt=\"Hosting server location vs visitor location\" width=\"344\" height=\"323\" \/><\/noscript><p id=\"caption-attachment-42227\" class=\"wp-caption-text\">Hosting server location vs visitor location<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">This shows the typical time it takes for web data to travel from the one side of the Atlantic to the other. You can see that loading a website hosted on a different continent that your website is visiting from, is a problem. If your website is hosted in the continental US, any visitor outside of the US will experience this problem. <\/span><\/p>\n<p><span style=\"font-weight: 400\">Of course, this applies all over the world. It can even happen within continents if the visitor is located far away from the hosting server.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The distance your website\u2019s content has to travel has a direct (and negative) effect on how fast your website loads.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If your website has a\u00a0localized audience, choose a good hosting service which is physically close to your target audience. If you are targeting users in New York, choose to host your website on a good server in New York.<\/span><\/p>\n<p><span style=\"font-weight: 400\">However, what do you do if your website caters to an international audience?<\/span><\/p>\n<p><span style=\"font-weight: 400\">You can\u2019t choose a server which is located close to the visitors of your website. <\/span><\/p>\n<p><span style=\"font-weight: 400\">However, there is a solution. As you might have guessed, the solution involves a CDN, because a CDN service specifically addresses this problem.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Let\u2019s see an updated version of the previous diagram, this time we see how the loading time is affected if we use the services of a CDN such as <\/span><a href=\"https:\/\/www.incapsula.com\/cdn-content-delivery-network\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Incapsula CDN<\/span><\/a><span style=\"font-weight: 400\">, one of the largest players in the CDN industry.<\/span><\/p>\n<div id=\"attachment_42228\" style=\"width: 478px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42228\" class=\"size-full wp-image-42228 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/05-cdn_vs_no_cdn.png\" alt=\"Without CDN vs with CDN\" width=\"468\" height=\"746\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/05-cdn_vs_no_cdn.png 468w, https:\/\/webdesignledger.com\/wp-content\/uploads\/05-cdn_vs_no_cdn-314x500.png 314w\" data-sizes=\"(max-width: 468px) 100vw, 468px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 468px; --smush-placeholder-aspect-ratio: 468\/746;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42228\" class=\"size-full wp-image-42228\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/05-cdn_vs_no_cdn.png\" alt=\"Without CDN vs with CDN\" width=\"468\" height=\"746\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/05-cdn_vs_no_cdn.png 468w, https:\/\/webdesignledger.com\/wp-content\/uploads\/05-cdn_vs_no_cdn-314x500.png 314w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><\/noscript><p id=\"caption-attachment-42228\" class=\"wp-caption-text\">Without CDN vs with CDN<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Just like we discussed at the beginning of this article, a CDN service is designed to shorten the distance that content has to travel to reach the visitors of a website.<\/span><\/p>\n<p><span style=\"font-weight: 400\">A CDN service is set up by creating a network of hundreds of servers in different locations in multiple countries and geographies. These servers, known as caching servers or edge servers, each contain a local copy of the images and files which your website needs serve.<\/span><\/p>\n<p><span style=\"font-weight: 400\">When a user accesses your website, these files are served from the nearest physical to your visitor.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This reduces the problem of distance and makes a website much faster to load compared to if a website was not using a CDN.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Have a look the following diagram, which shows the geographical distribution of caching servers around the world &#8211; making it possible to always serve content from a location which is physically close to your visitor.<\/span><\/p>\n<div id=\"attachment_42229\" style=\"width: 980px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42229\" class=\"wp-image-42229 size-large lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-970x465.png\" alt=\"CDN global server map\" width=\"970\" height=\"465\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-970x465.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-500x240.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-768x368.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map.png 1250w\" data-sizes=\"(max-width: 970px) 100vw, 970px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/465;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42229\" class=\"wp-image-42229 size-large\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-970x465.png\" alt=\"CDN global server map\" width=\"970\" height=\"465\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-970x465.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-500x240.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map-768x368.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/06-global_server_map.png 1250w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/noscript><p id=\"caption-attachment-42229\" class=\"wp-caption-text\">CDN global server map<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">How to set up a CDN for free<\/span><\/h2>\n<p><span style=\"font-weight: 400\">The great thing about CDN services is that they operate on a freemium model &#8211; typically they offer a free plan. This free plan provides the localized caching functionality we have shown above. <\/span><\/p>\n<p><span style=\"font-weight: 400\">If your website grows beyond the limits of the free plan, you can then move to a higher plan which suits the needs of your website better.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The easiest way to implement a CDN does not even need a plugin, it\u2019s done by what is knows as a <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Reverse_proxy\"><span style=\"font-weight: 400\">reverse proxy<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This only requires you to perform some changes to the DNS settings of your domain. You\u2019ll find exact guidance for most hosts from the CDN you will opt for, or you can ask for support from the CDN\u2019s support staff.<\/span><\/p>\n<p><span style=\"font-weight: 400\">You can see below how your website together will work together with the CDN to send content to visitors. The origin server is your website\u2019s server.<\/span><\/p>\n<div id=\"attachment_42230\" style=\"width: 764px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42230\" class=\"size-full wp-image-42230 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/10-using-reverse-proxy-cdn-2.png\" alt=\"CDN setup using proxy server\" width=\"754\" height=\"290\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/10-using-reverse-proxy-cdn-2.png 754w, https:\/\/webdesignledger.com\/wp-content\/uploads\/10-using-reverse-proxy-cdn-2-500x192.png 500w\" data-sizes=\"(max-width: 754px) 100vw, 754px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 754px; --smush-placeholder-aspect-ratio: 754\/290;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42230\" class=\"size-full wp-image-42230\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/10-using-reverse-proxy-cdn-2.png\" alt=\"CDN setup using proxy server\" width=\"754\" height=\"290\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/10-using-reverse-proxy-cdn-2.png 754w, https:\/\/webdesignledger.com\/wp-content\/uploads\/10-using-reverse-proxy-cdn-2-500x192.png 500w\" sizes=\"(max-width: 754px) 100vw, 754px\" \/><\/noscript><p id=\"caption-attachment-42230\" class=\"wp-caption-text\">CDN setup using proxy server<\/p><\/div>\n<p><span style=\"font-weight: 400\">The CDN server actually receives the hit when a user visits your website. It then sends the request to your site, such that any necessary dynamic content is generated. Once it gets a response, the CDN sends the dynamic content and all static resources to the visitor.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This removes a lot of load from your hosting server &#8211; making your website load faster and able to handle much more visitors simultaneously.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400\">Conclusion &#8211; are you ready to make your website faster?<\/span><\/h2>\n<p><span style=\"font-weight: 400\">As we\u2019ve seen in this article, setting up a CDN can start from the very cheap price of free! Besides not having to spend anything, the loading speed of your website will be much-improved giving your site\u2019s visitors a better user experience for your visitors.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">If you\u2019re looking to have a fast website, a CDN is a must.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Both as a web designer, and as a user of the internet, you know that a fast website is a good websiteSpeed of a website is something which you don\u2019t notice, until it\u2019s missing that is. Then it becomes frustrating. A bad user experience. A reason for bouncing off a website never to return. If [&hellip;]<\/p>\n","protected":false},"author":1940,"featured_media":43045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[528,477,476,377,525,378],"tags":[12683,15034,15032,15033],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/42222"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1940"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=42222"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/42222\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/43045"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=42222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=42222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=42222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}