AMP Server-side rendering

Sever-side rendering is an optimization technique for AMP pages improving page load times up to 50%.

Why is it faster?

In order to avoid content jumps, AMP requires websites to add the AMP-boilerplate code in the header. The AMP-boilerplate hides the page content by setting the page body's opacity to 0. Once AMP has been loaded, it is able to calculate the layout of the page. After that, AMP sets the body's opacity to 1 making the page content visible.

This way AMP is able to avoid content jumps during page load. However, the downside of this approach is that the first render of the page doesn't happen until the AMP framework has been downloaded and executed.

To improve this, AMP pages can be rendered server-side. This means AMP layouts such as the responsive or fixed-height layout are rendered on the server before serving the page to the user agent. This way it becomes possible to remove the AMP-boilerplate and avoid content jumps during page load.

AMP Caches already perform these optimizations. However, they're still important as AMP pages are not always served from an AMP Cache.

How does it work?

The basic idea is to render the AMP layouts (responsive, fixed-height,....) server-side in