TechSEO Boost 2017: AMPing Airbnb

Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost

+ AMP

BRIAN TA / GIL BIRMAN / 11 -2017

PART 1

AIRBNB

WHAT IS AIRBNB?

Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost

P1HOME PAGE



P2SEARCH RESULTS PAGE



P3LISTING PAGES


PART 2

AMP

WHAT IS AMP?

AMP Demo————————>


AMP is not

available on desktop

Mobile devices

get AMP

results

www.google.de/search?q=airbnb+berlin


AMPDIAGRAM


s/sf amp/s/sf

AMP Demo————————>

WHAT SHOULD WE AMP?


ChallengesFIGURING OUT WHAT PAGE TO AMP


• Impactfulness (Traffic)

• Page Volatility

• Technical Challenges (legacy system compatibility)

• Page Ownership

GuidebooksTHINGS TO DO

IN {CITY NAME}

PROS CONS• Design is stable

• No one is working on it

• Low Traffic

• Low Impact

P1HOMEPAGE

PROS CONS• LOTS of Traffic

• High Impact

• Only 1 Page

• Making changes on P1 requires approval from higher-ups

• Frequent Redesigns

P3LISTING PAGE

PROS CONS• Only 1 Team working on it

• Has poor SEO conversion rate

• In a state of flux/refactoring

• Owned by a different team

• Stuck on legacy framework

P2SEARCH RESULTS

PROS CONS• High Traffic

• High Impact

• A lot of people working on it

• Frequent design changes


Organic Search

Traffic Breakdown


AMP MVPMINIMUM VIABLE PRODUCT


Basic Questions to AnswerQUESTIONS THAT NEED TO BE ANSWERED TO GET AMP OFF THE GROUND


• How does AMP work within our existing framework?

• How does AMPing P2 interfere with our website infrastructure?

• What does AMPing P2 do to the workflow of other developers in the company?

• How does this impact design, experience, and the overall product?


• How do we integrate this into a fully functioning product with the rest of the company?

• How do we handle the added complexity?

• Getting buy in from other teams

• How do we integrate AMP into our experimentation framework

• Dedicated team/owner - Who will maintain it?

ProcrastinationISSUES WE WON’T ADDRESS UNTIL LATER


PART 3

AMP P2 OBSTACLES

[OBSTACLES]

SERVER-SIDE

PAGE RENDERING

TIMING OUT


3.86% 16.08%AMP P2 Timeout Rate

(30min CDN Caching Enabled)

P2 Timeout Rate

Render Time Exceeds 500msWhen a Hypernova render exceeds 500ms in Monorail, it times out and renders blank.

https://app.datadoghq.com/screen/217059/gils-amp-p2-dashboard

https://app.datadoghq.com/screen/217059/gils-amp-p2-dashboard

Successful

vs

Timed out pageTIMEOUT===BLANK PAGE


When page renders blank,

Google is supposed to link to the canonical

page instead of the AMP page, but….


Error Page

(Google Bug)AMPED SEARCH RESULT


We implemented CDN caching (30 minutes) as a way of solving the ~16% timeout rate for AMP-rendered pages.

Our Solution?


[OBSTACLES]

NEW FEATURES

BROKE AMP


• An <img /> tag broke our AMP experience.

• As other engineers added new features to P2, they did not always work well with AMP.

• Images inside of a horizontal scrolling div fail to load.

• >50k CSS Breaks AMP Validation

New Features Broke AMP


A particularly broken experienceCONTENT DISAPPEARED!

PART 4

AMP

ARCHITECTURE

SOLUTIONS


SQUADGOALS


Make our pages AMP-compatible without having to recreate them from scratch.


WHY?WHY DOES AMP REQUIRE SO MANY CODE CHANGES?


• AMP page is displayed inside of an iframe on google.com.

• NO custom JavaScript.

• NO inline styles.

Security

• NO layout reflows

• LIMIT of 50kb CSS

Performance


• AMP doesn’t support !important

😭 Aphrodite (open-source CSS framework) adds !important to every style

• AMP doesn’t support inline styles.

😭 We use them lots (React!)

• AMP only supports style tags which appear in the <head>

😭 Aphrodite styles are appended to the <body>

• AMP limits CSS size to 50kb

😭 Our page had too many styles!

ARCHITECTURAL CHALLENGESOUR EXISTING FRAMEWORK WAS INCOMPATIBLE WITH AMP


IMPORTANT!


<div {…css(styles.mainTitle)}> Hello World </div>


aphrodite css() function

style definition

• Added a node environment variable, process.env.AMP

• Created a custom css() function that conditionally disables !important when process.env.AMP is enabled

<div class=“mainTitle_j2dz”> Hello World </div>

INLINE STYLES


Inline Styles


To class-based styles:

We can convertinline styles:

… but it is too slow 😞


Inline Styles


Usage:

Update cache:

Cache keyfrom style object:

<HEAD><STYLE…></HEAD


hypernovaOUR OPEN-SOURCE SERVER-SIDE RENDERING PLATFORM


hypernova

• User makes page request

• Rails renders an ERB template

• An ERB template may call render_react_component()

• hypernova handles rendering react components

(RUBY)

(NODEJS)

Rails ERB Template

aphrodite inserts styles here

no way to insert styles here

ERB template for AMP pages

entire page is rendered in hypernova (node service)

50KB CSS LIMIT


Can CSS be eliminated?


• Aphrodite does not generate extra CSS

• However, AMP pages never use responsive styles above our medium breakpoint (744px)

• We modified the css() function to eliminate responsive styles

• responsive styles below the responsive breakpoint are inserted without their @media queries

• responsive styles above the responsive breakpoint are culled


Class name

minification


• We added this feature via a PR to aphrodite

.helloStyle_x3hn

BEFORE

._x3hn

AFTER

PART 5

PRODUCT ISSUES WITH

AMP


• AMP works perfectly for logged out/first time visitors

• Logged in users are dropped in a very confusing experience

• Initial page load is a “logged out” experience

• How do they get to the “logged in” experience of the P2 page?


UserflowsLOGGED IN/LOGGED OUT


• Google does not open deeplink when clicking on an AMP search result

• Users have to perform a second click in order to get directed to the app experience

• Polarizing opinions on this behavior


DeeplinkingAPP INSTALLED VS. NOT INSTALLED


• AMP makes it difficult to iterate different product ideas on it in an efficient manner

• Airbnb has an in-house experimental framework that can’t be integrated with AMP

• Experimentation on another domain is extremely difficult


IterationYOUR PRODUCT IS NEVER PERFECTED


• Multiple experiments and features were launched that affected AMP experimentation

• It’s hard to keep a close eye on AMP and make sure that new features don’t change the core experience

• We can check for broken features, but it’s not as easy to detect newly added features


StabilityCHANGES FROM OTHER TEAMS CAN DRASTICALLY ALTER THE PAGE


• Communication with external teams is challenging

• Technical hurdles have been overcome or mitigated

• The experience as a whole feels fractured

• As a product, AMP P2 doesn’t work.


What did we learn?


• The big problem is the overall experience is fractured, the design of the page isn’t there and the product we were AMPing was suboptimal *unpack P2 problems*

• How do we address these problems so that we can solve them in one swoop?


CoalescenceEXPERIENCE, DESIGN, PRODUCT

MAGIC CARPET


MAGIC CARPET

We created a page

specifically tailored

to first-time search engine users.



Magic CarpetTHE P2 LANDING PAGE FOR SEO


P2 Magic Carpet

Filter Controls

Results


Userflow

Limited Exposure

Focused Product Design

Polished Experience


Magic CarpetWHAT WE OPTIMIZED

WHAT’S NEXT?


serviceworkerWHAT IS IT?



serviceworker USER JOURNEY


Google Search

ResultsAMPed P2 App Shell

pre-render install serviceworker load content


AMP provides the only user journey that pre-installs the serviceworker. In all other cases, a serviceworker only provides value as a result of a repeat visit.

Value Prop



Where to next?FIGURING OUT WHAT PAGE TO AMP


• Experimentation

• Worldwide Launch

• Getting metrics into our core data

WHAT DIDN’T WE TALK ABOUT?


What didn’t we cover?ALL THE THINGS WE CHOSE NOT TO TELL YOU


• Experiment Results

• Logging Issues

• Experimentation Issues


Thanks!

[email protected]

[email protected]


Marketing

TechSEO Boost 2017: AMPing Airbnb