Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AMP Accelerated Mobile Pages - To AMPFinity And Beyond

1.366 visualizaciones

Publicado el

The AMP Project (Accelerated Mobile Pages) has been launched as an open source initiative between tech companies, search engines, publishers, CRM providers, CMS providers and social media platforms as a solution to speed up the mobile web. What is AMP? Why is it needed? How does it achieve its speed? Where is the project at now? What does the future hold for AMP? To AMPFinity and Beyond

Publicado en: Marketing
  • Sé el primero en comentar

AMP Accelerated Mobile Pages - To AMPFinity And Beyond

  1. 1. WHY  AMP?   HOW  AMP?   WOW  AMP? NOW  AMP?   TO  AMP  INFINITY   AND  BEYOND? ACCELERATED   MOBILE  PAGES   (AMP)  – SO  FAR  &  INTO  THE   FUTURE Dawn  Anderson  @  dawnieando
  2. 2. ? WHAT  IS  AMP??
  3. 3. HOW  AMP? ? THE  AMP  PROJECT ACCELERATED  MOBILE  PAGES
  4. 4. ? BRINGING  SUPER   FAST  CONTENT   ON  THE  MOBILE   WEB  TO  PAGES   NEAR  YOU
  5. 5. ? WHY  AMP??
  6. 6. ? WHY  AMP? “More  searches  on   Google  are  made   on  mobile  than   desktop”  (Richard   Gingras,  Head  of   Google  News,   Google  I/O   Developer   Conference)
  7. 7. ? WHY  AMP? By  2020  >  5  billion   mobile  users   globally  to   accessing  the   internet (Source:  Cisco)
  8. 8. ? WHY  AMP? 1  BILLION   MONTHLY  CHROME   USERS  ALONE STATE  OF  THE   UNION  – MOBILE   (Google   I/O)
  9. 9. WHY  AMP? ? DESKTOP  IS  IN  DECLINE “The  door’s  this   way” “I  don’t   want  to  go” Now  More  Monthly  Searches  On  Mobile   Than  Desktop
  10. 10. ? WHY  AMP? Source:  Google  I/O The  average  person   checks  their  phone   over 150  x  per   day We  spend 177   minutes On  our  phones  per   day Mobile  conversion   rates  have  increased 29% Over  the  past  year MOBILE  USER  BEHAVIOUR  IS  FUNDAMENTALLY  DIFFERENT  TO  DESKTOP “The  move  to  mobile  -­‐ user   behaviour is  changing”
  11. 11. WHY  AMP? ? Source:  Google  Research MANY,  MANY  (150+)  SHORT  BURST  DAILY  MOBILE  ‘MOMENTS   OF  NEED’
  12. 12. WHY  AMP? ? “I  can   concentrate   for  longer   than  you” IMAGE  ATTRIBUTION:   WIKIPEDIA 9  SECONDS 8 SECONDS “The  move  to  mobile  -­‐ user   behaviour is  changing”
  13. 13. WHY  AMP? ? WE’VE  GONE  FROM  ‘ALWAYS   CONNECTED’  TO  ‘OVER-­‐ CONNECTED’ OPERATE  ACROSS  5  DIFFERENT   SCREENS (MOBILE,  TABLET  OR  GAMING   DEVICE,  DESKTOP,  LAPTOP,  TV) THERE’S  A  LOT  OF   COMPETITION  FOR  OUR   LIMITED  ATTENTION  SPAN “I  can   concentrate  for   longer  than   you” IMAGE  ATTRIBUTION:   WIKIPEDIA 9  SECONDS
  14. 14. WHY  AMP? ? ’MOBILE  FIRST’  IS  SIMPLY  NOT   GOOD  ENOUGH  NOW WE  NOW  NEED: ‘MOBILE   FIRST,  FAST’ “I  can   concentrate  for   longer  than   you” IMAGE  ATTRIBUTION:   WIKIPEDIA
  15. 15. WHY  AMP? ? 'Sweet  Shop   Syndrome’ CMS  Plugins  -­‐ modules  on   Drupal,  plugins  on  Wordpress.     We  all  love  things  that  do  stuff   ,but  then  we  forget  that  they   are  there,  and  often  don't   disable  or  remove  them  and   they  get  called  and  they  often   have  javascript in  them. ‘ALL  THE   SHINY   THINGS’
  16. 16. ? WHY  AMP? WHY  WE  CAN’T  HAVE   NICE  THINGS OVERKILL  IN  ALL   THINGS CHOKING  THE  MOBILE   WEB  WITH  THINGS   NOT  DESIGNED  TO  BE   USED  ON  MOBILE   DEVICES  AND  ON   MOBILE   CONNECTIONS,  WITH   MOBILE  BATTERIES   AND  DATA   DOWNLOAD  LIMITS “Ooohhh Shiny”
  17. 17. WHY  AMP? ? HUGE  AMOUNTS  OF  JAVASCRIPT   PULLED  IN  WITH  THOSE  CALLS  TO   SERVERS  OFTEN  FROM  ACROSS   OCEANS  AND  CONTINENTS SLOW   LOADING   WEBSITES • Slow  loading  websites • Images  moving  around  as  other  images  try  to  join  the  page • Page  inclusions  being  called  from  across  oceans  and   continents • Many  javascripts blocking  the  DOM • Third  party  scripts  with  many  redirects • Content  shuffling  around  as  it  calculates  sizes  from  varying   dimension  images • CSS  stylesheets  calling  lots  of  legacy  content • A  total  strain  on  mobile  devices  unnecessary  data  usage • A  payload  being  called  not  designed  for  mobile  use
  18. 18. NOT  EVERYTHING  ARRIVES  AT  THE  SAME  TIME ? NON  AMP  PAGE Lorem  ipsum  dolor   sit  amet,  consectetur adipiscing elit.   Curabitur at  posuere lacus.  Pellentesque vitae  auctor risus.  Pellentesque molestie,   tortor a  posuere interdum,   justo elit aliquam enim,  a  commodo ante   ipsum  interdum felis.  Sed sit  amet mi  varius,  porttitor risus eu,  fringilla urna.  Praesent porttitor,   erat eu eleifend auctor, libero   neque luctus velit,  in  eleifend justo arcu et  diam.   Ut venenatis leo nisi,   sit  amet lacinia ligula  dignissim id.   Etiam venenatis facilisis viverra.  Suspendisse faucibus erat at  nisi  semper,   ac  malesuada massa accumsan.  Sed non  interdum augue.  Donec feugiat porttitor dui,   ultrices porta  massa feugiat sed. SOME  IMAGE SOME  AD SOME  THIRD  PARTY   TEASER  CONTENT “Wait  for  us  – we’re  late”Some   image Some   script Another   script Some   image Another   image Another   script “We  travelled   a  long  way” “Can’t  you  all   move  around  a   bit  to  squeeze  us   in?” “I’m  late  too.   Traffic  was  a   mare” “We’re  all  going  to   have  to  shuffle   about  a  bit” “You  late  arrivals   are  holding   everything  up”
  19. 19. WHY  AMP? ? PAPER  ROUNDS,  ROLLERSKATES,  PET  DOGS  &  SNOW -­‐ DON’T  WORK  WELL  TOGETHER  -­‐ TRYING  TO  BE  TOO  FLASH,  CUTTING  CORNERS,  MAKING  THINGS  WORSE,   NOT  CONSIDERING  ALL  THE  FACTORS  AND  ……..‘TAKING  LONGER’ + + = FAIL IMAGE  ATTRIBUTION:  WIKIPEDIA
  20. 20. ? DESKTOP  PERFORMANCE MAKING  TOO  MANY  REQUESTS -­‐ TOO  SLOW  TO  LOAD  (AND  THIS   IS  DESKTOP) WITHOUT   AMP TOO   SLOW ASKS  FOR  TOO   MANY  THINGS FAIL DESKTOP
  21. 21. ? EVEN  MOBILE  SUCKS MAKING  TOO  MANY  REQUESTS -­‐ TOO  SLOW  TO  LOAD  (AND  THIS   IS  https://m.washingtonpost.com MOBILE  SITE) WITHOUT   AMPTOO   SLOW ASKS  FOR  TOO   MANY  THINGS FAILWASHINGTON  POST   MOBILE  SITE EXTERNAL   JAVASCRIPT   REQUESTS    &   EXTERNAL   REDIRECTS
  22. 22. ? WHY  AMP? MAKING  TOO  MANY  REQUESTS -­‐ TOO  SLOW  TO  LOAD  (AND  THIS   IS  https://m.washingtonpost.com MOBILE  SITE) WITHOUT   AMP FAILWASHINGTON  POST   MOBILE  SITE
  23. 23. ? WHY  AMP? TOO  MANY  3RD PARTY  REDIRECTS -­‐ TOO  SLOW  TO  LOAD  (AND  THIS   IS  https://m.washingtonpost.com MOBILE  SITE) WITHOUT   AMP FAILWASHINGTON  POST   MOBILE  SITE
  24. 24. WHY  AMP? ? THAT  POOR   LITTLE  NON-­‐AMP   PAGE  HAS  A  LOT   TO  CARRY
  25. 25. WHY  AMP? ? STOP  PUTTING   LIPSTICK  ON  A   ’SLOW  PIG’ IT  WON’T  WORK…   IT’S  STILL  SLOW K.I.S.S. PUBLISHERS  CANNOT  KEEP  UP   WITH  THE  DEMANDS  OF  THE   MOBILE  WEB  AND  IT’S   TECHNOLOGY  (PERFORMANCE   WISE)
  26. 26. WHY  AMP? ? 40%  OF  PEOPLE   ABANDON  A  WEBSITE   THAT  TAKES  MORE  THAN   3  SECONDS  TO  LOAD 40% 60% VISITORS ABANDON WAIT
  27. 27. WHY  AMP? ? “IF  A  SITE  DOESN’T  LOAD  INSTANTLY,   ABANDONMENT  INCREASES  AND   OPPORTUNITIES  ARE  LOST”  (Richard   Gingras,  Google  I/O) “I’m  outta here…  and  I   ain’t never   coming   back” “Me  too…   talk  about   slooooowww w” PEOPLE  BOUNCE  (and  not  because  they   found  what  they  were  looking  for)
  28. 28. WHY  AMP? ? IT’S  NOT  JUST  LOADING   EITHER…SPEED  MATTERS   WHEN  SCROLLING SPEED  MUST  BE   ONGOING   THROUGHOUT  THE   WHOLE  UX
  29. 29. WHY  AMP? ? MISSED  OPPORTUNITIES  IN   THE  EARLY  STAGES  OF  THE   CUSTOMER  JOURNEY FIRST  IMPRESSIONS  COUNTIMAGE  CREDIT:  McKINSEY MCKINSEY  CUSTOMER  JOURNEY  MODEL EXTENDED  CLTV   (CUSTOMER   LIFETIME  VALUE)
  30. 30. WHY  AMP? ? Source:  Think  With  Google 80%  OF  OPPORTUNITY  TO   TOUCHPOINT  WITH   PROSPECTS  IS  NOT  IN  THE   CONVERSION  STAGE CAN  YOUR  BRAND  HELP  THEM  FAST   IN  THESE  MOMENTS?
  31. 31. WHY  AMP? ? Source:  Google  Research IN  THESE  ‘MOMENTS’  YOUR  BRAND  CAN  HELP  USERS   QUICKLY
  32. 32. WHY  AMP? ? Source:  Google  Research IN  THESE  ‘MOMENTS’  YOUR  BRAND  CAN  HELP  USERS   QUICKLY
  33. 33. WHY  AMP? ? THE  NEXT   BILLION  USERS   WILL  LIKELY  NOT   HAVE  HIGH   INTERNET   SPEEDS DOESN’T   EVERYBODY   DESERVE  TO  BE   ABLE  TO  ‘MEET   THEIR   MOMENTS   NEEDS’   QUICKLY?
  34. 34. ? HOW  AMP??
  35. 35. ? HOW  AMP? WE  CAN’T   MAKE  MORE   TIME  … …BUT  WE  CAN   HELP  USERS  TO   ACCESS  MORE   IN  TIME   AVAILABLE  – FETCH  &  SERVE   FASTER
  36. 36. HOW  AMP? ? AN  OPEN  SOURCE   SOLUTION -­‐ IMPORTANT  THAT  A   SOLUTION  BE  DRIVEN   BY  THE  INDUSTRY  – NOT  A  SINGLE  PLAYER   SO  ALL  CAN  SHARE   THEIR  EXPERTISE
  37. 37. ? COLLABORATIVE  SYNERGY 36  PUBLISHERS   &  TECH   COMPANIES   (AND  GOOGLE)   INVOLVED SYNERGY  – “THE  SUM  OF   THE  WHOLE  IS   GREATER  THAN   THE  SUM  OF   THE  PARTS” AN  INDUSTRY  DRIVEN  SOLUTION  SO  ALL  CAN  SHARE  THEIR  UNIQUE   EXPERTISE  IN  A  COLLABORATIVE  OPEN  SOURCE  INITIATIVE
  38. 38. HOW  AMP? ? THE  AMP  PROJECT ACCELERATED  MOBILE  PAGES
  39. 39. HOW  AMP? ? THE  SOLUTION ‘MAKE  THE  OPEN  MOBILE  WEB  FASTER’
  40. 40. HOW  AMP? ?THE  VISION ‘PUBLISHERS  PRODUCE  MOBILE  OPTIMIZED  CONTENT  ONCE   AND  IT  LOADS  INSTANTLY  FROM  EVERYWHERE’
  41. 41. ? HOW  AMP? 4  GUIDING  PRINCIPLES FASTER IS BETTER BEAUTIFUL   MATTERS BE  SAFE, BE  SECURE BETTER   TOGETHER
  42. 42. HOW  AMP? ? INSTANT   SPEED TRIMMED   DOWN   DATA LOAD  ONLY   THE   NECESSARY FAST,   ELEGANT   WEBSITES
  43. 43. HOW  AMP? ? “75%  OF  SEO  SPECIALISTS   ARE  AWARE  OF  AMP” (THE  DRUM,  APRIL  2016)
  44. 44. HOW  AMP? ? “BUT  OVER  75%  ARE  NOT   CURRENTLY   IMPLEMENTING” (THE  DRUM,  APRIL  2016)
  45. 45. It’s  butt-­‐ugly After   ‘Mobilegeddon’   FUD  – this? What  about   scripts  and   CSS? What  about   our  ‘fancy   website’? Loads  of   validation   errors NOW  AMP Most  HTML   tags  don’t   work It’s  Google   Proprietary   Code  (IT’S   NOT) CDN   Integration Issues We’re   ecommerce   – not  our   ’bag’ WHY  YOU  MIGHT  NOT  YET  HAVE  IMPLEMENTED
  46. 46. HOW  AMP? ? https://amphtml.wordpress.com/2016/05/16/amp-­‐at-­‐google-­‐io/ https://amphtml.wordpress.com/2016/05/16/amp-­‐at-­‐google-­‐io/amp/ AMP  PAGENON  AMP  PAGE FUNCTION  OVER  FORM All  those  fancy  websites  are   kind  of  overkill  for  AMP  (and   not  allowed)  -­‐ i.e.  your  code   won't  validate  enough  to   show  up  in  AMP  results <html ⚡>
  47. 47. HOW  AMP? ? SERVED  ‘LOCALLY’   WHEN  NEEDED  FOR   FETCH  TIME   MINIMALISATION Put  simply  -­‐ HTML  +   JAVASCRIPT,   WITH   MINIMAL   STYLING  – ‘CACHED’   AND   SERVED   ‘JUST  IN   TIME’
  48. 48. ? WHAT  MAKES  AMP  SO  FAST? ACTIONS • Allow  only  asychronous scripts • Size  all  resources  statically • Don’t  let  extension  mechanisms  block  rendering • Keep  all  third-­‐party  Javascript out  of  the  critical   path • Keep  all  CSS  inline  and  size-­‐bound • Keep  font-­‐triggering   efficient • Minimize  style  recalculations • Only  run  GPU  (Graphics  Processing  Unit)   accelerated  animations • Prioritize  resource  loading • Load  pages  in  an  instant  (efficient  pre-­‐rendering) IMAGE  ATTRIBUTE:  W3.ORG DOCUMENT  OBJECT  MODEL
  49. 49. ? • CONTENT  IS  CACHED  IN  AMP  CACHE,  STORED  AND  SERVED  VIA   GOOGLE’S  CDN  (CONTENT  DELIVERY  NETWORK)  LOCAL  TO  THE   USER  ’JUST  IN  TIME’ • SITES  DO  NOT  CONTROL  THEIR  OWN  JAVASCRIPT  (AMP  JS   CONTROLS  IT).    SCRIPTS  ARE  KEPT  TO  A  MINIMUM • PAGE  IS  A  LIGHTWEIGHT  VERSION  OF  THE  NON-­‐AMP  PAGE • CSS  IS  MINIMAL • IMAGE  SIZES  ARE  FIXED  AND  THE  CONTENT  FITS  AROUND   THAT • CONTENT  IS  SERVED  ON  A  ‘JUST  IN  TIME’  BASIS • IT’S  A  RESPONSIVE  FRAMEWORK SLIGHTLY  LESS  GOBBLEDEYGOOK IMAGE  ATTRIBUTE:   PINTEREST
  50. 50. ? CUTTING  DOWN  THE  JOURNEY  TO  YOUR  PAGE LIGHTER  AMP   CONTENT  IS  SERVED   FROM  AN  AMP   CACHE  NEAR  TO  THE   USER  – GETS  THERE   MUCH  QUICKER TRADITIONALLY   MANY  CALLS  TO   DIFFERENT   CONTENT  FROM  FAR   AWAY  DESTINATIONS CONTENT   TRADITIONALLY   HAS  TO  CROSS   OCEANS  AND   CONTINENTS   BEFORE  IT  IS   SERVED  TO  USERS USER ANALYTICS IMAGES ADS SCRIPTS AFFILIATE  ADS AMP   CACHE HTML TRIMMED   DOWN  AMP   VERSION   SERVED   INSTANTLY   FROM  HERE AMP   CACHE
  51. 51. HOW  AMP? ? PAGE  TYPES  IT  CAN  BE  USED  ON • Articles • Blog  posts • Recipes • Static  pages • News  pages • Pages  with  videos • Forms • Ecommerce  pages • Dynamic  pages • Forums • Category  pages  on   blogs • Registration  pages
  52. 52. HOW  AMP  – IMPLEMENTING   WITH  CMS’? ? IMPLEMENTING  AMP   WITH  WORDPRESS,   JOOMLA,  DRUPAL
  53. 53. ? HOW  AMP  – IMPLEMENTING   WITH  POPULAR  CMS’? IMPLEMENTING  AMP   PLUGIN  WITH  WORDPRESS,   AND  YOAST  ‘GLUE’  FOR   ADDITIONAL  FEATURES IMPLEMENTING  AMP   WITH  PAGEFROG  FOR   AMP  AND  WORDPRESS
  54. 54. HOW  AMP? ? Or  append  #development=1  to   end  of  any  AMP  URL  in  chrome,   and  use  developer  tools
  55. 55. HOW  AMP? ? Code  samples  available  here  -­‐ https://ampbyexample.com/
  56. 56. HOW  AMP? ?
  57. 57. ? HOW  AMP? https://mercury.postlight.com/
  58. 58. HOW  AMP? ? AMP-­‐ANALYTICS <script  async custom-­‐element="amp-­‐analytics"   src="https://cdn.ampproject.org/v0/amp-­‐analytics-­‐0.1.js"></script> AMP-­‐PIXEL FOR  SIMPLE  PAGE  VIEWS <amp-­‐pixel src="https://foo.com/pixel?RANDOM"></amp-­‐pixel> WORKS  WITH  SEVERAL   ANALYTICS  PROVIDERS ANALYTICS
  59. 59. HOW  AMP? ? GOOGLE  SEARCH  CONSOLE   AMP  ANALYTICS YOU’LL  ONLY   SEE  THIS  IF   YOU’RE   TRIGGERING   WITH  AMP   PAGES
  60. 60. HOW  AMP? ? <html ⚡> WHAT  CONTENT  REALLY  MATTERS  AFTER  ALL? • Video • Images  &  photos • Social  connection  and  sharing • Text  (less  than  you  think).    Few  people  read  full   documents  any  more • Ads  (we  all  need  to  pay  the  bills) • Forms  &  ecommerce  (Acquisition  &  ROI)
  61. 61. HOW  AMP? ? <html ⚡>  MUST  HAVES THE  ‘BARE’  NECESSITIES • Must  start  with  <!doctype html>   • Must  contain  top  level  <html  ⚡ >  or  <html-­‐amp> • Must  contain  <head>  and  <body>  tags • Must  contain  <link  rel="canonical"  href="$SOME_URL"  /> • First  head  child  tag  must  be  <meta  charset="utf-­‐8"> • Must  contain  <meta  name="viewport"   content="width=device-­‐ width,minimum-­‐scale=1">   (initial-­‐scale=1)  is  also  recommended • Must  contain  <script  async src="https://cdn.ampproject.org/v0.js"></script> • Must  contain  the AMP  boilerplate  code  (‘head>  style[amp-­‐ boilerplate]’  ’noscript>  style[amp-­‐boilerplate]’) WARNING:  FOR  GUIDANCE  ONLY  – SEE  OFFICIAL  DOCUMENTATION   AT  https://www.ampproject.org/docs/reference/spec.html
  62. 62. ? JAVASCRIPT  &  THIRD  PARTY  SCRIPTS FOR  GUIDANCE  ONLY  – SEE  OFFICIAL  DOCUMENTATION  AT   https://www.ampproject.org/docs/reference/spec.html • Frameworks  using  javascript will  be  problematic  (e.g.  Bootstrap) • AMP  is  responsive  by  nature  so  there  is  crossover  with  e.g.  Bootstrap • Author-­‐created  javascript is  not  allowed • Javascript libraries  will  be  problematic  (e.g.  Jquery) • Document.write is  outright  banned • Third  party  scripts  must  be  used  in  <amp-­‐iframe> • The  source  of  third  party  scripts  must  be  over  https  connection • THERE  ARE  MANY  RESTRICTIONS  WITH  JAVASCRIPT  AND  THIRD   PARTY  SCRIPTS !
  63. 63. ? YOU  CAN  STILL  MAKE  YOUR  PAGES  ‘PRETTY’  WITHIN  REASON • Inline  styles  only  (limited  to  50  kb) • No  external  stylesheets  (apart  from  some   custom  fonts) • Styles  must  be  declared  in  the  head  of  the  page • Can  add  e.g.  <style  amp-­‐custom>  h1  {color:  red}   </style> • *  (universal  selector)  is  not  allowed • !important  is  not  allowed • Use  <amp-­‐accordion>,  <amp-­‐carousel>  to   enhance  pages • Use  <amp-­‐sidebar>  for  navigation • Use  <amp-­‐list>  for  item  lists FOR  GUIDANCE  ONLY  – SEE  OFFICIAL  DOCUMENTATION  AT   https://www.ampproject.org/docs/reference/spec.html CSS  &  STYLING AMP-­‐ ACCORDION AMP-­‐ CAROUSEL
  64. 64. ? <AMP-­‐VIDEO> WARNING:  FOR  GUIDANCE  ONLY  – SEE  OFFICIAL  DOCUMENTATION   AT  https://www.ampproject.org/docs/reference/spec.html • <amp-­‐video> • Video  source  (src)  must  be  https • Loads  lazily  (when  needed) • Enhance  video  on  your  site  with   extended  components  including   <amp-­‐youtube>,  <amp-­‐vine>,   <amp-­‐vimeo>,  <amp-­‐springboard-­‐ player>
  65. 65. ? <AMP-­‐IMG> • <amp-­‐img> • Must  be  given  explicit  size  (width  /   height) in  advance  to  validate • Aspect  ratio  is  known  via  size  without   having  to  fetch  the  image • Other  content  on  page  builds  around   fixed  image  sizes  known • Enhance  images  on  your  site  with   extended  components  including   <amp-­‐anim>  (gifs),  <amp-­‐image-­‐ lightbox>,  <amp-­‐instagram>,  <amp-­‐ lightbox>,  <amp-­‐carousel> • THE  MAIN  POINT  TO  NOTE  IS  EARLY   ’FIXED  SIZE’  DECLARATION  IS  KEY WARNING:  FOR  GUIDANCE  ONLY  – SEE  OFFICIAL   DOCUMENTATION  AT   https://www.ampproject.org/docs/reference/spec.html <amp-­‐img> <amp-­‐carousel> SIZE   MATTERS
  66. 66. ? WARNING:  FOR  GUIDANCE  ONLY  – SEE   OFFICIAL  DOCUMENTATION  AT   https://www.ampproject.org/docs/reference/s pec.html AMP  AND  SOCIAL <AMP-­‐FACEBOOK> <AMP-­‐PINTEREST> <AMP-­‐INSTAGRAM> <AMP-­‐TWITTER> <AMP-­‐VINE> <AMP-­‐VIMEO> <AMP-­‐YOUTUBE> <AMP-­‐SOCIAL-­‐SHARE> TWEETS,   POSTS,   VIDEOS  AND   IMAGES   FROM   SOCIAL   MEDIA
  67. 67. ? WARNING:  FOR  GUIDANCE  ONLY  – SEE  OFFICIAL   DOCUMENTATION  AT   https://www.ampproject.org/docs/reference/spec.html <AMP-­‐AD> • <amp-­‐ad> • Most  standard  ad  formats  currently  supported • ALL  ADS  AND  SRC  URL  MUST  BE  SERVED  OVER  HTTPS • Other  formats  in  experimental  stages: • AMP  FX  flying  carpet  ads  (Experimental)  <amp-­‐fx-­‐flying-­‐ carpet> • Sticky  ads  (Experimental)  <amp-­‐sticky-­‐ad>  (Max  1  per  page) • AMP  ads  for  AMP  (Experimental)  (responds   as  quickly  as  an   AMP  page)
  68. 68. ? WARNING:  FOR  GUIDANCE  ONLY  – SEE  OFFICIAL   DOCUMENTATION  AT   https://www.ampproject.org/docs/reference/spec.html • Seems  like  forms  are  being  worked  on  currently • They  realise that  ecommerce  is  VERY  important • Ecommerce  is  a  bit  more  tricky  over  static  content • It’s  not  been  ruled  out  but  there’s  it’s  not  on  the   current  roadmap • IT  WILL  HAPPEN  IMHO  (They  known  its   importance) FORMS  &  ECOMMERCE £
  69. 69. FIXING  ERRORS ? SO  CLOSE  TO   ZERO  ERRORS   BRIEFLY GOOGLE   SEARCH   CONSOLE
  70. 70. ? BUT  THEN  IMPLEMENTED   CLOUDFLARE  CONTENT   DELIVERY  NETWORK  WITH   HTTPS  FLEXIBLE  SSL  – LOTS   OF  ERRORS  APPEARED CLOUDFLARE   SCRIPT  CALL   ISSUE ’MIXED’  CONTENT   (SECURE  &   INSECURE) TIP:  THIS  IS  A  KNOWN   ISSUE  – NEXT  RELEASE   OF  CLOUDFLARE   PAGESPEED  SHOULD  FIX
  71. 71. GETTING  HELP ?
  72. 72. GETTING  HELP ?
  73. 73. GETTING  HELP ?
  74. 74. LOTS  OF  HELP ? RECORDED   WEBMASTER   OFFICE  HOURS   AMP  HANGOUTS  – WATCH  THEM AMP  WEBMASTER  HELP   FORUMS  TOO
  75. 75. EVEN  MORE  HELP ? https://product forums.google. com/forum/#!f orum/webmast ers
  76. 76. ? NOW  AMP??
  77. 77. NOW  AMP? ? CURRENT  FEATURES PROJECT  SCOPE  HAS   BEEN  LIMITED  FOR   NOW
  78. 78. ? NOW  AMP? AVAILABLE  IN   • BRAZIL • GERMANY • SPAIN • FRANCE • UK • INDIA • INDONESIA • ITALY • MEXICO • JAPAN • RUSSIA • US • CANADA • AUSTRALIA  (MOST   RECENT) BUT  THERE  ARE   STILL  HUGE   NON-­‐COVERAGE   AREAS WHEN  THERE  IS   ENOUGH   UPTAKE  IT  WILL   BE  EXPANDED
  79. 79. NOW  AMP? ? A  SEARCH  IN  GOOGLE  IMAGES   FOR  ‘AMP’  WHILST  IN  AUSTRALIA   – ‘NEVER  HEARD  OF  IT’ TOO  NEW  YET
  80. 80. ORGANIC  ADOPTION  SO  FAR ? 125+  Million Total  documents  in  the  index  from  more  than 640K  domains SOURCE:  GOOGLE
  81. 81. DEVELOPER  COMMUNITY ? https://github.com/ampproject THE  OPEN  SOURCE  COMMUNITY  OF   DEVELOPERS  IS  VERY  BUSY  WITH   ACTIVITY  24  HOURS  A  DAY  BETWEEN   THEM  ON  THE  PROJECT IN  JUST  8  MONTHS 7,300+   DEVELOPERS   HAVE   ENGAGED 1,900+  PULL   REQUESTS CODE   SUBMISSIONS 88+  RELEASES   (CIRCA  2  PER   WEEK) FOLLOW  PROGRESS  AT  GITHUB   OR  EVEN  GET  INVOLVED
  82. 82. NEWS  CAROUSEL  (NEWS  &  ‘SOFT  NEWS’) ? AMP  NEWS   CAROUSEL ONLY  VALID  AMP   PAGES  CAN  SHOW   IN  THE  NEWS   CAROUSEL
  83. 83. RECIPES ? EXTENDING  TO   RECIPES  &  RECIPE   RICH  CARDS MANY  OTHER   CONTENT  TYPES   AHEAD
  84. 84. NOW  AMP? ? IOS  &  ANDROID   SEARCH  SEARCH   APPS Announced   by  Richard   Gingras at   Google  I/O   2016
  85. 85. ? AD  FORMATS  AVAILABLE AD  FORMATS  AVAILABLE • MOST  STANDARD  AD  FORMATS • ‘FLYING  CARPET’  ADS • STICKY  ADS • AMP  ADS  FOR  AMP ALL  ADS  MUST  BE  SERVED  OVER  HTTPS  FROM   PAGES  WITH  CONTENT  WHICH  IS  SERVED   OVER  HTTPS
  86. 86. ? WOW  AMP?
  87. 87. WOW  AMP? ? ELEVATED  PERFORMANCE  BASELINE   FOR  ALL COMPARED  TO   NON-­‐AMP  PAGE EVEN  BEFORE   FURTHER   ENHANCEMENT  VIA   PRE-­‐RENDERING  AND   SMART-­‐CACHING 4  x   FASTER 10  x   LESS   DATA
  88. 88. ? WOW  AMP?
  89. 89. ? REMEMBER  THAT  WASHINGTON  POST  PAGE? FAIL“WASHINGTON  POST  ARE  SEEING   AMP  ARTICLES  LOAD  AT  AN   AVERAGE  OF  400  MILLISECONDS  – A  HUGE  GAIN  IN  SPEED” DAVE  MERRELL,  WASHINGTON   POST WITH  AMP
  90. 90. WOW  AMP? IT’S  LIGHTNING  FAST ? WITH  AMP >  94%  OF   SITES WITHOUT  AMP FAR  FEWER   REQUESTS AND  THIS  WAS  NOT  EVEN   ‘LOCALLY’  SERVED  TO  ME
  91. 91. WOW  AMP? ? WITH  AMP IT’S  LIGHTNING  FAST  &  A  BETTER   UX WITHOUT   AMP
  92. 92. ? TO  AMPFINITY  &   BEYOND? ?
  93. 93. IT’S  ONLY  THE  BEGINNING ? Features  and  content   types  will  be  considerably   extended  over  time Open  source  project   means  may  be  extended   to  AMP  Ecommerce   rather  than  just  covering   static  pages  (more  tricky)
  94. 94. ? WHAT’S  IN  IT  FOR  ME? HIGHER   ENGAGEMENT   AND  MORE   PROBABILITY  OF   CLICKING  ON  ADS BETTER   BUSINESS   MODELS FOR  ADVERTISERS FOR  PUBLISHERS FOR  USERS FOR  THE  INDUSTRY FOR  SEMs A  BETTER  UX SECURITY ‘NEEDS  MET’   QUICKER CONSUME   MORE   CONTENT BETTER   BUSINESS   MODEL TRAFFIC  IN   OPEN  MOBILE   WEB RETURNING   VISITORS HIGHER  CTRs  &   ECPMs HIGHER  VIEWABILITY   RATES HIGHER  DWELL   TIMES  &  CLICK   DEPTH BETTER  BUSINESS   MODEL ADDITIONAL   ORGANIC  SEARCH   REAL  ESTATE   (REACH) FIRST  MOVE   ADVANTAGE ‘SPEED’  AS  A   RANKING  FACTOR HISTORY  LOG   HEAD  START
  95. 95. ? IS  IT  ESSENTIAL  TO  GO  ‘AMP’?  -­‐ NOPE “If  you  can  achieve  less  than   a  second  load  time  on   mobile  then  you  don’t  need   to  go  AMP”  (Gary  Illyes,   Google) 1   SECOND GOOD  LUCK  WITH   THAT  CONSISTENTLY “AND  MAY   THE  ODDS  BE   EVER  IN  YOUR   FAVOUR”
  96. 96. ? WHY  1  SECOND?...  BECAUSE  THAT’S  THE  AMP  AVERAGE IMHO  – GOING   FORWARD,  SPEED   RANKING  UPTICKS   WILL  BE  BASED  ON   1  SECOND   CONSISTENCY
  97. 97. ? AND…  IT’S  NOT  JUST  ABOUT  YOUR  DEV  TEAM CAN  YOU   GUARANTEE  THAT   THIRD  PARTY   SCRIPTS  WILL  LOAD   IN  UNDER  1   SECOND  TOO? “Take  my   script   too” “Take  my   script   too” “Take  my   script   too”
  98. 98. ? YOU’LL  MISS  OUT WITHOUT  IT  YOU  WILL  NOT   QUALIFY  TO  BE  INCLUDED   IN  NEWS  CAROUSEL OR  FUTURE  PRIME  AMP   REAL  ESTATE  IN  MOBILE   SERPS “Google  is giving  prime  real  estate  to   AMP  pages  in  mobile  search  results,   and  if  you  don’t  have  AMP  on  your   site,  you’re  not  getting  any  of  that   traffic.”  JOOST  DE  VALK,  YOAST BUT
  99. 99. OPEN  SOURCE  SYNERGY  IS  ’KIND  OF   POWERFUL’
  100. 100. ? “If  you  run  a  news   site or a  blog,  you  need  to   make  sure  your  site   supports  AMP. It’s  as   simple  as  that” Joost De  Valk,  Yoast
  101. 101. ? AMP  is  not  just  a  ‘nice  to   have’.    It  is  an  absolute   necessity  for  the  future  of  the   mobile  web.
  102. 102. ”BE  AMP  READY” “DON’T  BE  THE  LAST  HORSE  OUT  OF  THE  GATE  WHEN  THE  ‘OPEN  SOURCE’   SYNERGY  EFFECT  KICKS  IN” -­‐ PERFORMANCE  MATTERS Dawn  Anderson  @  dawnieando UNDERSTAND AMP
  103. 103. TWITTER  -­‐ @dawnieando GOOGLE+  -­‐ +DawnAnderson888 LINKEDIN  -­‐ msdawnanderson THANK  YOU Dawn  Anderson  @  dawnieando

×