Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Improve Your Website's Speed? Can CDN Resolve It?

DZone's Guide to

How to Improve Your Website's Speed? Can CDN Resolve It?

Are you developing a website, but having trouble with the page load speed? Read on to get an overview of CDNs and they can mitigate this problem.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

9 Elegant Ways to Enhance Your Site's Load Speed:

  • Minimize HTTP Requests - Your site loads faster if they have to wait for fewer HTTP requests.

  • Combine all of your CSS into an external file and load it from the <head> section so that the external pages can be cached and it loads faster.

  • Use asynchronous or defer functions to load JavaScript files efficiently. Place the <script> tags in the <head> section like we did with our CSS files. It is advisable to place the <script> tags without defer or asynchronous loading at the bottom of the <body>.

  • Ensure your images are properly compressed and optimized for the web.

  • Use server-side caching to create an HTML page for a URL so that dynamic sites don't have to build a page each time that URL is requested.

  • Utilize Gzip which will significantly compress the size of the page sent to the browser which can then extract the information and can display it for the user.

  • Eliminate 301 redirects wherever possible, as 301 redirects force the browser to a new URL and require the browser to wait for the HTTP requests to come back.

  • Serve your static content from a “Cookie-Free” subdomain. HTTP requests consist of cookies to enhance the individual user's experience, but using cookies for static contents is unnecessary. Eliminating cookies from HTTP requests for Static content can improve the page speed significantly.

  • Last but not least, if your site is capable of attracting a significant amount of global users then implementing a CDN to allow users to download information in parallel can help your site to load faster. Nowadays, CDNs are becoming increasingly affordable with services like Amazon CloudFront (Thanks to the free tier of AWS) and there are many free services like Cloudflare, etc.

References:

https://moz.com/learn/seo/page-speed

https://www.reginaldchan.net/serving-static-content-from-cookieless-subdomain/

https://gtmetrix.com/serve-static-content-from-a-cookieless-domain.html


Interpretation of a CDN:

Content Delivery Networks (CDNs) serve the content of a site to a user based on their geographic location through its “Distributed Data Centers” across the globe.

NCDN_-_CDN.png

Each data center consists of two primary building blocks:

  • Points of Presence (PoPs)

  • Caching Edge Servers

Points of Presence (PoP):

PoPs are strategically distributed data centers using certain efficient algorithms that are responsible for communicating with users in their geographic vicinity to reduce the number of hops (intermediate portions in the traversing path from a source to destination), and round trip time by taking the content closer to the site’s user. PoP holds a numerous number of caching servers.

Reference:

Hops : https://en.wikipedia.org/wiki/Hop_(networking)

Caching Edge Servers:

Edge servers are the ones which store and deliver cached files to accelerate website load times and reduce bandwidth consumption. Caching Edge servers contain multiple storage drives along with high amounts of RAM resources to store the most frequently accessed items.

The Mission of CDN:

CDNs are designed to reduce the latency delay between the moment a request to load a webpage occurs and the moment its content actually appears on your browser’s screen.

Latency delay intervals are hugely impacted by the physical distance between your location and the website's hosting server location.

A CDN's mission involves virtually shortening the physical distance to improve site rendering speed and performance.

cdns1.png

Source:wpmudev

Working of a CDN:

CDN stores a cached version of its content in multiple geographical locations named PoPs (Points of Presence) to minimize the distance between the visitors and your site's server. Each PoP contains a number of caching servers to deliver the content to visitors within its proximity.

CDN caches your content in many places at once to provide vast coverage to your users. For example, when a user in Australia accesses your US-hosted website, the requests will be handled through a local Australian PoP so that the user's requests and your website’s responses need not travel the full width of the globe and back. This makes the request handling and delivering responses much quicker.

what-is-a-cdn-how-does-it-work.png

Source: keycdn

The Rise of CDN:

Almost everyone uses CDNs because nowadays over half of all traffic has already been served by CDNs. Those numbers are rapidly growing year by year. Every one of us interacts with CDNs on a daily basis, like when reading articles on news sites, shopping online, watching videos, or glancing at social media feeds.

12 Reasons to Use a CDN:

CDNs work by storing a cached version of their content in data centers distributed strategically across the globe which results in:

  • Improving your page load speed since your website content will be served from your nearest data center.

  • Availability of your site even when your website hosted server is down since CDNs push (literally copies) your website’s content to multiple data centers.

  • Using Distributed Servers in contrast to a Single Centralized Server reduces bandwidth consumption.

  • Handling high traffic by distributing your website’s traffic across multiple caching edge servers.

  • Maintaining Load balance between multiple servers.

  • Localizing the coverage of your site without more cost.

What-Is-A-CDN-CDN-Benefits-1.png

Source: wpsuperstars

  • Routing your traffic to CDN’s DNS aids in blocking spammers, scrapers, and other bad bots through their security measures.

  • Protecting your website from DDoS attack.

  • Modern CDN offers high capacity infrastructures.

  • Detailed Usage Analytics of your site traffic, bandwidth usage, etc., in each CDN vendors Dashboard.

  • Built-in version control to track and revert the changes if necessary.

  • Global availability of your content, etc.

Cons of Using a CDN:

Nothing is perfect nor ideal for all cases. Likewise, CDN also has its own imperfections. If you find that there is no need to extend your services globally because the vast majority of your users are from the same region as your hosting then using a CDN may seem to be unnecessary, as it can increase the intermediate DNS lookups and introduces another unessential connection point between the visitor and an already nearby server. This, in turn, can end up increasing your site's loading speed which is really a painful thing.

So, in this case, it is smarter to avoid using even some free CDNs. But hosting your website contents on a server closer to your target users' country or configuring a “Cookie-Free” subdomain for serving static contents can be handy for non-global users to attain the benefits of latency boost. To explore more about Cookie-free subdomains, please refer the links below.

References:

https://www.reginaldchan.net/serving-static-content-from-cookieless-subdomain/

https://www.keycdn.com/support/how-to-use-cookie-free-domains/

https://www.gulshankumar.net/serve-static-content-from-a-cookieless-sub-domain/

http://www.ravelrumba.com/blog/static-cookieless-domain/

Implementing a CDN:

CDN architecture and implementation differ from one vendor to another. We took an initiative to get our hands dirty on CDN for a sample blogging site with hefty images, CSS, JS libraries and built in Wordpress platforms.

Enabling Cloudflare CDN for your site is pretty simple, you should add your site in your registered Cloudflare account. Once your site is added, CloudFlare gives you their name servers (ns1.cloudflare.com) and proceed to modify your root domain DNS configurations (e.g., domain.com) and those of your subdomains (e.g., www.domain.com, img.domain.com) so that it should be the default inbound gateway for all incoming traffic.

Please visit https://support.cloudflare.com/hc/en-us/categories/200275218-Getting-Started to get detailed step-by-step instructions for implementation.

In general, in your root domain, change an A record to point to one of the CDN's IP ranges. In each subdomain, modify its CNAME record to point to a CDN-provided subdomain address (e.g., ns1.cdn.com). This results in the DNS routing all visitors to your CDN instead of being directed to your original server.

If this sounds weird, you need not worry because CDN vendors offer step-by-step instructions throughout the activation phase. In addition, they provide assistance via their support team too.

Performance Analysis:

We were delighted to witness the enhancement achieved in “Fully loaded time from 18.0s to 9.5s” after implementing CloudFlare CDN in our sample blogging WordPress site. Though we improved our page speed drastically, the scores may seem poor because we did not implement any other optimization techniques mentioned earlier (click to explore) other than CDN.

withoutcdn.png

Report generated for a sample WordPress site without CDN and no other optimizations.

withCDN.png

Report generated for a sample WordPress site with Cloudflare CDN only and no other optimizations

P.S: Page load speeds and scores are subjected to change based on certain things like their web hosted server, technology used, and implementation, etc.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
web dev ,website performance ,content delivery networks ,cdn

Published at DZone with permission of Abuthahir Sulaiman. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}