This document discusses Airbnb's experience with AMP. It describes some of the technical challenges they faced in implementing AMP for their search results page (P2), including issues with server-side rendering timeouts, new features breaking compatibility, and constraints like the 50KB CSS limit. It also discusses problems with the user experience of AMP pages for logged-in users. Airbnb developed a "Magic Carpet" landing page tailored for first-time search users to address these issues. The document concludes by mentioning potential next steps like experimenting with AMP for other pages and integrating metrics.
BDSM⚡Call Girls in Sector 39 Noida Escorts Escorts >༒8448380779 Escort Service
TechSEO Boost 2017: AMPing Airbnb
1. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
+ AMP
BRIAN TA / GIL BIRMAN / 11-2017
4. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P1
HOME PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
5. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P2
SEARCH RESULTS PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
6. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P3
LISTING PAGES
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
10. 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
11. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMP
DIAGRAM
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
s/sf amp/s/sf
14. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Challenges
FIGURING OUT WHAT PAGE TO
AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Impactfulness (Traffic)
• Page Volatility
• Technical Challenges (legacy system compatibility)
• Page Ownership
15. Guidebooks
THINGS TO DO
IN {CITY NAME}
PROS CONS
• Design is stable
• No one is working on it
• Low Traffic
• Low Impact
16. P1
HOMEPAGE
PROS CONS
• LOTS of Traffic
• High Impact
• Only 1 Page
• Making changes on P1
requires approval from higher-
ups
• Frequent Redesigns
17. 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
19. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Organic Search
Traffic Breakdown
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
21. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Basic Questions to
Answer
QUESTIONS 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?
22. 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?
Procrastination
ISSUES WE WON’T ADDRESS
UNTIL LATER
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
25. 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 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
27. 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
29. 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
31. 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
34. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
SQUAD
GOALS
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Make our pages AMP-
compatible without having
to recreate them from
scratch.
35. 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
36. 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 CHALLENGES
OUR EXISTING FRAMEWORK WAS INCOMPATIBLE WITH AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
38. 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>
40. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Inline Styles
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
To class-based styles:
We can convert
inline styles:
… but it is too slow 😞
41. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Inline Styles
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Usage:
Update cache:
Cache key
from style object:
43. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
hypernova
OUR 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)
47. 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
48. 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
50. 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
Userflows
LOGGED IN/LOGGED OUT
51. 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
Deeplinking
APP INSTALLED VS. NOT
INSTALLED
52. 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
Iteration
YOUR PRODUCT IS NEVER
PERFECTED
53. 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
Stability
CHANGES FROM OTHER TEAMS
CAN DRASTICALLY ALTER THE
PAGE
54. 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?
55. 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
Coalescence
EXPERIENCE, DESIGN,
PRODUCT
57. 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
58. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Magic Carpet
THE P2 LANDING PAGE FOR
SEO
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P2 Magic Carpet
Filter Controls
Results
59. 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 Carpet
WHAT WE OPTIMIZED
61. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
serviceworker
WHAT IS IT?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
62. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
serviceworker
USER JOURNEY
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Google Search
Results
AMPed P2 App Shell
pre-render install serviceworker load content
63. 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
64. 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
66. 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
67. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Thanks!
brian.ta@airbnb.com
gil.birman@airbnb.com
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Hinweis der Redaktion
A timed out page is a blank page. To determine if a page successfully rendered and thus is suitable for caching, we check the markup.