#LS177 @ slido.com

Lessons from AMP Conf 2019

What is Google AMP?

Originally accronym of Accelerated Mobile Pages
Usually most noticible when searching from a mobile device
Web component framework + Website publishing technology
Goal: Provide a user-first format for web content

Tech Overview

Online Format
Use amp components for media
Some CSS rules are not allowed
No developer or third-party Javascript, no iframes, no embeds
Framework
AMP visual and media components (carousel, accordion, image, video)
`amp-bind` syntax to manage page state
weekly updates invisible to developers
Standards & Performance
Amp compatible pages cached by google
Pre-rendering
Search engine bot friendly

Shopee's History With AMP

First version: July 2017
Duplicate of our Category Page
Hosted using a templating engine on a nodejs server

Problems:

Due to restriction on using no Javascript, we needed to select a page which did not have much interaction, but should still be attractive and informative enough to prompt users to click on an interactive element, upon which they will be led to the non-AMP Shopee page
Syntax of AMP very different from React and awkward to code in

Solutions:

Duplicated the category page UI and ignore interactions we could not achieve
Train a dev to be proficient in AMP (git gud)

Shopee's History With AMP

Current version: Started June 2018
Revamped from the ground up, starting with a paired version of Product Detail Page, followed by category page
Using our React server-render solution to pre-render an AMP compatible page
AMP components are wrapped in React Components

Problems:

Unable to get user data, as without using our own url, we cannot access our cookies
AMP components do not look or feel like shopee components
Refactor in api required change in two source codes

Solutions:

Assume all users as non-logged in users
Overwrite AMP css where possible and build our own components with AMP-bind where not possible
Add redux logic to AMP project so that fetching of data is shared code

62.2%

Lower Page Load time

43.2%

Uplift in organic traffic with AMP

Summary Of (Existing) Difficulties

User interactions with amp-bind hard to debug and awkward
No user data for user settings and history (for reccomendations)
Some AMP bugs cannot be reproduced on dev machines

AMP Conf 2019

Features Announced

AMP script
Bento AMP
Signed Exchanges
AMP for Email
AMP Stories

AMP script

150 Kb limit of uncompressed JS
Limited to certain DOM APIs
Mutations are always accepted after a user action for a user action interval of 5 seconds
The 5 seconds interval is extended if the user script performs a fetch() operation
Smaller amp-script elements with height under 300px and non-container layout are allowed unlimitted mutations

🍱 Bento AMP 🍱

Ability to use AMP components in an “un-managed” way, without loading AMP’s main JS file
Allows AMP components to coexist with other web components and frameworks on the same page
Together with AMP-script to allow frameworks to support server side render in AMP

Signed Exchanges

Requires browser support (Chrome 73 or higher (soon Microsoft Edge))
Technical framework that allows browsers to display publisher URLs on cached AMP results
All visitors, AMP or otherwise, can coexist on the same domain
AMP grey bar no longer neccessary
Enables publishers to safely make their content portable, i.e. available for redistribution by other parties, while still keeping the content’s integrity and attribution

AMP for Email

Allows senders to include AMP components inside emails, making modern app functionality available within email
Recipients of AMP emails can interact dynamically with content directly in the message
Messages still include standard HTML markup as a fallback for email clients that do not support AMP

AMP Stories

'mobile-focused format for delivering news and information as visually rich, tap-through stories'
Targeted towards media companies for advertisements and content delivery

Other Lessons

AMP is but a tool in our arsenal of FE Frameworks
AMP has a two liner instant PWA
AMP development doesn't have to be painful (in the future)
AMP now has decent docs

Other Lessons

Paired sites are most common, but there are others who have done AMP first approach (A*express)
In the advent of 5G, AMP is still a viable technology, especially in SEA
Google created AMP, but the company has convinced many other publishers and platforms to get involved with the project
AMP alone doesn't push up your SEO score, but by nature of user habits and benefits of AMP, you can expect some improvments

Other Lessons

Stories are fun
Japan is fun