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

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

P2
SEARCH RESULTS PAGE

P3
LISTING PAGES

AMP Demo
————————>

AMP is not
available on desktop
Mobile devices
get AMP
results
www.google.de/search?q=airbnb+berlin

AMP
DIAGRAM
s/sf amp/s/sf

Challenges
FIGURING OUT WHAT PAGE TO
AMP
• Impactfulness (Traffic)
• Page Volatility
• Technical Challenges (legacy system compatibility)
• Page Ownership

Guidebooks
THINGS TO DO
IN {CITY NAME}
PROS CONS
• Design is stable
• No one is working on it
• Low Traffic
• Low Impact

P1
HOMEPAGE
PROS CONS
• LOTS of Traffic
• High Impact
• Only 1 Page
• Making changes on P1
requires approval from higher-
ups
• Frequent Redesigns

P3
LISTING 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

P2
SEARCH RESULTS
PROS CONS
• High Traffic
• High Impact
• A lot of people working on it
• Frequent design changes

Organic Search
Traffic Breakdown

AMP MVP
MINIMUM VIABLE PRODUCT

Basic Questions to
Answer
QUESTIONS 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?
Procrastination
ISSUES WE WON’T ADDRESS
UNTIL LATER

[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 500ms
When a Hypernova render exceeds 500ms in Monorail, it times out and renders blank.
https://app.datadoghq.com/screen/217059/gils-amp-p2-dashboard

Successful
vs
Timed out page
TIMEOUT===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
experience
CONTENT DISAPPEARED!

PART 4
AMP
ARCHITECTUR
E
SOLUTIONS

SQUAD
GOALS
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 CHALLENGES
OUR EXISTING FRAMEWORK WAS INCOMPATIBLE WITH AMP

<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
To class-based styles:
We can convert
inline styles:
… but it is too slow 😞

Inline Styles
Usage:
Update cache:
Cache key
from style object:

hypernova
OUR 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)

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?
Userflows
LOGGED 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
Deeplinking
APP 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
Iteration
YOUR 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
Stability
CHANGES 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?
Coalescence
EXPERIENCE, DESIGN,
PRODUCT

MAGIC CARPET
We created a page
specifically tailored
to first-time search engine users.

Magic Carpet
THE P2 LANDING PAGE FOR
SEO
P2 Magic Carpet
Filter Controls
Results

Userflow
Limited Exposure
Focused Product Design
Polished Experience
Magic Carpet
WHAT WE OPTIMIZED

serviceworker
WHAT IS IT?

serviceworker
USER JOURNEY
Google Search
Results
AMPed 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
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

Recomendados

Recomendados

Más contenido relacionado

Similar a TechSEO Boost 2017: AMPing Airbnb

Similar a TechSEO Boost 2017: AMPing Airbnb (18)

Más de Catalyst

Más de Catalyst (20)

Último

Último (20)

TechSEO Boost 2017: AMPing Airbnb

Notas del editor