One of the basic requirements for a fast loading website is to have a web server that quickly responds to requests. While speeding up the origin response can directly increase business value, it can be quite challenging. In many cases it can be a lot easier to utilize caching in order to avoid the complexity of optimizing the server response time. However, caching a dynamic page is not a straightforward process.
No single blog post can really comprehensively cover what happens behind the scenes when loading a web page: it is a mind dazzling process. Instead we will focus on the part where the browser is requesting the HTML source content from a server in order to load the page. We will also assume a simple single web server with a database.
When a browser tries to get the HTML source of a page, it will issue a request to the server. The request will be routed through different routers on the Internet until it reaches the server. Depending on the geographic distance and network conditions, the routing time can take anything from 15 ms to 500 ms. The web server has no control over the routing path, but a service like Akamai SureRoute can optimize the routing path, and thus greatly improve the routing time. For static content like CSS, JS and images, using a CDN (Content Delivery Network), such as the one Akamai provides, is the best way to quickly serve the content from a server that is very close to the requesting browser.
The other major time consuming part is the time it takes the web server to construct dynamic content by fetching data from other servers, such as a relational database. This time depends on many factors: the efficiency of the code running on the web server, the response time for the database, the size of the data returned from the database, the number of concurrent requests, etc. This time can range from being as low as under a hundred milliseconds for well optimized web servers, to being as high as many seconds. According to the HTTP Archive, the median time to generate a page is approximiately 525 ms. Identifying the performance bottlenecks that are responsible for slowing things down, and then trying to optimize them, can be extremely difficult and in some cases a full re-architecture of the entire application is the only solution. Caching could be very beneficial in this situation, but how does one apply caching for a page whose content keeps on changing?
Many dynamic websites are not as dynamic as one may think. Just because a server is using a programming language to generate the HTML content does not mean the page is completely dynamic. Measuring how dynamic a page is can be done by tracking * how the page source changes when the page is loaded over time and by different users *. If the page source does not change when different users load the page and the page source does not change frequently over time, then caching can be applied. An entire cache of an HTML page can be delivered through an edge server to the user. This way, when a user requests a page from a web site, instead of being delivered all the way from the origin server, the HTML content of the page, along with its static resources, will all be served from the edge server bringing the routing time to a minimum and completely eliminating the time used to build the page. Ravi Maira, Vice President of Web Experience Products, explains how Akamai's Dynamic Page Caching feature provides a solution for caching dynamic pages.
We will continue with our approach of considering simple scenarios in order to achieve a better understanding of the underlying concept. Unless a page changes significantly across users or over time, it is likely that the vast majority of the page can be cached for an extended period of time. Considering the simple page above, only the username and recently viewed items are dynamic. The rest of the core information on the page is static. The HTML source behind the page above probably looks something like this:
<html>
<head>
<link rel="stylesheet" href="123.css" >
...
</head>
<body>
....
<div id="user-details">
<p> Hi user 14156162 </p>
...
</div>
<div id="product-details">
How I Met Your Mother: Season 4
...
<div>
<div id="recent-products">
How I Met Your Mother: Season 2
How I Met Your Mother: Season 1
...
</div>
</body>
<html>
The first part of the HTML, along with the resources in the HEAD section, is the same for all users visiting the page. This part can be flushed directly to the user while the web server is still constructing the content of the page. While the server is busy constructing the dynamic content, the browser can take advantage of this time by downloading the resources specified in the HEAD section that will be needed later to render the page, thus speeding the overlall loading time of the page. Page load time could be sped up further if the top HTML could be served even earlier to the browser. Great news! Akamai Edgestart is an awesome feature that allows for this top HTML section to be served directly from an edge server, so that the browser can get a blazing fast head start on the download of page resources.
A personalized user experience can be achieved while still utilizing the ultra performance of Dynamic Site Caching. The above HTML source code can be rewritten like this:
<html>
<head>
<link rel="stylesheet" href="123.css" >
...
</head>
<body>
....
<div id="user-details"></div>
<div id="product-details">
...
<div>
<div id="recent-products"></div>
<script>
// make asynchronous ajax calls to retrieve user specific data and embed them inside the html source
.....
</script>
</body>
<html>
The above HTML source is the same for all users viewing the page because it does not contain any user specific data, and so it can be cached at the edge server. All the user data is loaded in a separate, asynchronous AJAX request that does not block the loading of the page. When developing a new web site, using the above pattern is an easy way to leverage caching for your dynamic web site.
However, changing an existing application can be fraught with risk due to the potential for re-architecture and the introduction of new bugs. Akamai's various dynamic caching features give you the option of attaining these dramatic speed improvements without having to change your web site.