Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TechSEO Boost 2017: AMPing Airbnb

17,757 views

Published on

Brian and Gill from Airbnb will walk you through what AMP is, their strategy around AMP, and their development process. They will provide you insights on technical challenges, what's worked, what hasn't, and the potential gains seen on factors such as page speed, bounce rate and organic traffic.

Published in: Marketing
  • Be the first to comment

TechSEO Boost 2017: AMPing Airbnb

  1. 1. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost + AMP BRIAN TA / GIL BIRMAN / 11-2017
  2. 2. PART 1 AIRBNB
  3. 3. WHAT IS AIRBNB?
  4. 4. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost P1 HOME PAGE Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
  5. 5. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost P2 SEARCH RESULTS PAGE Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
  6. 6. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost P3 LISTING PAGES Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
  7. 7. PART 2 AMP
  8. 8. WHAT IS AMP?
  9. 9. AMP Demo ————————>
  10. 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. 11. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost AMP DIAGRAM Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost s/sf amp/s/sf
  12. 12. AMP Demo ————————>
  13. 13. WHAT SHOULD WE AMP?
  14. 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. 15. Guidebooks THINGS TO DO IN {CITY NAME} PROS CONS • Design is stable • No one is working on it • Low Traffic • Low Impact
  16. 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. 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
  18. 18. P2 SEARCH RESULTS PROS CONS • High Traffic • High Impact • A lot of people working on it • Frequent design changes
  19. 19. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost Organic Search Traffic Breakdown Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
  20. 20. AMP MVP MINIMUM VIABLE PRODUCT
  21. 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. 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
  23. 23. PART 3 AMP P2 OBSTACLES
  24. 24. [OBSTACLES] SERVER-SIDE PAGE RENDERING TIMING OUT
  25. 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
  26. 26. Successful vs Timed out page TIMEOUT===BLANK PAGE
  27. 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
  28. 28. Error Page (Google Bug) AMPED SEARCH RESULT
  29. 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
  30. 30. [OBSTACLES] NEW FEATURES BROKE AMP
  31. 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
  32. 32. A particularly broken experience CONTENT DISAPPEARED!
  33. 33. PART 4 AMP ARCHITECTUR E SOLUTIONS
  34. 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. 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. 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
  37. 37. IMPORTANT!
  38. 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>
  39. 39. INLINE STYLES
  40. 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. 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:
  42. 42. <HEAD><STYLE…></HEAD
  43. 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)
  44. 44. Rails ERB Template aphrodite inserts styles here no way to insert styles here
  45. 45. ERB template for AMP pages entire page is rendered in hypernova (node service)
  46. 46. 50KB CSS LIMIT
  47. 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. 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
  49. 49. PART 5 PRODUCT ISSUES WITH AMP
  50. 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. 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. 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. 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. 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. 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
  56. 56. MAGIC CARPET
  57. 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. 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. 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
  60. 60. WHAT’S NEXT?
  61. 61. Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost serviceworker WHAT IS IT? Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
  62. 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. 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. 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
  65. 65. WHAT DIDN’T WE TALK ABOUT?
  66. 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. 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

×