Return to Blog
November 2, 2016
3 min read time

Tech Preview: Edgestash - Making the mobile web faster

Reza Naghibi
  • web performance
  • mobile web
  • Edgestash
  • JSON
  • Mustache

    • This summer Varnish Software decided to do something very ambitious. We decided to make the web a faster place. Now that statement may leave you scratching your head. Doesn't Varnish Cache already exist and hasn't it already made the web a lot faster?

    Straight From The Lab: Introducing Edgestash

    So what is Edgestash and how does it make the web, particularly the mobile web, a faster place? A typical modern website is assembled in the browser using JavaScript, content, templates, and JSON data. In this scenario, most of this content being assembled in the browser is already being stored and delivered from cache, but with little effect. So what if Varnish Plus were able to do that page assembly using the bits and pieces already stored in its cache? In particular, take a web page, assemble it using JSON and content from different sources, and deliver all of that in a single composed response.

    Currently browser-based page assembly requires downloading and executing a JavaScript framework (Angular, React, Ember, Vue, etc.) and then executing custom code, which then downloads more data and then that kicks off the actual page assembly. Page assembly can be a lengthy and time-consuming process of updating and manipulating content via the DOM. This can then trigger page reflows and repaints (reflows and repaints are not a good mobile experience, as an ever-growing, long-suffering army of mobile web users can attest). This whole process can take anywhere from a few seconds to tens of seconds on a typical mobile browser, even with HTTP/2. 

    mobile-phones-slow.jpg

    Edgestash can take that process down to tens of milliseconds, which in some cases is a 100x speed-up.

    A Framework Built For Performance

    How is it possible to see such a large performance gain with Edgestash?

    First, Edgestash is a pure templating language. It does not have to execute any JavaScript code to assemble a page. This templating language has its roots in Mustache, but has (and can be) extended to more expressive syntaxes like you see with Angular, Ember, Handlebars, et al.

    Second, because the templates and associated JSON data are fetched from a backend and stored into cache, Edgestash can exploit this and compile both into a highly optimized byte code and store that into cache as well. So when it comes time to do the actual page assembly and delivery, it simply executes the byte code. The resulting assembly time is targeted to be under a single millisecond (compile times are also targeted to be sub-millisecond). Every time that same template is used or that same JSON is searched, Edgestash reaps the benefits of that compilation step.

    Finally, all of this technology is built on the extremely high-performance core of Varnish Cache. Edgestash plays very well with VCL and any kind of custom logic required for a given website. Also, given Varnish Cache's strategic position at the edge of your data center or network, latencies will always be at a minimum. Not only does this give you the fastest possible page response and load times, fetching all those bits and pieces to assemble the page will be done on high-speed internet backbones. You also get the added bonus of not having you expose API data services directly to the browser. Edgestash can even be used to compose an API from other APIs.

    Edgestash Example

    Given the following Edgestash template (a simple Mustache example):

    Z