ygaras/SpeeingOrigin

## SpeeingOrigin
# Edge Hosting for Pages with Dynamic Content


If you ever thought about speeding up a website, then most probably you have came across tools like [PageSpeed](https://developers.google.com/speed/pagespeed/) and [YSlow](http://developer.yahoo.com/yslow/) that lists the commandments for fast delivery of website pages. One the basic requirements for a fast loading website is to have a webserver that quickly responds to different requests. While speeding up the origin response has a great direct (business value)[ https://blogs.akamai.com/2014/01/the-business-value-of-a-fast-website.html], it can be quite challenging.

## How does a browser load a page? Again!
No single blog post can really cover all what happens behind the scenes to load a webpage, it is kind of 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 webserver with a database.


![Network operations for loading page source](https://docs.google.com/drawings/d/1s06ipbx7UwKUICgVoYV_Eg-FBVy6uS6GDp6yfTgPa04/pub?w=960&h=720)

When a browser tries to get the HTML source of a website it will issue a request to the server. The request will be routed through different routers on the Internet till it reaches the server. Depending on the geographic distance and network conditions, the routing time can take anything from 15 ms to 500 ms. This is why CDN exists to quickly serve static contents from a server that is very close to the requesting browser. The other major time consuming part is the time it takes the webserver to fetch the content from the DB and construct the dynamic page. This time depends on how efficient the code running on the webserver is and the response time for the DB. This time can be any where between 200 ms up to seconds. Usually optimizing the response time for a webserver is a difficult process and using a caching solution is a more affordable option. But how to apply caching for a page whose content keep on changing?

## Is Your Website Really Dynamic?
Many dynamic websites are not as dynamic as one may think. Because a page is using a programing langue to generate the HTML content this does not mean the page is completely dynamic. Measuring how dynamic a page is can be done by tracking * **how the same URL changes when the page is loaded over time and by different users** *. If the page does not change when different users load it and the contents do not change frequently overtime, then caching can be easily applied. An entire website can be delivered through a CDN using the same very efficient technique used when serving CSS and JS resources. Many CDN providers have the option to allow serving a web site through a CDN and set how often should the edge server fetch an updated copy from the webserver. This way, when a user requests a page from a website, instead of going all the way to the webserver, the HTML content of the page, along with its static resources will all be served from the edge server bringing the routing time due to a minimum and completely eliminating the time used to build the page.

## The Anatomy of Dynamic Pages
![Anatopmy of a Dynamic web page](https://docs.google.com/drawings/d/1t8Z0bkd05Oo7oW4s-BSgxL_LnQ4pyZy_U3q1u13OY1I/pub?w=960&h=720)

Unless a website changes drastically depending on the user seeing the page and overtime, chances are a good chunk and the more interesting information on the page is static. Considering the page above, only the username, photo and recently viewed items are considered 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 Four Blu-ray
      ...
    <div>
    <div id="recent-products">
      How I Met Your Mother: Season two Blu-ray
      How I Met Your Mother: Season one Blu-ray
      ...
    </div>
  </body>
<html>
```

Unfortunately the personalized part is mixed with the static page content. We can rewrite the above content to be 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, as it does not contain any user specific data. All the user data is loaded in a separate asynchronous AJAX request that does not block the information needed. If you are creating a new website, then using the above pattern should not be so hard. If you are trying to speed up an exiting website, then it will depend on how easy it is to change its code.

## Akamai Edgestart to the Rescue
A quick and easy solution to speed up the origin server response time is to utilize (Akamai Edgestart Technology)[https://blogs.akamai.com/2013/12/speed-up-time-to-first-byte-with-edgestart.html]. Edgestart allows caching part of an HTML page response at the edge server. This part is user defined to control how big the first part of an HTML page can be cached. Of course the bigger this part is the better the experience for the user viewing this page. When a browser requests a page, the edge server will respond instantly with the part that it already knows allowing the browser to start downloading page resources and even render it while the origin webserver is constructing the dynamic webpage. Edgestart can provide significant improvement for the origin server response time without having to do any changes to the server.
	# Edge Hosting for Pages with Dynamic Content


	If you ever thought about speeding up a website, then most probably you have came across tools like [PageSpeed](https://developers.google.com/speed/pagespeed/) and [YSlow](http://developer.yahoo.com/yslow/) that lists the commandments for fast delivery of website pages. One the basic requirements for a fast loading website is to have a webserver that quickly responds to different requests. While speeding up the origin response has a great direct (business value)[ https://blogs.akamai.com/2014/01/the-business-value-of-a-fast-website.html], it can be quite challenging.

	## How does a browser load a page? Again!
	No single blog post can really cover all what happens behind the scenes to load a webpage, it is kind of 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 webserver with a database.


	![Network operations for loading page source](https://docs.google.com/drawings/d/1s06ipbx7UwKUICgVoYV_Eg-FBVy6uS6GDp6yfTgPa04/pub?w=960&h=720)

	When a browser tries to get the HTML source of a website it will issue a request to the server. The request will be routed through different routers on the Internet till it reaches the server. Depending on the geographic distance and network conditions, the routing time can take anything from 15 ms to 500 ms. This is why CDN exists to quickly serve static contents from a server that is very close to the requesting browser. The other major time consuming part is the time it takes the webserver to fetch the content from the DB and construct the dynamic page. This time depends on how efficient the code running on the webserver is and the response time for the DB. This time can be any where between 200 ms up to seconds. Usually optimizing the response time for a webserver is a difficult process and using a caching solution is a more affordable option. But how to apply caching for a page whose content keep on changing?

	## Is Your Website Really Dynamic?
	Many dynamic websites are not as dynamic as one may think. Because a page is using a programing langue to generate the HTML content this does not mean the page is completely dynamic. Measuring how dynamic a page is can be done by tracking * how the same URL changes when the page is loaded over time and by different users *. If the page does not change when different users load it and the contents do not change frequently overtime, then caching can be easily applied. An entire website can be delivered through a CDN using the same very efficient technique used when serving CSS and JS resources. Many CDN providers have the option to allow serving a web site through a CDN and set how often should the edge server fetch an updated copy from the webserver. This way, when a user requests a page from a website, instead of going all the way to the webserver, the HTML content of the page, along with its static resources will all be served from the edge server bringing the routing time due to a minimum and completely eliminating the time used to build the page.

	## The Anatomy of Dynamic Pages
	![Anatopmy of a Dynamic web page](https://docs.google.com/drawings/d/1t8Z0bkd05Oo7oW4s-BSgxL_LnQ4pyZy_U3q1u13OY1I/pub?w=960&h=720)

	Unless a website changes drastically depending on the user seeing the page and overtime, chances are a good chunk and the more interesting information on the page is static. Considering the page above, only the username, photo and recently viewed items are considered 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 Four Blu-ray
	...
	<div>
	<div id="recent-products">
	How I Met Your Mother: Season two Blu-ray
	How I Met Your Mother: Season one Blu-ray
	...
	</div>
	</body>
	<html>
	```

	Unfortunately the personalized part is mixed with the static page content. We can rewrite the above content to be 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, as it does not contain any user specific data. All the user data is loaded in a separate asynchronous AJAX request that does not block the information needed. If you are creating a new website, then using the above pattern should not be so hard. If you are trying to speed up an exiting website, then it will depend on how easy it is to change its code.

	## Akamai Edgestart to the Rescue
	A quick and easy solution to speed up the origin server response time is to utilize (Akamai Edgestart Technology)[https://blogs.akamai.com/2013/12/speed-up-time-to-first-byte-with-edgestart.html]. Edgestart allows caching part of an HTML page response at the edge server. This part is user defined to control how big the first part of an HTML page can be cached. Of course the bigger this part is the better the experience for the user viewing this page. When a browser requests a page, the edge server will respond instantly with the part that it already knows allowing the browser to start downloading page resources and even render it while the origin webserver is constructing the dynamic webpage. Edgestart can provide significant improvement for the origin server response time without having to do any changes to the server.