When Google first announced the Accelerated Mobile Pages (AMP) project in 2015, many people rightfully recoiled at the perceived results: google was hosting other people's content on their own domain. While the intention was for better results and performance for the end users, it put many people off, including myself, of using the platform due to content ownership and power concerns.
However, over the years, we've seen many people adopt the platform and the SEO boost that Google has given pages that confine to their strict restrictions. Google has put a 75kb maximum limit on AMP pages. They have also put a 150kb maximum limit on javascript. Keeping these CSS and javascript limits keep pages loading fast. Everyone likes a fast website that can provide high value, so Google boosted those results to the top in featured carousels and other sections. They have since opened those featured sections up to fast websites not using AMP.
There are also other restrictions within the AMP ecosystem, such as the element types and attributes within that they allow. By using their elements / components, you get the performance benefits and continuous updates from a dedicated team of devs who are concerned about performance and accessibility.
AMP Bento is Google AMP for everyone, without all the crazy restrictions. You can gain the performance and accessibility benefits of the AMP component library without all of the restrictions when it comes to using javascript over 150kb or CSS over 75kb. This enables the ability to work with larger third-party libraries such as Snipcart for ecommerce.
It is currently (as of writing this on Dec 31, 1969) in experimental mode, meaning you need to opt-in to use it on your site.
To opt in to Google AMP Bento, do the following:
<script> (self.AMP = self.AMP || []).push(function (AMP) { AMP.toggleExperiment('bento', true); }); </script><script async src="https://cdn.ampproject.org/v0.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-bento-component-name-1.0.css"><script async custom-element="amp-bento-component-name" src="https://cdn.ampproject.org/v0/amp-bento-component-name-1.0.js"></script>Learn more about the process to start using AMP Bento on your site by reading the AMP guide.
Now you can successfully include a larger-than-150kb project such as snipcart into your site for easy ecommerce. I gravitate towards the JAMstack when working on a new project for its simplicity, inexpensive and uncomplicated hosting, and the other benefits that come along with a static site and snipcart makes creating an ecommerce site really straitforward and fun!
Simple follow the snipcart instructions for getting your site up-and-running to start integrating ecommerce on AMP with Snipcart easily! You'll just need to:
Now you have an ecommerce site running on AMP with Snipcart.