TechSEO Boost 2017: AMPing Airbnb
Transcript of 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P2SEARCH RESULTS PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P3LISTING PAGES
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
PART 2
AMP
WHAT IS AMP?
AMP Demo————————>
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMP is not
available on desktop
Mobile devices
get AMP
results
www.google.de/search?q=airbnb+berlin
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMPDIAGRAM
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
s/sf amp/s/sf
AMP Demo————————>
WHAT SHOULD WE AMP?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
ChallengesFIGURING OUT WHAT PAGE TO AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Organic Search
Traffic Breakdown
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMP MVPMINIMUM VIABLE PRODUCT
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Basic Questions to AnswerQUESTIONS THAT NEED TO BE ANSWERED TO GET AMP OFF THE GROUND
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
PART 3
AMP P2 OBSTACLES
[OBSTACLES]
SERVER-SIDE
PAGE RENDERING
TIMING OUT
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
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
vs
Timed out pageTIMEOUT===BLANK PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
When page renders blank,
Google is supposed to link to the canonical
page instead of the AMP page, but….
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Error Page
(Google Bug)AMPED SEARCH RESULT
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
We implemented CDN caching (30 minutes) as a way of solving the ~16% timeout rate for AMP-rendered pages.
Our Solution?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
[OBSTACLES]
NEW FEATURES
BROKE AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
A particularly broken experienceCONTENT DISAPPEARED!
PART 4
AMP
ARCHITECTURE
SOLUTIONS
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
SQUADGOALS
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Make our pages AMP-compatible without having to recreate them from scratch.
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
WHY?WHY DOES AMP REQUIRE SO MANY CODE CHANGES?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
IMPORTANT!
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
<div {…css(styles.mainTitle)}> Hello World </div>
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Inline Styles
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
To class-based styles:
We can convertinline styles:
… but it is too slow 😞
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Inline Styles
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Usage:
Update cache:
Cache keyfrom style object:
<HEAD><STYLE…></HEAD
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
hypernovaOUR OPEN-SOURCE SERVER-SIDE RENDERING PLATFORM
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Can CSS be eliminated?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Class name
minification
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• We added this feature via a PR to aphrodite
.helloStyle_x3hn
BEFORE
._x3hn
AFTER
PART 5
PRODUCT ISSUES WITH
AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
UserflowsLOGGED IN/LOGGED OUT
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
DeeplinkingAPP INSTALLED VS. NOT INSTALLED
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
IterationYOUR PRODUCT IS NEVER PERFECTED
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
StabilityCHANGES FROM OTHER TEAMS CAN DRASTICALLY ALTER THE PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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.
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
What did we learn?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• 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?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
CoalescenceEXPERIENCE, DESIGN, PRODUCT
MAGIC CARPET
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
MAGIC CARPET
We created a page
specifically tailored
to first-time search engine users.
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Magic CarpetTHE P2 LANDING PAGE FOR SEO
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P2 Magic Carpet
Filter Controls
Results
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Userflow
Limited Exposure
Focused Product Design
Polished Experience
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Magic CarpetWHAT WE OPTIMIZED
WHAT’S NEXT?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
serviceworkerWHAT IS IT?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
serviceworker USER JOURNEY
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Google Search
ResultsAMPed P2 App Shell
pre-render install serviceworker load content
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
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
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Where to next?FIGURING OUT WHAT PAGE TO AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Experimentation
• Worldwide Launch
• Getting metrics into our core data
WHAT DIDN’T WE TALK ABOUT?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
What didn’t we cover?ALL THE THINGS WE CHOSE NOT TO TELL YOU
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Experiment Results
• Logging Issues
• Experimentation Issues
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Thanks!
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost