The plugin can be installed by adding its name to your netlify.toml file:
package = "netlify-plugin-amp-server-side-rendering"
The plugin will then optimise any HTML files in your site’s publish directory.
More information on Netlify’s build plugins can be found on their documentation: docs.netlify.com/configure-builds/build-plugins
A few weeks ago, I decided to change the TLD of my website’s domain
from .co.uk to the more
hipster developer-friendly .dev.
This set off a cascade of changes that included refreshing the site’s design, moving from GitHub Pages to Netlify for hosting,
and deciding to experiment with an AMP-first website.
AMP is a Google initiative to deliver faster websites. It does this by introducing essentially a subset of HTML to limit what web pages can include and reduce their weight. Google also increases speed of AMP sites faster by caching them, and serving sites from these caches. However, there is some criticism in this approach as the AMP caches are Google-branded and essentially introduce a “walled garden” on the web operated by Google. Nonetheless, I wanted to try out AMP for its potential of improved speeds and performance.
I was already hosting my website with Netlify so when I saw they announce Build Plugins, I thought that made the perfect opportunity for an AMP server-side rendering plugin.
The plugin is pretty simple, finding HTML files in a Netlify site’s publish directory and then using Google’s library to optimise them. It’s these optimised HTML files that are then actually served by Netlify. No more content hiding or delays in rendering!
If you have any questions on AMP, Netlify, or anything else covered above, then I’d be happy to answer them! Feel free to reach out to me on Twitter.