Successfully reported this slideshow.
Your SlideShare is downloading. ×

Mobile-First Indexing and AMP - SMX Advanced 2018

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 90 Ad

Mobile-First Indexing and AMP - SMX Advanced 2018

Download to read offline

Google is now using a mobile-first index based on how mobile devices would crawl the web.

In this session, you'll learn advanced techniques to perform an audit in a mobile-first world to ensure that content, links, metadata and structured data are compliant, regardless of how users access your site. You'll also learn tactics and techniques for maximizing the effectiveness of your site's AMP (accelerated mobile pages) content.

Google is now using a mobile-first index based on how mobile devices would crawl the web.

In this session, you'll learn advanced techniques to perform an audit in a mobile-first world to ensure that content, links, metadata and structured data are compliant, regardless of how users access your site. You'll also learn tactics and techniques for maximizing the effectiveness of your site's AMP (accelerated mobile pages) content.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Mobile-First Indexing and AMP - SMX Advanced 2018 (20)

Advertisement

More from Alexis Sanders (20)

Recently uploaded (20)

Advertisement

Mobile-First Indexing and AMP - SMX Advanced 2018

  1. 1. #SMX #13A @AlexisKSanders Mobile-First & AMP For The Advanced SEO Google is adapting to the worldwide shift to mobile.
  2. 2. #SMX #13A @AlexisKSanders <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "Alexis Sanders", "jobTitle": "Technical SEO Manager", "sameAs": "https://twitter.com/AlexisKSanders", "worksFor": { "@type": "Organization", "name": "Merkle", "url": "https://www.merkleinc.com" }, "url": "https://technicalseo.expert" } </script>
  3. 3. #SMX #13A @AlexisKSanders Merkle SEO team works across a vast array of clients
  4. 4. #SMX #13A @AlexisKSanders I’m Sophia’s #ProudAunt too. "relatedTo": { "@type": "Person", "name": "Sophia" } Helping me test Google’s machine learning optimized chocolate chip cookie recipe! “Bayesian Optimization for a Better Dessert” -> https://research.google.com/pubs/pub46507.html
  5. 5. #SMX #13A @AlexisKSanders • Why mobile? • Mobile-first indexing • AMP • Site speed • Mobile UX Agenda
  6. 6. #SMX #13A @AlexisKSanders 0 50 100 150 200 250 2010 2011 2012 2013 2014 2015 2016 2017 2018 MillionsMore people accessing the Internet via mobile & Google is adapting Source: Mobile Internet Users – United States, eMarketer, January 2018 API US Mobile Internet users with Google’s mobile updates App indexing announced 10/13 Google acquired Firebase 9/11 Mobile- friendly label 11/14 Mobilegeddon 4/15 Mobile-friendly testing tool 5/16 AMP project announced 10/15 Mobile- interstitial penalty 8/16 Mobile-first indexing announcement 11/16 PWAs created 6/15 PWA announcement 11/16 Mobile- friendliness API 1/17 Mobile speed ranking factor 1/18 Mobile-first index roll-out announced 3/18 Mobile-friendly label removed 8/16 Google officially recommends responsive 6/12 Google suggest adaptive (1 HTML, 2 CSS) 2/12
  7. 7. #SMX #13A @AlexisKSanders That story persists globally 0.0 0.5 1.0 1.5 2.0 2.5 3.0 2010 2011 2012 2013 2014 2015 2016 2017 2018 Billions Western Europe North America Middle East & Africa Latin America Central & Eastern Europe Asia-Pacific Source: Mobile Internet Users – United States, eMarketer, January 2018 Worldwide mobile Internet users
  8. 8. #SMX #13A @AlexisKSanders The issue is mobile ≠ desktop. It has its own set of challenges
  9. 9. #SMX #13A @AlexisKSanders 1. Smaller screen sizes 3" 6" 10" 13" 27"1" Phone Tablet Desktop Secondary content Primary content Secondary content Primary content Secondary content Primary content UX designers trying to fit everything into two inches
  10. 10. #SMX #13A @AlexisKSanders And then there’s thumb reach… EASY PEEZY OKAY THUMB STRAIN *https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php 49% of users tested* used one hand 67% one-handers used right hand
  11. 11. #SMX #13A @AlexisKSanders 2. Fat finger issues
  12. 12. #SMX #13A @AlexisKSanders 3. Forms Sign up First name Last name Phone number Email Choose a password Confirm password Date of birth Postal address 1 Postal address 2 Postal address 3 Postal address 4 Gender Male Female I have read and accept the Terms of Use
  13. 13. #SMX #13A @AlexisKSanders 4. Mobile devices slower https://httparchive.org/reports/chrome-ux-report Desktop outperformed mobile hitting onload event earlier via Chrome UX Report
  14. 14. #SMX #13A @AlexisKSanders 5. Mobile networks are slower than desktop Ookla’s Speedtest Global Index - http://www.speedtest.net/global-index 0 10 20 30 40 50 60 Africa South America Middle East Eastern Europe Asia-Pacific Europe North America Average of Desktop Download Mbps Average of Mobile Download Mbps Desktop typically has higher download speeds
  15. 15. #SMX #13A @AlexisKSanders 6. Data consumption is growing Ericsson’s Mobility Report, Feb 2018 Interim - https://www.ericsson.com/en/mobility-report Ericsson (ICT) reports increase of +55% YQoYQ
  16. 16. #SMX #13A @AlexisKSanders 7. Traffic is split between browsers and apps ComScore’s 2017 US Mobile App Report
  17. 17. #SMX #13A @AlexisKSanders 8. We get stressed out by mobile delays… Ericsson ConsumerLab, Neurons Inc., 2015
  18. 18. #SMX #13A @AlexisKSanders Local 9. Behavior Think with Google  https://goo.gl/RjGHyp; https://goo.gl/nR68hg Curiosities Urgent need In-store assistance Micro-productivity Entertainment near me, navigation videos, games, social, musichealth, random purchase, west world season 2 Why do ballroom dancers make weird faces? What does this cost on Amazon? Working, booking plane, organize life
  19. 19. #SMX #13A @AlexisKSanders 10. People are still converting on desktop Which devices did people use to make their purchase? https://www.consumerbarometer.com/en/graph-builder/?question=S34&filter=country:united_states
  20. 20. #SMX #13A @AlexisKSanders 11. Even CTR on devices is different 0% 2% 4% 6% 8% 10% 12% 14% 1 2 3 4 5 6 7 8 9 10 Financial 0% 2% 4% 6% 8% 10% 12% 14% 1 2 3 4 5 6 7 8 9 10 Food 0% 2% 4% 6% 8% 10% 12% 14% 16% 1 2 3 4 5 6 7 8 9 10 Health 0% 2% 4% 6% 8% 10% 12% 14% 16% 1 2 3 4 5 6 7 8 9 10 HighTech 0% 5% 10% 15% 20% 25% 1 2 3 4 5 6 7 8 9 10 Insurance 0% 2% 4% 6% 8% 10% 12% 14% 16% 1 2 3 4 5 6 7 8 9 10 Publishing 0% 1% 2% 3% 4% 5% 6% 1 2 3 4 5 6 7 8 9 10 Travel 0% 2% 4% 6% 8% 10% 12% 14% 1 2 3 4 5 6 7 8 9 10 Retail Experiment notes: 390+ sites; GSC impression and click data CTR Position (sides note: I didn’t expect desktop to out perform mobile) Thank you @kellycRasmussen for your HiveQL support
  21. 21. #SMX #13A @AlexisKSanders • Mobile has • less processing power (i.e., less able to multitask) • less RAM, storage • stricter hardware requirements • However, it also • typically cost less • more portable …. and there’s more…
  22. 22. #SMX #13A @AlexisKSanders Using mobile version for indexing and ranking Mobile-first indexing
  23. 23. #SMX #13A @AlexisKSanders “Mobile-first indexing means Google will predominantly use the mobile version of the content for indexing and ranking.” -Google What is mobile-first indexing? https://developers.google.com/search/mobile-sites/mobile-first-indexing; https://support.google.com/webmasters/answer/1061943 Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com /bot.html) rel="alternate" rel="canonical" Mobile Result https://m.example.com/ Meta description Desktop Result https://www.example.com/ Meta description if (separate URLs exist) Mobile-first index (contains both mobile and desktop experiences; if (mobile version exists) {mobile = index experience}) User gets served device- relevant results
  24. 24. #SMX #13A @AlexisKSanders Share these #SMXInsights on your social channels! #SMXInsights The mobile-first index is about prioritizing mobile. It’s not a separate index/database storing.
  25. 25. #SMX #13A @AlexisKSanders Mobile-first indexing: For responsive, mobile-friendly sites
  26. 26. #SMX #13A @AlexisKSanders Nada!* You’re good (in terms of mobile-first indexing)! *Except you’ll need to watch latency! (we’ll get to this later)
  27. 27. #SMX #13A @AlexisKSanders Mobile-first indexing: For separate sites (e.g., m dot), dynamic, or adaptive sites
  28. 28. #SMX #13A @AlexisKSanders  Ensure parity between mobile and desktop:  Content (text, images, videos)  Structured data  Internal links  GSC settings, including:  URL Parameters  Data Highlighter To do list:  Ensure appropriate <link> tag:  All rel="canonical" to desktop  Hreflang to equivalent device  If AMP URLs:  All rel="amp-html" to amp  Ensure pages are mobile- friendly  Reasonable speed (aim for less than <3)
  29. 29. #SMX #13A @AlexisKSanders <link> tagging map (for sites with multiple URLs) Based off of @RyanJones’ tagging map rel="alternate" rel="canonical" rel="alternate" rel="canonical" rel="alternate" hreflang="en-ca" rel="alternate" hreflang="en-us" rel="alternate" hreflang="en-ca" rel="alternate" hreflang="en-us"
  30. 30. #SMX #13A @AlexisKSanders Backlinks do not need to be changed, Google will use canonical cluster https://twitter.com/JohnMu/status/927134567840059392 End-state desktop URL rel="canonical" Duplicate page Duplicate page Mobile Duplicate page AMP Desktop Mobile
  31. 31. #SMX #13A @AlexisKSanders <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>Desktop URLs here only = good</loc> </url> </urlset> Mobile URLs do not need to be in the XML sitemap
  32. 32. #SMX #13A @AlexisKSanders Mobile-first parity checker https://technicalseo.c om/seo-tools/mobile- first-index/ @maxxeight Max Prin Merkle
  33. 33. #SMX #13A @AlexisKSanders Mobile-first parity checker https://technicalseo.com/seo-tools/mobile-first-index/
  34. 34. #SMX #13A @AlexisKSanders AMP
  35. 35. #SMX #13A @AlexisKSanders “The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.” – AMP Project What is AMP? https://www.ampproject.org/learn/overview/ million domains Top tech providers & platforms 100+25
  36. 36. #SMX #13A @AlexisKSanders What is AMP? Interactive AMP Stories https://www.ampproject.org/latest/blog/amps-new-horizons/
  37. 37. #SMX #13A @AlexisKSanders What is AMP? Interactive AMP Stories https://www.ampproject.org/latest/blog/amps-new-horizons/
  38. 38. #SMX #13A @AlexisKSanders What is AMP? Dynamic Emails (TBD) https://github.com/ampproject/amphtml/issues/13457 via features like amp-bind and amp-list
  39. 39. #SMX #13A @AlexisKSanders Share these #SMXInsights on your social channels! #SMXInsights It’s not about AMP; it’s about speed.
  40. 40. #SMX #13A @AlexisKSanders AMP in the Wild
  41. 41. #SMX #13A @AlexisKSanders Mobile, 684,070, 100% Desktop, 12, 0% AMP rankings are virtually all mobile HUGETHANKSTO Mobile, 2,798,953, 100% Desktop, 9,063, 0% Mobile, 5,636,317, 100% Desktop, 6,302, 0% Mobile, 16,625,428, 100% Desktop, 2,798, 0% Mobile, 1,736,975, 100% Desktop, 21, 0% Mobile, 1,467,617, 100% Desktop, 743, 0% BrightEdge Google US (Desktop) v Google US (S) for 12 Months for AMP Experience
  42. 42. #SMX #13A @AlexisKSanders • Comparing  • Main URL: https://www.alibaba.com/showroom/ladies-clothing.html • AMP URL: https://m.alibaba.com/amp/showroom/ladies-clothing.html • AMP Cache: https://m-alibaba- com.cdn.ampproject.org/c/s/m.alibaba.com/amp/showroom/ladies- clothing.html • Google AMP Cache: Script to search Google and open AMP experience, only recording https://goo.gl/ZHCYyb AMP Speed Thank Martin Schierle for WBT.org script  https://medium.com/@martin.schierle
  43. 43. #SMX #13A @AlexisKSanders Google AMP cache enabled Pinterest X to be 43% faster https://goo.gl/Ym5iGU Main URL AMP URL AMP Cache URL Google AMP Cache URL
  44. 44. #SMX #13A @AlexisKSanders The critical rendering path also flows better https://goo.gl/Ym5iGU Main URL AMP URL AMP Cache URL GoogleAMP Cache URL
  45. 45. #SMX #13A @AlexisKSanders The AMP experiences had significantly less requests (especially images) https://goo.gl/Ym5iGU Main URL AMP URL AMP Cache URL GoogleAMP Cache URL
  46. 46. #SMX #13A @AlexisKSanders Why would a site AMP it up?
  47. 47. #SMX #13A @AlexisKSanders Why AMP? 1. Publishing/ blog sites 4.Testing CVR of speed wins 2. Limited servers in certain area 5. Looking for temporary wins 3. Looking for new framework Qualify for Google carousels, “visual stories” Looking to move site/experience to AMP for speed benefits Get the benefits of Google cache’s TTFB Testing how much speed will impact conversions Maintaining two sites, there may be temporary wins
  48. 48. #SMX #13A @AlexisKSanders Why is AMP so lighting fast? https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597 https://www.ampproject.org/learn/about-how/
  49. 49. #SMX #13A @AlexisKSanders AMP is designed to gracefully deal with JavaScript failing AMP Regular websites
  50. 50. #SMX #13A @AlexisKSanders resource 1 resource 2 resource 3 resource 1 resource 2 resource 3 AMP prevents render-blocking JavaScript by Asynchronous JS Total LoadTime Total LoadTime Initiated Synchronous Asynchronous
  51. 51. #SMX #13A @AlexisKSanders • AMP doesn’t let extension mechanisms (e.g., lightboxes, Instagram embeds, tweets, IFrames, etc.) block page rendering • All custom scripts must tell AMP system what it will become • E.g., amp-instagram script tells the system that there will be an amp- instagram tag. AMP creates the Instagram embed box before it even knows what it will include Extensions and embeds don’t block rendering page layout <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram- 0.1.js"></script>
  52. 52. #SMX #13A @AlexisKSanders Proposal: • Run on a web worker that receives user gesture events • Run inside a custom-built sandbox & virtual DOM environment in the worker • 3P script will have max file size Third-Party JavaScript not allowed yet (but it’s in queue) https://github.com/ampproject/amphtml/issues/13471
  53. 53. #SMX #13A @AlexisKSanders • Runtime cost of analytics instrumentation is independent of number of used providers • No additional, unnecessary JavaScript • No superfluous use of CPU One analytics tag’s sunk cost is spread out for multiple analytics tags <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics- 0.1.js"></script> AMP Analytics Vendors: https://www.ampproject.org/docs/ads_analytics/analytics-vendors
  54. 54. #SMX #13A @AlexisKSanders Most websites: All CSS is inline within HTML document AMP: GET HTML document HTML GET main.css main. CSS GET HTML doc HTML + CSS No additional requests to get .css files, no extra round trip time. GET sec.css sec. CSS Extraroundtriptime
  55. 55. #SMX #13A @AlexisKSanders Byte Math: • 1 character = 1 byte • 1,000 bytes = 1 kB • 50 kB = 50,000 bytes • 50,000 bytes = 50,000 characters • AMP allows 50,000 characters of inline CSS. CSS limited to maximum size of 50 kilobytes
  56. 56. #SMX #13A @AlexisKSanders Lazy loading, prefetches lazy loaded resources load initial view load upon user scrolling action
  57. 57. #SMX #13A @AlexisKSanders GPU (graphics processing unit): • Hardware designed to take huge batches of data and perform repetitive operations quickly • Take heavy calculations (needed for graphic rendering) burden off CPU (which tends to skip all over the place) • Gives us buttery smooth transition, opacity, and transformation animations Only run GPU-accelerated CSS animations GIF is modified version of https://jsfiddle.net/GdgYm/188/
  58. 58. #SMX #13A @AlexisKSanders Fonts require zero HTTP requests (Asynchronous JavaScript + inline CSS) Traditional setup requires CSS files to be loaded and subsequent font request: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
  59. 59. #SMX #13A @AlexisKSanders AMP pre-positions resources based on preset sizes to layout pages (i.e., loads the page layout without needing to recalculate) https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-foundations/#4
  60. 60. #SMX #13A @AlexisKSanders • Prioritizes downloading resources above-the-fold (i.e., viewport first) • Optimizes downloads so that the most important resources are downloaded first Intelligent resource prioritization Prioritized Secondary
  61. 61. #SMX #13A @AlexisKSanders • Ensure HTTP requests are as fast as possible (when clicked) • Doesn’t prerender things that might be expensive in terms of CPU (third-party IFrames) • Prefetch lazy-loaded resources AMP use extensive resource hinting
  62. 62. #SMX #13A @AlexisKSanders A proxy-based CDN that enables AMP to: 1. Validate AMP documents 2. Cache resources (including: HTML, images, fonts, etc.) under 12MB 3. Add performance optimizations 4. Rewrite URLs to normalize parsing Google AMP Cache https://developers.google.com/amp/cache/overview
  63. 63. #SMX #13A @AlexisKSanders  Preloads AMP pages  Serves AMP over a secure channel  Leverages same-origin loading of resources via HTTP 2.0  Adds prefetch hint tags for browsers  Image optimizations – Conversion of images to WebP – Removal of image metadata – Generations of alternative sized versions of image – Adding image SRCSET attributes – If “Save-Data” header is set to “on” lowers image quality Google AMP Cache - Optimizations https://developers.google.com/amp/cache/overview
  64. 64. #SMX #13A @AlexisKSanders • HTML comments and whitespace inside tags are removed • Tag and attribute names are lowercased • Text is escaped • Attribute values are consistently quoted and escaped • All tags are closed (except for HTML5 void elements) • Elements that can only be in the body get moved into the body • Encoded text characters are simplified, using UTF-8 equivalent characters • Outbound links are made absolute Google AMP Cache - Normalization https://developers.google.com/amp/cache/overview
  65. 65. #SMX #13A @AlexisKSanders Why people are hesitant about AMP?
  66. 66. #SMX #13A @AlexisKSanders Example: https://www.google.com/amp/s/amp.theguardian.com/artanddesign/2018/ apr/10/afrofuturism-exhibition-in-their-own-form-museum-contemporary- photography-chicago Hosting on Google AMP Cache URLs Concerns: • All data flowing through Google’s CDN • Note: Google has mentioned they are not collecting any data from AMP pages • Website hosted on Google URL • Note: Google has also mentioned they are working on removing https://www.google.com/amp
  67. 67. #SMX #13A @AlexisKSanders Both experiences require executive oversight, design, development, ongoing maintenance, monitoring/analytics efforts. “If you’re going to teach a bear to dance, be prepared to dance until it’s ready to stop.” – Bob Manion Maintaining two experiences
  68. 68. #SMX #13A @AlexisKSanders Composite data from four companies with AMP, from AMP Project and Forrester. I’d categorize this as optimistic, blue-sky numbers. Doing AMP right (i.e., mimicking experiences) isn’t cheap https://www.ampproject.org/static/extra/The_Total_Economic_Impact_Of_AMP.pdf 6 month payback $211K cost $1MM estimated return over 3 years
  69. 69. #SMX #13A @AlexisKSanders AMP Flowchart Is AMP your end-game? Why live life in limbo - go full AMP. Use it for speed data Create business cases to influence site architecture and speed optimizations Does AMP meet needs in its current state? Check AMP roadmap Going to implement? Focus on optimizing current site’s speed Yes Not yet Yes Nope
  70. 70. #SMX #13A @AlexisKSanders • Prune code (and HTML markup), cut anything not being used • Compress text-based assets (gzip, brotli, zopfli) • Consolidate multiple HTTP redirect chains • Use system fonts (where possible) • Cache static resources • Leverage resource hinting (aka pre-* party) • Activate HTTP/2 • Minify CSS, JavaScript, and HTML Could focus efforts optimizing your main site’s speed • Ensure JavaScript and CSS aren’t interfering with critical path (inline, defer in HTML, or add “async” tag) • Consider conditionally serving code • Use a CDN (if geographically diverse user-based) • Optimize images (compress, serve right image format/size on particular device, lazy load, cache appropriately, “save-data” header, sprites, etc.) • Consider implementing PWA
  71. 71. #SMX #13A @AlexisKSanders The Web Standards Working on web standards that will allow instant loading for non-AMP web content https://amphtml.wordpress.com/2018/03/08/standardizing-lessons-learned-from-amp/
  72. 72. #SMX #13A @AlexisKSanders Status https://github.com/ampproject/amphtml/blob/master/contributing/web-standards-related-to-amp.md Standard/feature Relation Status Web Packaging Privacy-preserving preloading from cache under publisher URL Active drafting, IETF consensus seeking Iframe promotion AMP Carousel like UI with navigation to publisher Under discussion inWICG PerformanceTimeline Real world metric collection. This is the framework. New metrics may be needed. Shipping in first browsers Perf metric: (Initial) Layout stability Metric for how often layout changes without user action based on elements resizing (such as when an unsized image loads or an iframe resizes) Discussing feasibility with implementers Feature Policy Allows web pages to turn off legacy features or opt into new behavior. This is the framework. New policies may be needed Shipping in first browsers
  73. 73. #SMX #13A @AlexisKSanders • Allow for preloading from cache retaining publisher URL, so it can be shared offline, either with or without a proof that they came from the original website • Technology that will enable Google to remove the https://www.google.com/amp in URLs • Navigations from Google search can take advantage of privacy-preserving preloading and the performance of Google’s AMP cache, while URLs remain and the primary security context of the web origin remains in-tact Web standards - Web Packaging 🌐📦 https://github.com/WICG/webpackage https://amphtml.wordpress.com/2018/01/09/improving-urls-for-amp-pages/amp/
  74. 74. #SMX #13A @AlexisKSanders Web standards - IFrame promotion 1. Load a page with target/next pages loading in hidden IFrames 2. Upon click, display already-loaded Iframe/new page full-screen 3. Update the URL to reflect the state change 1 2<iframe> </iframe> https://discourse.wicg.io/t/proposal-for-promotable-iframe/2375
  75. 75. #SMX #13A @AlexisKSanders • Methods to store and retrieve high-resolution real world performance metric data • Enable web developers to access, instrument, and retrieve various performance metrics from the full lifecycle of a web application Web standards - Performance Timeline https://w3c.github.io/performance-timeline/
  76. 76. #SMX #13A @AlexisKSanders • Allows sites to selectively enable and disable use of various browser features and APIs (e.g., geolocation, camera, microphone, vibration) • The developer may want to selectively disable access to certain browser features and APIs to "lock down" their application (added security) • The developer may want to selectively enable access to certain browser features and APIs (may be disabled by default) Web standards: Feature-Policy Header https://wicg.github.io/feature-policy/ Feature-Policy: vibrate 'none'; geolocation 'none'
  77. 77. #SMX #13A @AlexisKSanders Web standards – more… https://github.com/ampproject/amphtml/blob/master/contributing/web-standards-related-to-amp.md Standard/feature Relation Status Perf metric: Expected Queueing Time Metric for how long it takes for main thread to react to user action Feasibility exploration. Iframe performance isolation Possible under current standards, but requires browsers to implement. Reduces need for embeds to behave well Chrome has 2 efforts in progress (Site isolation, cooperative multitasking). Transfer size policy: Limit amount of main thread JS Incentivize off-main-thread computation. Just an idea. PaintTiming 1 Initial paint related metrics (performance assessment Shipping in first browsers Feature Policy: Prevent navigation without user action Similar to iframe sandbox but for top level window. Just an idea. CSP: Stricter CSP in pre-render mode Allow pages to restrict and make it observable what they cannot do when being pre-rendered. Just an idea. Feature Policy: No unsized media Prevent media (images) to resize based on intrinsic size Under discussion Feature Policy: No uncomposited animations Allow pages to opt into only running animations that can be composited on the GPU. Just an idea. Responsive image preload Allows pre-loading of responsive images. Under discussion. In Chrome behind flag.
  78. 78. #SMX #13A @AlexisKSanders Also, check out 
  79. 79. #SMX #13A @AlexisKSanders AMP by Example (ampbyexample.com)
  80. 80. #SMX #13A @AlexisKSanders AMP Start (ampstart.com)
  81. 81. #SMX #13A @AlexisKSanders Mobile UX
  82. 82. #SMX #13A @AlexisKSanders Do webpages function?
  83. 83. #SMX #13A @AlexisKSanders Simple to use? Can everything be found easily?
  84. 84. #SMX #13A @AlexisKSanders Is content on the page visible? Are pages aesthetically pleasing?
  85. 85. #SMX #13A @AlexisKSanders Are pages trust-inspiring? Secure?
  86. 86. #SMX #13A @AlexisKSanders How much friction between user converting can you remove?
  87. 87. #SMX #13A @AlexisKSanders Are pages 20% faster than competitive set?
  88. 88. #SMX #13A @AlexisKSanders Speed Frictionless conversion Trust Aesthetics Accessible content Easy to navigate Functionality SEO/UX Goals Are you 20% faster than competitive set? Pages must work for users to visit site and return Information architecture should enable user to find information easily Text should be visible, click elements should be spaced appropriately, etc. How appealing is the look, feel, vibe of the site to users Without trust, sites are utilities. Are appropriate sections HTTPS? Does the aesthetic inspire trust? How easy is it to convert? Can any bottlenecks be alleviated?
  89. 89. #SMX #13A @AlexisKSanders LEARN MORE: UPCOMING @SMX EVENTS THANK YOU! SEE YOU AT THE NEXT #SMX @AlexisKSanders /in/alexissanders
  90. 90. #SMX #13A @AlexisKSanders https://www.flaticon.com/authors/: • Alfredo Hernandez • AnhGreen • Dave Gandy • Eucalyp • Freepik • Google • Kiranshastry • Nikita Golubev • roundicons • SimpleIcon • Smashicons • Vectors Market Icon Sources

Editor's Notes

  • Firebase – 9/2011
    https://www.seroundtable.com/google-easy-mobile-seo-14748.html - 2/20/12
    https://www.seroundtable.com/google-mobile-seo-official-15264.html - 6/7/12
    Google introduces app indexing - 10/13/13
    Google acquires Firebase - 10/2014
    Mobile-friendliness label - 11/18/14
    Mobilegeddon/mobile-friendliness update – 4/21/15
    PWAs introduced – 6/15/15
    AMP announcement – 10/7/15
    Mobile-friendly testing tool - 5/17/16
    Mobile interstitial penalty – 8/23/16
    Google removes mobile-friendly label - 8/31/16
    What is AMP? - 9/12/2016
    Mobile-first index (announcement 1) – 11/4/16
    PWA – 11/9/16
    Mobile-friendliness Test API – 1/31/17
    Mobile speed ranking factor – 1/17/18
    Mobile-first official announcement – 3/26/18
  • The graph above shows total global monthly data and voice traffic from Q4 2012 to Q4 2017, along with the year-on-year percentage change for mobile data traffic
  • AMP Analytics allows you to collect the following data:
    Page data: Domain, path, page title
    User data: client ID, timezone
    Browsing data: referrer, unique page view ID
    Browser data: screen height, screen width, user agent
    Interaction data: page height and page width
    Event data
  • ROI of 377%
  • Challenge: it's difficult to distribute and verify the authenticity of applications and content without a connection to the network.

    Goal: This attempt is instead motivated by avoiding a connection to the origin server at all.

  • Responsive (SRCSET) images preload

×