GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. If nothing happens, download GitHub Desktop and try again. Go back. If nothing happens, download Xcode and try again.
|Published (Last):||27 March 2007|
|PDF File Size:||19.7 Mb|
|ePub File Size:||14.16 Mb|
|Price:||Free* [*Free Regsitration Required]|
For a recent project, we had to create a brand new homepage, fully manageable by our customer using our WebCms functionality. This page would have to be served in three flavors: one for subscribers, one for users that have registered but lack a subscription, and one for anonymous users.
Because this page would be the first thing a user sees when they surf to the website, speed is of the utmost importance. When thinking about speed, the first thing that comes to mind after optimizing the code, obviously is to cache a lot of data: when you cache all the data you need on the backend, the load time of the page will improve.
But what if we want to improve the load time even more? This can be done by splitting up the HTML in different parts. After the request finishes the ESI tag will be replaced by the response. This makes it possible to set different caching durations for different parts of the webpage. The full specification can be found here. First thing would be to separate all the parts in our webpage that could be cached. We also had to keep in mind that some of the components on the page are rendered at client-side with React.
This way we could expose user-specific data to the React components by placing it in the head, without worrying about wrong data due to a cached page rendering. Our application will decide which flavor anonymous, registered, or subscribed the user has access to and will return the following HTML:. Without this header the access will be restricted.
Because the ESI specification has never been officially approved by W3C, every implementation could be a little bit different. On Akamai, for example, there is a 1 MB size limit of the included webpage, as well as a maximum of five nested levels.
For more information, check Akamai's FAQ. ESI tags bring a solution to the problem of being unable to cache a whole page because of user-specific data, by making it possible to split the HTML in different requests.
The concept itself is quite easy, but the implementation can be a lot harder. In doing or creating performance tests, there are some things to keep in mind to avoid common pitfalls. Work About Team Jobs 6. Implementation First thing would be to separate all the parts in our webpage that could be cached.
Caveats Because the ESI specification has never been officially approved by W3C, every implementation could be a little bit different. Conclusion ESI tags bring a solution to the problem of being unable to cache a whole page because of user-specific data, by making it possible to split the HTML in different requests. Share this article.
Edge Side Includes
The purpose of ESI is to tackle the problem of web infrastructure scaling. It is fairly common for websites to have generated content. It could be because of changing content like catalogs or forums, or because of personalization. This creates a problem for caching systems.