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.

From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web

Emily Grossman's slides from SearchLove Boston 2017.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web

  1. 1. #SearchLove @goutaste From Website to Web-App: Index, Optimize & Audit
  2. 2. #SearchLove @goutaste So Many Format Options to Display Your Content on “The Internet”
  3. 3. #SearchLove @goutaste How Do You Choose?
  4. 4. #SearchLove @goutaste Websites Have Great Reach 11.4 4.0 Monthly Unique Visitors Top 1k web properties vs. top 1k apps Data: comScore Mobile Metrix Age 18+ June 2016
  5. 5. #SearchLove @goutaste Native Apps Have Great Engagement 9.3 188.6 Average Minutes Per User Top 1k web properties vs. top 1k apps Data: comScore Mobile Metrix Age 18+ June 2016
  6. 6. #SearchLove @goutaste Can We Have The Best of Both? The REACH of a website The ENGAGEMENT of an app Image: http://bit.ly/platypus-keytar
  7. 7. #SearchLove @goutaste What is a Web App? Traditional Website Web App Lifecycle Images: http://bit.ly/2rouUqH
  8. 8. #SearchLove @goutaste What is a Web App? bit.ly/app-shell-img
  9. 9. #SearchLove @goutaste What is a Progressive Web App? Responsive Secure Fast Downloadable Works Offline Push Notifications
  10. 10. #SearchLove @goutaste Why are they popular? Mobile sales increased by 18% YoY 43% increase in sessions/ user 100% increase in session duration 80% improvement in load time 30% higher Conversion Rate than native app in Tier 3 cities 20% of PWA bookings are from users who’d uninstalled native app Homepage loads completely in .8 seconds Customer acquisition cost is 10X less Shoppers spend 20% more time than on previous mobile site 40% lower bounce rate than on previous mobile site https://www.pwastats.com/
  11. 11. #SearchLove @goutaste The Web is Becoming Full of Web Apps Photo: https://visualhunt.com/f/photo/3943667382/a851db711b/
  12. 12. #SearchLove @goutaste Current & Imminent PWAs Source: Google I/O 2017
  13. 13. #SearchLove @goutaste But Lots of People Don’t Consider SEO for Web Apps
  14. 14. #SearchLove @goutaste Web Apps rely on JavaScript & JavaScript is hard for us Photo: http://bit.ly/javascript-cat
  15. 15. #SearchLove @goutaste Photo: http://bit.ly/2rEGvlW
  16. 16. #SearchLove @goutaste Even Though Things Are Changing, JavaScript is Also Still Hard for Search Engines* *Search Engines means more than just Google
  17. 17. #SearchLove @goutaste You’ll Still See Plenty of Great Web Apps That Look Like This in Google
  18. 18. #SearchLove @goutaste Or This… GIF: http://bit.ly/OOH-CAT
  19. 19. #SearchLove @goutaste We (SEOs) Can Help
  20. 20. #SearchLove @goutaste Indexing Optimizing Auditing Clean URLs Canonicals Rendering Mobile Friendly SERP CTR Speed Crawling & Indexing “App-iness” Speed Engagement
  21. 21. #SearchLove @goutaste INDEXING
  22. 22. #SearchLove @goutaste 1. Clean URLs Photo: https://visualhunt.com/f/photo/5542857895/8f186be4b0/
  23. 23. #SearchLove @goutaste Web Apps Don’t Have to Change URLs to Change Content on the Page Even on the finance tab, the URL still stays the same
  24. 24. #SearchLove @goutaste Outweb.IO : An Indexing Sob Story
  25. 25. #SearchLove @goutaste Old Linking Habits of JS-Heavy Applications By default: https://example.com/#/foo For deprecated AJAX crawling scheme: https://example.com/#!foo (And ?_escaped_fragment=foo)
  26. 26. #SearchLove @goutaste Death of the Hash & HashBang By default: https://example.com/#/foo For deprecated AJAX crawling scheme: https://example.com/#!foo (And ?_escaped_fragment=foo) https://example.com/foo https://example.com/foo
  27. 27. #SearchLove @goutaste Long Live the History API Leverage HTML5 pushState() Change URLs in the address bar without reloading the whole page Great for Search Engines & users (hello, sharing!) https://css-tricks.com/using-the-html5-history-api/
  28. 28. #SearchLove @goutaste Canonicals. Canonicals Everywhere. https://yoast.com/rel-canonical/
  29. 29. #SearchLove @goutaste 3. Rendering
  30. 30. #SearchLove @goutaste The DOM
  31. 31. #SearchLove @goutaste Welcome to the JavaScript Web View Source Inspect Element
  32. 32. #SearchLove @goutaste Welcome to the JavaScript Web View Source Inspect Element Original HTML The DOM as it was interpreted by the browser.
  33. 33. #SearchLove @goutaste Schedule Crawl Index Rank Known URLs Internet Ye Olde Days* *and many search engines today
  34. 34. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet How Google Can Work Today
  35. 35. #SearchLove @goutaste Say a prayer to the god of your choice & hope Google figures out your client-side JavaScript?
  36. 36. #SearchLove @goutaste But Uh… Good Luck With That Googlebot may only be willing to wait 4-5 sec for your JS… https://maxxeight.com/tests/js-timer/@maxxeight
  37. 37. #SearchLove @goutasteInline vs. External vs. Bundled makes a difference: https://goralewicz.com/blog/javascript-seo-experiment/ @bart_goralewicz Many JS Frameworks Still Struggle To Make It In Time Without Additional Optimizations
  38. 38. #SearchLove @goutaste Client Side vs. Server Side Rendering
  39. 39. #SearchLove @goutaste Client Side Rendering Bonus Slide! Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
  40. 40. #SearchLove @goutaste Server Side Rendering Bonus Slide! Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
  41. 41. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet If We Render on Our Server…
  42. 42. #SearchLove @goutaste Client Side vs. Server Side Rendering https://www.youtube.com/watch?v=0wvZ7gakqV4 If you search for any competitive keyword terms, it’s always going to be server rendered sites. And the reason is because although Google does index client-side rendered HTML, it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content. “ “ -- Jeff Whelpley
  43. 43. #SearchLove @goutaste But Without Any Client-Side, We’re Reloading the Whole Page on Each Nav For Our Users
  44. 44. #SearchLove @goutaste WTF Is “Isomorphic JavaScript”?
  45. 45. #SearchLove @goutaste WTF Is “Isomorphic JavaScript”? JavaScript code that can run on both the client and the server. Synonyms: Universal JavaScript, Shared JavaScript, Portable Javascript
  46. 46. #SearchLove @goutaste Why Isomorphic? Perceived Performance
  47. 47. #SearchLove @goutaste Why Isomorphic? Perceived Performance SEO
  48. 48. #SearchLove @goutaste Why Isomorphic? Perceived Performance SEO Maintainability
  49. 49. #SearchLove @goutaste Isomorphism is a Spectrum @spikebrehm http://bit.ly/isomorphic-deck
  50. 50. #SearchLove @goutaste Ye Olde Days (multi-page applications) Circa 2011 (single-page applications) Today (Hybrid apps) JavaScript Web – A History https://www.slideshare.net/spikebrehm/2014-0313fluent/20- Ye_olde_daysfatserver_thinclient Bonus Slide! @spikebrehm
  51. 51. #SearchLove @goutaste SSR With Vue.js @addyosmani https://youtu.be/aCMbSyngXB4
  52. 52. #SearchLove @goutaste Configuring SSR With React @addyosmani https://youtu.be/aCMbSyngXB4
  53. 53. #SearchLove @goutaste Use Headless Browsers to render initial state for users & search engines http://bit.ly/headless-chrome Your Other Options?
  54. 54. #SearchLove @goutaste Your Other Options? (or similar)
  55. 55. #SearchLove @goutaste Your Other Options? (or similar)
  56. 56. #SearchLove @goutaste This solution leverages prerender.io! http://bit.ly/moz-angularjs
  57. 57. #SearchLove @goutaste OPTIMIZATION
  58. 58. #SearchLove @goutaste 1. Optimize for “Mobile Friendliness”
  59. 59. #SearchLove @goutaste Improve Mobile Usability Remove Flash Configure ViewPorts Tt! Use Legible Font Size Space Out Touch Elements Search Console Mobile Usability Report: support.google.com/webmasters/answer/6101188?hl=en
  60. 60. #SearchLove @goutaste Interstitials VS Banners Mobile Friendly!NOT Mobile Friendly!
  61. 61. #SearchLove @goutaste 2. Optimize SERP CTR with Structured Data https://developers.google.com/search/docs/data-types/books  News/ Articles  Books  Courses  Datasets  Events  Fact Check  Local Business  Top Places (beta)  Music  Podcasts  Products  Recipes  Reviews  TV  Movies  Videos  Live (beta)  Software (beta)
  62. 62. #SearchLove @goutaste Schema moz.com/blog/json-ld-for-beginners
  63. 63. #SearchLove @goutaste 3. Optimize for Mobile Speed
  64. 64. #SearchLove @goutasteSource: @lukew
  65. 65. #SearchLove @goutaste Do The Basics Put Everything on a Diet: – Smaller files – Compress everything – Less unnecessary files – Less overall requests – Don’t send code the page doesn’t need GIF: https://visualhunt.com/photo/44460/
  66. 66. #SearchLove @goutaste New in Chrome Dev Tools (“Coverage” Tab) Keep Track of Potential JS & CSS Savings
  67. 67. #SearchLove @goutaste “I’m a Wordpress Theme with 23 JS libraries & 20 stylesheets!”
  68. 68. #SearchLove @goutaste Improving Page Speed with Images Sprites File Size Responsive Images.org Image Server Quality: 85% Width: 300px Quality: 70% Width: 150px Quality: 326 PPI Width: 200px
  69. 69. #SearchLove @goutaste 1. First Paint 2. First Contentful Paint “Is it happening?” @addyosmani http://bit.ly/performance-kpis
  70. 70. #SearchLove @goutaste Make it Happen Faster: Speed Up Time to FP & FCP  Inline critical CSS & JS  Remove all render- blocking scripts from the <head> https://youtu.be/6Ljq-Jn-EgU
  71. 71. #SearchLove @goutaste “Is it useful?” “Is it useable?” 3. First Meaningful Paint 4. Time to Interactive @addyosmani http://bit.ly/performance-kpis
  72. 72. #SearchLove @goutaste One of the Issues With Server-Side Rendering is The Trade- Off With Time to Interactive Simulated Slow Networkhttps://youtu.be/6Ljq-Jn-EgU
  73. 73. #SearchLove @goutaste One of the Issues With Server-Side Rendering is The Trade- Off With Time to Interactive Simulated Slow Networkhttps://youtu.be/6Ljq-Jn-EgU
  74. 74. #SearchLove @goutaste Make it Useable Faster: Minimize Time Between FMP & TTI  Ship less JS
  75. 75. #SearchLove @goutaste Make it Useable Faster: Minimize Time Between FMP & TTI  Ship less JS  Break up existing JS into smaller chunks (“Code Splitting”) See Also: http://bit.ly/code-splitting-webpack http://bit.ly/performance-kpis
  76. 76. #SearchLove @goutaste Make it Useable Faster: Minimize Time Between FMP & TTI  Ship less JS  Break up existing JS into smaller chunks (“Code Splitting”)  Follow the PRPL (‘purple’) Pattern* http://bit.ly/push-render-precache-lazyload *”push” references H/2 push and requires http2
  77. 77. #SearchLove @goutasteRead: bit.ly/http2-intro Image: kinsta.com/learn/what-is-http2/#goal_of_creating_http2 HTTP/2 enables full request & response multiplexing Bonus Slide!
  78. 78. #SearchLove @goutaste • Pre-load can specify the download “as” = • "script", • "style", • "image", • "media", • "document” bit.ly/what-is-rel-preload Rel=“Preload” HTTP/2 + PreLoad = Moves the ‘start download’ time of a critical asset closer to initial request
  79. 79. #SearchLove @goutaste Bonus Slide!
  80. 80. #SearchLove @goutaste
  81. 81. #SearchLove @goutaste 4. Optimize for Mobile Presentation & Engagement
  82. 82. #SearchLove @goutaste HTTPS Will Be Table Stakes http://bit.ly/chrome-https
  83. 83. #SearchLove @goutaste HTTPS http://bit.ly/aleyda-https
  84. 84. #SearchLove @goutaste Service Workers Service Workers are so powerful, browsers require HTTPS for you to register them
  85. 85. #SearchLove @goutaste Service Workers Add Performance Boosts on Repeat Visits
  86. 86. #SearchLove @goutaste Cache App ‘Shell’ Bonus Slide! https://developers.google.com/web/fundamentals/architecture/app-shell
  87. 87. #SearchLove @goutaste Service Workers Can Even Give Websites Offline Functionality
  88. 88. #SearchLove @goutaste
  89. 89. #SearchLove @goutaste When Combined With An App Manifest
  90. 90. #SearchLove @goutaste Web App Manifest http://bit.ly/webapp-manifest Chrome Dev Tools JSON file you link to in your <head>
  91. 91. #SearchLove @goutaste
  92. 92. #SearchLove @goutaste Service Workers + App Manifest Enables “Installing” Websites
  93. 93. #SearchLove @goutastehttps://caniuse.com/#search=service%20workers
  94. 94. #SearchLove @goutaste Lancôme USA 65% of their mobile web users are on iOS 53% increase in session length on iOS after launching PWA https://lancome-usa.com
  95. 95. #SearchLove @goutaste Create PWAs ‘By Default’ via React, Preact, or Vue.js Preact CLI @addyosmani https://youtu.be/aCMbSyngXB4
  96. 96. #SearchLove @goutaste AUDITING
  97. 97. #SearchLove @goutaste 1. Audit for Crawling & Indexing Issues
  98. 98. #SearchLove @goutaste ‘Lab Test’ Troubleshooting • Fetch & Render • Fetch & Render as any bot w/ timeout • Compare Source & ‘outerHTML’ • Headless Chrome
  99. 99. #SearchLove @goutaste https://www.google.com/webmasters/tools/go oglebot-fetch Fetch & Render As Googlebot
  100. 100. #SearchLove @goutaste Fetch & Render As Any Bot @maxxeight https://technicalseo.com/seo-tools/fetch-render/
  101. 101. #SearchLove @goutaste Compare Source & ‘outerHTML’ @justinrbriggs https://www.briggsby.com/auditing-javascript-for-seo/
  102. 102. #SearchLove @goutaste 2. Audit for App-iness
  103. 103. #SearchLove @goutaste PWA Checklist http://bit.ly/pwa-checklist
  104. 104. #SearchLove @goutaste Lighthouse
  105. 105. #SearchLove @goutaste 3. Audit for Speed
  106. 106. #SearchLove @goutastetestmysite.thinkwithgoogle.com These are the basics we all still get wrong PageSpeed Scores Aren’t All That Helpful But the Advice Can Still Tell You a Lot
  107. 107. #SearchLove @goutaste WebPageTest Has More Useful Feedback
  108. 108. #SearchLove @goutaste Performance Tab in Chrome Dev Tools (Formerly Called ‘Timeline’)
  109. 109. #SearchLove @goutaste 1. First Paint 2. First Contentful Paint “Is it happening?” http://bit.ly/performance-kpis@addyosmani
  110. 110. #SearchLove @goutaste “Is it useful?” “Is it useable?” 3. First Meaningful Paint 4. Time to Interactive http://bit.ly/performance-kpis@addyosmani
  111. 111. #SearchLove @goutaste Measuring The Metric First Paint First Contentful Paint First Meaningful Paint Time to Interactive The Tool Chrome DevTools 60+ Performance Observer Tab Chrome DevTools 60+ Performance Observer Tab Track loading of ‘Hero’ Elements (scripts) github.com/GoogleChrome/tti-polyfill https://youtu.be/6Ljq-Jn-EgU
  112. 112. #SearchLove @goutaste Reality: Load metrics aren’t a single number https://youtu.be/6Ljq-Jn-EgU
  113. 113. #SearchLove @goutaste Real User Metrics (RUM) Paint a Fuller Picture https://youtu.be/6Ljq-Jn-EgU
  114. 114. #SearchLove @goutaste Indexing Optimizing Auditing
  115. 115. #SearchLove @goutaste INDEXING CHECKLIST  Make content crawlable:  Server-side or hybrid rendering  If you can’t:  Headless Chrome pre-rendering  Prerender.io or similar  Make sure your client-side JS renders in 4-5 seconds or less & test rigorously  Provide clean URLs  Leverage the History API  No hashes or hashbangs  Reconsider/ migrate ‘escaped fragments’  Clarify everything with Canonicals
  116. 116. #SearchLove @goutaste OPTIMIZATION CHECKLIST  Optimize for Mobile Friendly  Fonts/ tap targets  No intrusive interstitials  Optimize for CTR with Schema  Optimize for Speed KPIs (FP, FCP, FMP, TTI):  Minimize & compress code & images  Inline critical CSS & JS  Remove all render-blocking scripts from the <head>  Break up existing JS into smaller chunks (“Code Splitting”)  Follow the PRPL (‘purple’) Pattern  Optimize for Engagement & UX  HTTPS  Service Worker & App Manifest (progressive web app features)  App shell caching  Offline Caching  Installable  Load as full screen  Push notifications  Polyfills for unsupported browsers
  117. 117. #SearchLove @goutaste AUDITING CHECKLIST  Audit for Crawling & Indexing  Fetch & Render (Googlebot)  Fetch & Render As Any Bot  Compare Source & Outer HTML  Headless Chrome  Audit for App-iness  Checklist: https://developers.google.com/web/progressive-web- apps/checklist  Lighthouse  Cross-browser testing  BrowserStack.com, Browserling.com or BrowserShots.org to ensure your PWA is cross browser compatible.  Audit for Speed  PageSpeed Tool  WebPage Test, Chrome Dev Tools  Actual User Data (Real User Metrics)
  118. 118. #SearchLove @goutaste
  119. 119. #SearchLove @goutaste Thank You! var me = { name: “Emily Grossman”, title: “Director of App Strategy”, work: “MobileMoxie”, twitter: “@goutaste” }; var cat = { name: “Daenerys Furborn of the House Grossman, First of Her Name, the Unfed, Queen of the Bengals, Catleesi of the Great Scratching post, Breaker of Treats and Mother of Cuddles” };
  120. 120. #SearchLove @goutaste Super-Smart, Helpful People @ipullrank @samccone@slightlylate Technical SEO PerformancePWAs @_developit Creator of Preact @addyosmani PWAs @theLarkInn Webpack @bart_goralewicz JS SEO @maxxeight Technical & JS SEO @jonoalderson Weird shit @justinrbriggs JS SEO @dsottimano Technical & JS SEO @suzzicks Mobile

    Be the first to comment

    Login to see the comments

  • TarandeepSingh26

    Jun. 23, 2017
  • bartekpucek

    Jun. 24, 2017
  • MaxPrin

    Jun. 27, 2017
  • NachoMascortSEOSpeci

    Jun. 28, 2017
  • josealbertogarciasicilia

    Jun. 18, 2018
  • AlejandroAlonsoNieto

    Jan. 14, 2019

Emily Grossman's slides from SearchLove Boston 2017.

Views

Total views

1,187

On Slideshare

0

From embeds

0

Number of embeds

36

Actions

Downloads

10

Shares

0

Comments

0

Likes

6

×