Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 120 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web (20)

Anzeige

Weitere von MobileMoxie (17)

Aktuellste (20)

Anzeige

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

Hinweis der Redaktion

  • From Website to Web-App: Index, Optimize & Audit SEO-Friendly Experiences for the New Mobile Web

    http://www.liveanimalslist.com/mammals/duckbill.php
  • http://udel.edu/~krisdem/WebPageFolder/Images/pets.jpg
  • Still based on the web technology you know and love

    http://www.relativelyinteresting.com/the-best-venn-diagram-ever/
  • Images: http://www.c-sharpcorner.com/uploadfile/b31ac2/single-page-application-with-angularjs-in-net/
    http://bit.ly/2rouUqH

  • https://www.cuttlesoft.com/wp-content/uploads/2016/08/app_shell.jpg

    https://visualhunt.com/f/photo/3270675019/eeb5bfaec7/
  • http://insanelab.com/wp-content/uploads/2017/01/progressive-web-apps-infographic-1120x1680.jpg
  • https://www.pwastats.com/
  • https://visualhunt.com/f/photo/3943667382/a851db711b/
  • https://peteroshaughnessy.com/images/posts/2015-11-09-robots-vr-iot-cant-believe-its-javascript/i-cant-believe-it-cat.jpg
  • https://c1.staticflickr.com/3/2282/2252579206_8154593c91.jpg
  • Google is one of the only Search Engines trying to deal with JS applications
  • https://giphy.com/gifs/xT0GqtpF1NWd9VbstO
  • Today I want to talk about 3 areas where we can help – INDEXING – making sure Google can crawl and properly index our web app content, OPTIMIZING – not just for rankings but for that app-like user experience, and AUDITING – being able to trouble shoot and measure areas for improvement.
  • Let’s start with crawling and indexing.
    Although this may change in the future, Google’s ability to crawl and index our web content relies heavily on the principal that every unique piece of content has a unique URL.
  • Although this may change in the future, Google’s ability to crawl and index our web content relies heavily on the principal that every unique piece of content has a unique URL.

    https://visualhunt.com/f/photo/5542857895/8f186be4b0/
  • To avoid this there are 2 things that need to be done.
    Configuring $locationProvider
    History API
    Setting our base for relative links
  • Moving from these hash URLs to clean URLs is a PAIN IN THE BUTT because 301 redirects do not work with hashes. So if you can, do not introduce them in the first place. Otherwise JS redirects.
  • https://css-tricks.com/using-the-html5-history-api/



    https://visualhunt.com/photo/104626/
    http://diveintohtml5.info/history.html

    The HTML5 history API is actually designed to ensure that URLs continue to be useful in script-heavy web applications.
    Going back to first principles, what does a URL do? It identifies a unique resource. You can link to it directly; you can bookmark it; search engines can index it; you can copy and paste it and email it to someone else, who can click it and end up seeing the same resource you saw originally. These are all excellent qualities. URLs matter.
    So we want unique resources to have unique URLs. But at the same time, browsers have always had a fundamental limitation: if you change the URL, even through script, it triggers a roundtrip to the remote web server and a full page refresh. This takes time and resources, and it seems especially wasteful when you are navigating to a page that is substantially similar to the current page. Everything on the new page gets downloaded, even the parts that are exactly the same as the current page. There is no way tell a browser to change the URL but only download half a page.
    The HTML5 history API lets you do this. Instead of triggering a full page refresh, you can use script to, in essence, download half a page
  • FYI errors in pushState() can also cause 2 urls for the same content and duplicate content issues.

  • Before Google can index our web content, we need to make sure Google can crawl it. And this is where Rendering comes in.


    https://visualhunt.com/f/photo/16055850189/460392d1e3/
    https://visualhunt.com/f/photo/474542238/8097a7369b/
  • Javascript is a language that can manipulate the DOM without touching the source HTML.
  • Image source: https://goralewicz.com/blog/javascript-seo-backfire-hulu-com-case-study/
  • A bit more complicated than this, but

    Images:
    https://goralewicz.com/blog/javascript-seo-backfire-hulu-com-case-study/
  • When people say “Google can handle JavaScript” this is what they mean.
  • Googlebot’s ability to render appears to timeout at about 4-5 seconds.


    https://goralewicz.com/blog/javascript-seo-experiment/
  • https://visualhunt.com/f/photo/2524272975/f60c927416/

    https://goralewicz.com/blog/javascript-seo-experiment/
  • Now on our web app, we also have a choice about rendering
  • https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
  • https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
  • We can kind of go back to “ye olde days!” as far as Google and other search engines are concerned
  • The downside to this is that we lose a lot of the benefits of implementing a JS-driven website in the first place!

    https://visualhunt.com/f/photo/5406890987/63d3118a3c/
  • Really we need both
    AKA:

    Universal JavaScript
    Portable JavaScript
    Shared JavaScript
  • Serve a static version on the first request, by piping the output of the server-side to the page (based on the req path). Then let the client pick it up from there.

    And really this makes sense when you think about a web app as something that both needs to have some static crawlable content and wants to be deeply engaging for users.


    AKA:

    Universal JavaScript
    Portable JavaScript
    Shared JavaScript
  • Performance
    First paint can be faster (after framework rendering)
    SEO
    Makes crawling easier for Search Engines
    Emphasis on “Search EngineS”
    Maintainability
  • Performance
    First paint can be faster (after framework rendering)
    SEO
    Makes crawling easier for Search Engines
    Emphasis on “Search EngineS”
    Maintainability
  • Performance
    First paint can be faster (after framework rendering)
    SEO
    Makes crawling easier for Search Engines
    Emphasis on “Search EngineS”
    Maintainability
  • @spikebrehm

    https://www.slideshare.net/spikebrehm/2014-0313fluent/20-Ye_olde_daysfatserver_thinclient
  • @spikebrehm

    https://www.slideshare.net/spikebrehm/2014-0313fluent/20-Ye_olde_daysfatserver_thinclient
    https://www.slideshare.net/laogianoel/isomorphic-web-application-42688073
  • You choose, or maybe your framework chooses, which pieces of code get shared
  • But the important thing to remember – especially if you are working with a Framework – is that even though some frameworks support serverside rendering, pretty much none of them do it by default – so this is something a developer will have to set up. It’s a decision that ideally you will make and defend as you are setting up your development stack.
  • https://developers.google.com/web/updates/2017/04/headless-chrome
  • SaaS wrapper for PhantomJS

    Prerender IO was built on headless library Phantom JS to render the page and take an “html snapshot” that can be be used for SEO
  • SaaS wrapper for PhantomJS

    Prerender IO was built on headless library Phantom JS to render the page and take an “html snapshot” that can be be used for SEO
  • https://moz.com/blog/optimizing-angularjs-single-page-applications-googlebot-crawlers
  • Halfway
  • @lukew
  • https://visualhunt.com/photo/44460/
  • Don’t expect the $30 theme you buy on themeforest to be on a diet
  • But one of the easiest ways to get a faster mobile website is to look at your image handling. Ask yourself…
  • Optimize for key pagespeed APIs

    https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2
  • Eliminate unnecessary fetching

    https://visualhunt.com/f/photo/4577182826/0784f3a472/
  • https://developers.google.com/web/fundamentals/performance/prpl-pattern/
  • https://developers.google.com/web/fundamentals/performance/prpl-pattern/
  • Push critical resources for initial route
    Render initial route
    Precache remaining routes
    Lazy load the rest on demand




    https://developers.google.com/web/fundamentals/performance/prpl-pattern/
  • Frameworks are starting to build in a certain amount of smart pre rendering for PWAs
  • https://visualhunt.com/f/photo/7335350820/b52191f824/
  • https://blog.chromium.org/2016/09/moving-towards-more-secure-web.html
  • http://www.aleydasolis.com/en/search-engine-optimization/http-https-migration-checklist-google-docs/
  • https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
  • https://caniuse.com/#search=service%20workers
  • https://css-tricks.com/production-progressive-web-apps-javascript-frameworks/
  • Testing is probably the most important part

    I’m not going to go into how to check and see which pages on a website are not getting indexed – let’s assume you all know how to do that or how to google it
  • – but what you might not know how to do is troubleshoot for WHY certain pages are not getting indexed – or more frequently, why they are getting indexed improperly


    https://twitter.com/_developit/status/862686014447509504
    https://www.google.com/webmasters/tools/googlebot-fetch
  • https://technicalseo.com/seo-tools/fetch-render/
  • https://visualhunt.com/f/photo/33569560844/1d0d6399b6/
  • Checklist: https://developers.google.com/web/progressive-web-apps/checklist
  • https://google-developer-training.gitbooks.io/progressive-web-apps-ilt-codelabs/content/docs/lab_auditing_with_lighthouse.html
  • https://visualhunt.com/f/photo/11384990335/dddc3fde85/
  • https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
  • This is just an example on TTI
  • http://www.bymichaellancaster.com/assets/images/cat-javascript.jpg

×