I Already Use a CDN. Why Do I Need Front-End Performance Optimization?
This is one of the most frequently asked questions I encounter. To understand how a front-end web performance optimization (WPO) solution complements a CDN — and ultimately delivers dramatic acceleration gains for your web pages or enterprise applications — you need to understand which pain points each solution addresses.
What performance problem does a CDN solve?
While content delivery networks solve problems such as improving global availability and reducing bandwidth, the main problem they address is latency: the amount of time it takes for the host server to receive, process, and deliver on a request for a page resource (images, CSS files, etc.).
Latency depends largely on how far away the user is from the server, and it’s compounded by the number of resources a web page contains. For example, if all your resources are hosted in San Francisco, and a user is visiting your page in London, then each request has to make a long round trip from London to SF and back to London. If your web page contains 100 objects (which is at the low end of normal), then your user’s browser has to make 100 individual requests to your server in order to retrieve those objects.
Typically, latency is in the 75-140ms range, but it can be significantly higher, especially for mobile users accessing a site over a 3G network. This can easily add up to 2 or 3 seconds of load time, which is significant when you consider that this is just one factor among many that can slow down your pages.
A CDN addresses the latency problem by caching static resources in distributed servers (AKA edge caches, points of presence, or PoPs) across a region or worldwide, bringing resources closer to users and reducing round trip time.
Does a CDN help in every situation?
A CDN is a must for many sites, but not necessarily for every site. For example, if you’re hosting locally and if your users are also primarily local, a CDN won’t help you much.
Contrary to what some site owners believe, a CDN is not a standalone performance solution. In the ecommerce and SaaS worlds, two of the most common performance pains are third-party content and server-side processing. Your CDN can’t help you with those.
What does WPO do that a CDN can’t?
As we’ve already covered, CDNs address the performance middle mile by bringing resources closer to users — shortening server round trips and making pages load faster. WPO solutions, such as Radware’s FastView, tackle performance at the front end so that pages render more efficiently in the browser.
WPO solutions apply a number of optimization treatments to increase render time. With FastView, these treatments include:
- Consolidating resources so that fewer packages are sent over the network, thereby reducing latency.
- Compressing resources — images, text — reducing the total payload.
- Optimizing how resources are rendered in the browser, ensuring that critical content loads first and deferring less critical content — e.g. third-party scripts, such as page analytics — to load last.
- Leveraging the browser cache so that it does a better job of storing resources that are used across pages in a flow.
- Intelligently predicting which pages a user will visit next, and preloading resources into the browser cache, so they’re on standby and can be called up virtually instantaneously.
- Plus a host of other WPO techniques. (FastView currently applies 22 advanced acceleration treatments, and our R&D team is constantly evolving this solution as we patent new leading-edge treatments.)
What are the benefits of combining CDN with front-end WPO?
As the table below (which uses data from this case study) shows, combining a CDN with a WPO solution has a huge impact on page metrics, from number of requests to payload to start render and load times.
The bottom line: a combined CDN/WPO solution can make pages up to four times faster, and reduce total payload by up to 70%.
There are other benefits to using an automated WPO solution to complement your CDN, such as:
- Automatically renaming files so they can be served from a CDN, which is a time-consuming task when done manually. FastView does this automatically, saving a substantial amount of developer time.
- Adding expires headers is a performance best practice that you should be taking advantage of. While adding headers is relatively easy, dealing with versioning is tricky, especially if you use a CDN. You either need to keep someone glued to the CDN purge tool or you need to use a tonne of dev hours integrating with your CDN’s API. An automated solution takes care of this for you, again saving a lot of dev time and eliminating the margin of error.
CDNs and front-end WPO are highly complementary solutions that play very well together. Our customers have found that both of these technologies — combined with in-house performance engineering — are an integral part of their acceleration strategy.
Learn more: Radware FastView