TechSEO Boost 2017: AMPing Airbnb

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

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

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

Successful

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

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

PART 5

PRODUCT ISSUES WITH

• 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

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!

brian.ta@airbnb.com

gil.birman@airbnb.com

TechSEO Boost 2017: AMPing Airbnb

Marketing

TCM Presentation Amping Up Your Social Media Strategy

Airbnb slideshare

Airbnb @ Crowd15

InsIde AIrbnb - Brooklyn Deepbrooklyndeep.org/wp-content/uploads/2017/03/the-face-of-airbnb-nyc.pdf · InsIde AIrbnb: The FAce oF AIrbnb, new York cITY execuTIve summArY Airbnb is

Troop amping 101 - gsutah.org

AirBnB Final

ScaleUp Airbnb - ซื้อ อสังหาเพื่อทำธุรกิจกับ airbnb

Overview of the Airbnb Community in Scotland - Airbnb … · Case Study: Edinburgh / 10 Airbnb and Events / 11 Overview of the Airbnb Community in Scotland . ... Overview of the Airbnb

BAMFORD amping Caravanning - Derbyshire Dales

Airbnb ppt

PowerPoint Presentation Conley Presentation.pdf · Airbnb Market Sizes Airbnb Market Sizes Airbnb Market Sizes Airbnb Market Sizes Airbnb Market Sizes - Al X 'Shared with me — Google

Link, Poke & Tweet: Amping Your Personal Brand, Digitally

BRASSINGTON BAMFORD amping Caravanning

Airbnb Regs

Airbnb project

TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites

Osage County 2020 · 2020. 6. 23. · Canary Place AirBNB Clean, Comfy, and Close to The Merc AirBNB Cottages on the Prairie AirBNB Entire House AirBNB Esther’s Cottage AirBNB Flamingo’s

Amping tree house

Amping Up Library Orientation - AALL 2012

Classifying What Destinations Airbnb Users Choosemoazum.com/assets/projects/Airbnb User Analysis_12.pdf · The “airbnb” datasets are from the Airbnb New User Bookings data science