Products
Solutions
Learn
Company
Hero Texture Shield 2000x1220
Blog

Why Your Web CDN is Broken and How to Fix It

By: Chris Ferrell | September 23, 2022
Print Article

Current Approaches

Content Delivery Networks (CDNs) play an important role in delivering web applications, websites and APIs. They provide cached content from a location closest to website/app visitors and customers. This reduces the time it takes for customers to see content show up in their browsers. Because it speeds up site delivery time, it also directly results in a better customer experience and more sales for eCommerce companies.

For a CDN to work effectively, it needs to be configured in a way that works well with the underlying website technology – also known as the “tech stack.” How it’s configured is often known as the “caching strategy.”

However, many CDNs don’t allow for any configuration changes in the code base of the tech stack. Engineers working on the site don’t have control over this critical performance infrastructure. Instead, updates must be made by additional teams/stakeholders in isolated user interfaces, making testing and debugging extremely difficult and time-consuming for the engineers.

This means that with ordinary CDNs, your configuration updates are not version-controlled within the codebase. This lack of centralized control presents a risk to your tech stack and causes confusion which consumes significant time and resources across multiple teams, as finding issues introduced into the tech stack is like searching for a needle in a haystack (a haystack you might not even have direct access to). Without integrating into the codebase, the only way to track down issues is either by relying on customer complaints and/or input from a separate team. This causes a lack of transparency, accountability and efficiency, all of which can cause site downtime, lost revenue and unhappy customers.

In addition, caching on CDN’s is traditionally limited to static data. Developers understand the dynamic data in their code, but with traditional CDNs they can’t manage caching. So it’s extremely difficult or impossible to cache a large portion of the most important content on a website, which impacts overall performance.

Introduction to Edgio AppOps

The Edgio AppOps platform makes it easy for teams to build, release, protect and accelerate their web apps and APIs. It offers a full suite of features to deploy, secure, and monitor a site.

For developers, one key piece of the offering is EdgeJS. EdgeJS is CDN configuration in javascript. Unlike traditional CDNs, EdgeJS extends and integrates caching into your development workflow by design. It offers the ability to easily update CDN configurations for dynamic data and static content.

The Edgio web CDN can be proactively tested locally or in various non-production environments before going live. This allows developers to easily migrate to production after changes have been thoroughly vetted via Q/A in identical but different environments.

The workflow benefits of this are huge – it eliminates the need for maintenance windows, ends needless rollbacks, makes it easier to track and find issues, and stops mistakes caused by lack of visibility into CDN configuration updates, improving overall team velocity and enhancing site performance for your customers/website end-users.

Advantages of Our Approach

By controlling configuration updates in EdgeJS directly in the codebase, a previously disconnected part of the update process can be fixed. Updates can happen with increased speed and quality, which reduces time spent finding issues or rolling back, improving time to market.

Predictive Prefetch

Edgio AppOps also lets teams build sub-second performance into their web pages. In addition to static and dynamic caching, EdgeJS provides access to predictive prefetching into the browser. Prefetching speeds up your visitors' experience by locally caching API calls, webpages and assets before the user tries to visit the page. Using a prebuilt custom service worker, which works in harmony with the edge network, EdgeJS prefetches HTML and API data directly from all the URLs in the visitor viewport, highly visited pages, or custom-defined routes. The ability to prefetch into the browser in the user’s device makes Edgio the only edge network custom-designed to work smartly with prefetching requests, treating them uniquely over a standard request.

Prefetching also includes dynamic data and deep fetching images and assets in the background. Targeting dynamic data to be part of the caching strategy and providing tools that allow it to be done correctly is something exclusive to Edgio. It’s one of our most notable features that sets us apart from the competition. Because websites traditionally do not cache dynamic data, there are large portions of many sites that are uncached. By offering dynamic data caching in an “out-of-the-box,” easy-to-use way, Edgio customers see faster page loads – often sub-second – which leads to more satisfied users, increased revenue, and websites that outperform competitors.

Caching dynamic web pages

Case Studies:

Akira 

Results:

  • Website is 71% faster than before

  • 500ms browning speeds on 4G networks

  • +30.1% organic traffic from the sub-second website

  • +61.4% checkout initiations with a streamlined online experience

  • +80% mobile transactions leading to a 37.25% lift in conversion rate

  • 9.16% lift to checkout conversions with Bolt's optimized checkout

Read the Akira case study.

Shoe Carnival

Results:

  • 92% reduction in browsing transitions dropping from 6 seconds to 500ms

  • 70.5% increase in the first load speeds, dropping from 3.4 seconds to 1 second

  • Outperforms 98% of websites and outranks Amazon, Zappos, Nordstrom

  • 40% lift in revenue with a sub-second website

  • Increased enterprise agility with Edgio

Read the Shoe Carnival case study.

Universal Standard

Results:

  • Hybrid Jamstack approach caching static and dynamic data at the edge

  • 600ms page loads from PLP to PDP

  • 40% lower bounce rate and passes Core Web Vitals

  • 200% lift in conversion rate on mobile

Read the Universal Standard case study.


Additional Resources:

  1. EdgeJS: https://edg.io/appops/features/edgejs/ 

  2. Predictive Prefetching: https://edg.io/appops/features/predictive-prefetch/ 

  3. Prefetching: https://docs.layer0.co/guides/prefetching

Hero Texture Shield 2000x1220

Move to the Leading Edge

Get the information you need. When you’re ready, chat with us, get an assessment or start your free trial.