Building AMP Pages on platformOS

This article describes how you can build Accelerated Mobile Pages (AMP) on platformOS. We explore the benefits of AMP pages, discuss the standard, and link some tutorials to get you started.

The AMP standard and its benefits

Google's initiative, AMP is an open-source library for creating web pages that load almost instantly.
Their reduced load time improves user experience, and lowers the bounce rate. Page load time is a factor in search engine optimization, so building AMP pages has a positive effect on search rankings as well.

The AMP standard describes three main aspects:

• AMP HTML is HTML extended with custom AMP properties, e.g. some HTML tags are replaced with AMP-specific tags.
• AMP Components are optimized for performance, for example, they use external resources asynchronously, sandbox all iframes,
  pre-calculate every element on the page before loading resources, and disable slow CSS selectors.
  Find all compenents described in the AMP Components Reference Documentation.
• AMP Cache fetches AMP HTML pages, caches them, and improves page performance automatically.
  This is an opt-in feature that you can learn more about in the Google AMP Cache Documentation.

Many platforms (including platformOS), and all major browsers support AMP (with AMP working on other browsers as well without official support).

Tip: To verify that you have a valid AMP page, use the AMP Validator online or chrome extension.

AMP on platformOS

platformOS is fully AMP-compatible. Because an AMP page is just an HTML page inside a required boilerplate and compliant with AMP rules, you can freely develop an AMP site using our platform.
You can even get any free template from AMP Start and place it directly into your assets directory,
and it will be live immediately. In a couple of minutes you can extract the layout part to a layout, and the content of the pages to Liquid pages to have access to the power of Liquid,
GraphQL, and the whole backend behind platformOS, while keeping your code lean to comply with AMP restrictions.

We built a couple of AMP examples on platformOS for you to check out:

• https://amp-demo-ecommerce.prod01.oregon.platform-os.com
• https://amp-demo-travel.prod01.oregon.platform-os.com
• https://amp-demo-lune.prod01.oregon.platform-os.com
• https://amp-demo-gallery.prod01.oregon.platform-os.com/gallery
• https://amp-demo-blog.prod01.oregon.platform-os.com

You can find the source code of both templates and Instances in our GitHub repository: https://github.com/mdyd-dev/amp-demo-pages

Building AMP pages on platformOS from a template

You can build AMP pages on platformOS from scratch, but you can also turn an AMP template into layouts, pages, and partials.

Prerequisites

To be able to build AMP pages on platformOS, you need a platformOS Instance and your codebase. This can be an already existing Instance, or you can start with a clean install.

Downloading and using a template

You can download an AMP template and use it without any modifications on your platformOS site by adding it to your codebase.

Converting a template into a platformOS site

To be able to use platformOS features (like GraphQL queries) on your AMP pages, turn them into Liquid layouts, pages, and partials.

Leveraging the platformOS backend

Make use of all platformOS features while keeping your site AMP-compatible. We wrote a step-by-step tutorial about feeding data into your AMP pages with GraphQL, but you can use all features on AMP pages that are otherwise available.

Want to learn more?

We want to support you all throughout your journey with platformOS, and are always happy to help with any questions you may have.
To learn more, consult our documentation or get in touch with us.