An AMP Case Study
Site Background and Implementation
Founded in 2010, WompMobile is a digital agency that helps clients create world-class mobile experiences.
They have been building AMP pages for two years, and have published over 2M AMP pages. This profile outlines their experiences with AMP, data that they can share about client results, and insights into the open-source initiative.
We discussed AMP at length with Madison Miner, WompMobile’s CEO, which we reference here, along with our follow-on interactions.
WompMobile shared data in a case study on Ampproject.org, which aggregates performance metrics across 500,000 eCommerce AMP pages. Key takeaways from the case study include:
- 105% conversion rate increase
- 31% decrease in bounce rate
- 29% increase in CTR from search platforms
Specific client data they can share includes:
- JM Bullion: the coin and precious metals retailer saw a 26% increase per order and a 39% higher conversion rate.
- Portero: the luxury goods reseller saw a 29% decrease in bounce rates and a 208% increase in conversion rates.
- Campmor: the outdoor outfitter saw a 28% increase per order and a 20% lower bounce rate
You can also read a case study on WompMobile's implementation for Carved here. Some key metrics from that case study include:
- Page load time on a 3G connection dropped from 11.7 seconds to 3.1 seconds
- Total sales from smartphones rose from 31% in 2016 to 38% in 2017
- Mobile conversion rate increased from 1.02% in 2016 to 1.6% in 2017
Madison Miner at WompMobile also said that the “data is really positive and we always see great results.” A big key to these consistently good results is putting in the effort to get the implementation truly complete, and not settling for a stripped-down version of your website. Miner stressed that the notion that AMP strips down design and functionality is a myth.
WompMobile also tracks SpeedIndex data for many top eCommerce homepages. You can see a sampling of that data below(note that smaller numbers are better):
There are many challenges with AMP, though this has been improving significantly over time. Even early on, most of the challenges had some sort of workaround.
For example, with AMP-iframe you can include almost anything, though it somewhat goes against the spirit of AMP, so it should be used with care. If you do use non-AMP elements in an AMP-iframe, you must place it below 75% of the viewport height, unless you have a placeholder, and you can then put it anywhere.
In the early days, another one of the major fallback approaches was the CSS checkbox hack. You can learn more about the CSS checkbox hack here.
Basically, it allows you to have a button or image, and when you click on it, it will click the hidden checkbox. You would also have CSS contingent on the state of that checkbox, and effectively create an interactive component without violating the AMP rules. It’s pretty easy to add and lightweight.
Furthermore, AMP integrates with shopping carts, real-time information, forms, eCommerce interactions, analytics, personalized information – almost anything. For example, with AMP-list you can populate content on the frame dynamically from a server call. Google refers to this as a “list mechanism,” but you can use it in other ways.
One area that can be challenging is analytics, since the AMP Content Delivery Network (CDN) is on a Google domain and traditional analytics cookies don’t transfer from the AMP page to the full website. That said, Google announced a new API to allow session stitching for websites that use Google Analytics. You can read more about the new API here.
As for Ad Networks, WompMobile does not think there are major issues with this at this point. The list of providers that support AMP is lengthy and continues to grow. It can be a challenge to get the code from ad network providers. They usually have an AMP solution, but finding the right person at the company to get the right code can be a challenge.
The tendency for ads to load slower than the AMP page is a problem. Users might scroll past the ads before they have time to load. As a result, sometimes total ad impressions go down. AMP for Ads is in full production now. Not widely adopted yet, and WompMobile pushes clients to use it.
WompMobile is actively using AMP-bind. It shines for product configuration and faceted navigation. It also works really well for auto-suggest features and drill-down functionality.
Payment Request, a W3C standard for transmitting payment information, is supported by Chrome for Android and desktop, IE, and Samsung’s browser. It’s also coming to Chrome for iOS, Safari and Firefox.
The API, which eliminates checkout forms by automatically populating a user’s information, also works in AMP, thanks to a suggestion made by WompMobile to Google. The pairing of speed and a frictionless checkout helps drive conversion rates. It also makes checkout better on mobile.
The following presentation shows some specific approaches to implementing complex UI elements in AMP.
WompMobile is also a big fan of progressive web apps (PWAs), which are mobile experiences that combine the discoverability of a website and the speed and functionality of a native app. The company uses AMP pages as the data source of a PWA and as gateways from organic and paid search results. This powerful combo – bringing together the instant delivery of AMP pages with the PWA app shell and service worker – results in a faster, simpler and more elegant solution. The pattern, commonly known as PWAMP, offers clear advantages over traditional approaches, according to WompMobile.