The George team identified Accelerated Mobile Pages (AMP) as a way to speed-up the performance of its web site pages. The effort also complemented an earlier initiative, which saw the launch of a fully featured progressive web app (PWA).
AMP and PWA are symbiotic technologies that work well together. In the case of George, the architecture pattern uses AMP at the point of discovery and the PWA to carry users through the checkout funnel. As users discover and click a George.com search results page, the user receives the pre-cached, pre-rendered AMP page. All subsequent clicks – or user actions from the AMP page – direct the user to the PWA, which offers speed benefits and features to guide users through the shopping experience.
Working closely with WompMobile, a development agency and software platform, George rolled out AMP in stages, starting with the homepage and category landing pages. After initial success, AMP was then applied to all product detail pages. Reducing an already fast mobile page load time by 1.9 times, AMP provided clear benefits.
Production took 2 months to complete, including integration of rich eCommerce functionality, add-to-cart, real-time pricing, and related products. The result was AMP pages with full-feature parity that loaded faster.
As of December 2018, the implementation had been live for nine months. To measure results, ASDA analyzed a variety of metrics, by comparing pre-AMP and post-AMP performance.
- The Top 500 queries for the site moved up by 1 position on average, which helped lead to a 13% higher CTR from mobile search
- 13.6% improvement – or decrease – in bounce rate
- 16.5% increase in average time on site
- 11% increase in pages per session
- 13% of the top AMP queries were not ranked prior to AMP
George at ASDA was already concerned with optimizing site speed, and already had an industry-leading fast website. For example, if a user goes straight to the URL of an AMP on the site (i.e. load it directly and not from the Google cache), it takes longer to load than the non-AMP pages on the website. However, when loading the page via SERP – delivered pre-cached, pre-fetched and pre-rendered from the Google cache – the AMP page is markedly faster.
In other words, the site was already quite fast, but the Google cache impact is profound. Further, George’s implementation of service workers – a script that the browser runs in the background to enable caching and the ability to retrieve resources – offers additional performance benefits, once users enter the PWA from an AMP page discovered in SERP.
For example, implementing the PWA caused the transition from an AMP page to a product-listings page to drop from 600ms to 280ms. This is consistent plus or minus 50ms across the site. This is the impact of the PWA service worker.
At the time of the initial implementation, Adobe Analytics did not offer support for integrated AMP tracking, but they now do. To address this, ASDA initially implemented Adobe Analytics within an iframe, and also used Google Analytics for integrated tracking of AMP sessions (you can see how this works here).
Even with these efforts, one remaining challenge is accurately measuring the bounce rate on Safari. Other engagement metrics are fine, but because iOS blocks cookies set by Adobe Analytics in the amp-analytics iframe, at first glance, the bounce rate appears as 100%. With spreadsheet calculations, a close-to-accurate bounce rate can be attained but requires a time intensive exercise.