The New Renaissance of JavaScript

23 May 2019

  1. @bart_goralewicz
  2. @bart_goralewicz This is not a dynamic rendering deck. The session description was created before some MAJOR changes at Google. DISCLAIMER
  3. @bart_goralewicz
  4. @bart_goralewicz Developers love JavaScript for its flexibility and capabilities. BUT Search engines still find it difficult to process JavaScript successfully.
  5. @bart_goralewicz Developers love JavaScript for its flexibility and capabilities. Search engines still find it difficult to process JavaScript successfully. BUT
  6. @bart_goralewicz ~70%
  7. @bart_goralewicz WHY? Flexibility Decent UX Community
  8. @bart_goralewicz WHY? Flexibility Decent UX Community Easy to start Frameworks Platforms
  9. @bart_goralewicz short history of JavaScript & JavaScript SEO A VERY, VERY
  10. @bart_goralewicz Mocha 10 days JavaScript Created in: 7 days The World Created in: Status: Status:Simple F*cked up
  11. @bart_goralewicz Addy Osmani It was used only for adding rainbows and sparkles for webpages. It wasn’t being used to build really complex apps.
  12. @bart_goralewicz The rise of JavaScript 2006 AngularJS 2010
  13. @bart_goralewicz AWARENESS STEP
  14. @bart_goralewicz 2009: Google knows JS is everywhere.
  15. @bart_goralewicz 2009: Google knows JS is everywhere. But they still couldn’t render it at scale
  16. @bart_goralewicz We decided to try to understand pages by executing JavaScript. It’s hard to do that at the scale of the current web, but we decided that it’s worth it. 2014
  17. @bart_goralewicz DENIAL STEP
  18. @bart_goralewicz “Times have changed. Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers.” 2015: Google claims they are generally able to render JavaScript
  19. @bart_goralewicz 2015-2017: The Dark Ages
  20. @bart_goralewicz 2017: JSSEO.expert experiment
  21. @bart_goralewicz August 2017: Google declared they use Chrome 41 for rendering Chrome 41 was released in 2015!
  22. @bart_goralewicz 2018: Google wants to render ALL WEBSITES on their own and stop using the old Ajax crawling scheme “Googlebot will render (…) directly, making it unnecessary for the website owner to provide a rendered version of the page.”. SOURCE: https://webmasters.googleblog.com/2017/12/rendering-ajax-crawling-pages.html
  23. @bart_goralewicz ACCEPTANCE STEP
  24. @bart_goralewicz 2018: Google officially recommends dynamic rendering as a “workaround” to their JavaScript rendering issues
  25. @bart_goralewicz Dynamic rendering explained SERVER BROWSER Initial HTML + JS CRAWLERRENDERER Static HTML
  26. @bart_goralewiczoogle – Big news from Google – Bi May 2019
  27. @bart_goralewicz “Today, we are happy to announce that Googlebot now runs the latest Chromium rendering engine (74 at the time of this post)” 7th of May 2019 https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html
  28. @bart_goralewicz
  29. @bart_goralewicz WHAT does it mean to SEOs, Developers and Webmasters?
  30. @bart_goralewicz
  31. @bart_goralewicz
  32. @bart_goralewicz
  33. @bart_goralewicz It’s great that Google wants to support new JavaScript features! But for the average SEO or developer, IT DOESN’T CHANGE MUCH. Reality?
  34. @bart_goralewicz …Google is still not perfect at rendering JavaScript at scale
  35. @bart_goralewicz Being able to do something Actually doing it
  36. @bart_goralewicz You think Google no longer recommends serving Googlebot a static version?
  37. @bart_goralewicz Google is still NOT PERFECT at rendering JavaScript
  38. @bart_goralewicz Rendering delays…
  39. @bart_goralewicz
  40. @bart_goralewicz But how long do you HAVE to wait for the 2nd wave?
  41. @bart_goralewicz The rendering delay is confirmed by Google
  42. @bart_goralewicz Will Google be able to index the JS content instantly?
  43. @bart_goralewicz GOOGLEBOT IS BASED ON THE NEWEST VERSION OF CHROME Googlebot declines user permission requests Cookies, local & session storage are cleared across page loads The browser always downloads all the resources Googlebot may not… BUT IS NOT A REAL BROWSER!
  44. @bart_goralewicz JavaScript is too expensive… for JS
  45. @bart_goralewicz
  46. @bart_goralewicz Technically, can render JavaScript. But also struggles with rendering JavaScript at scale
  47. @bart_goralewicz Can Bing index the content of Vimeo?
  48. @bart_goralewicz Can Bing index the content of Angular.io?
  49. @bart_goralewicz Description and photo not found RISK:
  50. @bart_goralewicz Angular.io is doing fine on Twitter
  51. @bart_goralewicz Angular.io is NOT doing fine on Twitter Vue.js is doing MUCH better
  52. @bart_goralewicz Now let’s talk about .com Wish ignores SEO as most of their traffic comes from social media How are they doing on acebook?
  53. @bart_goralewicz John Seo Can’t wait to buy this watch! John Seo Can’t wait to buy this watch! John Seo Can’t wait to buy this watch!
  54. @bart_goralewicz Poor JavaScript = Problems
  55. @bart_goralewicz
  56. @bart_goralewicz GOOGLEBOT DOESN’T ACT LIKE A REAL USER Watch out for infinite scrolling!
  57. @bart_goralewicz Many websites still implement infinite scrolling INCORRECTLY… No access to page 2 of pagination.
  58. @bart_goralewicz Use proper <a href> links MAKE SURE GOOGLE CAN DISCOVER YOUR INTERNAL LINKS
  59. @bart_goralewicz • both users and search engines have to render JS on their own • Default practice. Usually it’s the most problematic one for Google • bots get a static version, easy to crawl and index • users get a fully- featured JavaScript website Isomorphic JS Static-site renderingClient-side rendering Dynamic rendering • Initial, server-side rendered HTML is sent to users and search engines • Then JavaScript is loaded on top of that • All the HTML files are built with data BEFORE they are uploaded to a server
  60. @bart_goralewicz Dynamic rendering – solution or a workaround one.ly/dynamic-rendering
  61. @bart_goralewicz We heavily recommend Rendertron as a Dynamic Rendering solution. Google I/O 2018
  62. @bart_goralewicz Is a solution?
  63. @bart_goralewicz My personal beef with dynamic rendering It’s only made for the sake of SEO. It doesn’t improve anything for users…
  64. @bart_goralewicz “is a workaround, but (…) a stepping stone towards improving your website because server-side rendering and hydration, there’s a bunch of work to do.” DYNAMIC RENDERING Martin Splitt
  65. @bart_goralewicz HYBRIDRENDERING Beneficial for users and search engines More developer resources More difficult to implement than dynamic rendering
  66. @bart_goralewicz What should we do until Google I/O 2020? Summary
  67. @bart_goralewicz BE MINDFUL1 Google didn’t update the URL inspection tool (and other tools) yet. Mind that when testing your website
  68. @bart_goralewicz AVOID CLIENT SIDE JS RENDERING2 We saw a few cases when 100% CSR websites would rank, BUT • they are rather an exception than a rule • all the websites were fairly small and static @bart_goralewicz AVOID CLIENTSIDEJS RENDERING2 We saw a few cases when 100% CSR websites would rank, BUT • they are rather an exception than a rule • all the websites were fairly small and static
  69. @bart_goralewicz
  70. @bart_goralewicz
  71. @bart_goralewicz
  72. @bart_goralewicz INTRODUCE (AND STICK TO) THE WEB PERFORMANCE BUDGET AND LIMIT CLIENT SIDE JAVASCRIPT3 for: • Web Performance • Crawler budget • Social Media • Bing and Altavista P.S. Don’t pay your JavaScript developers based on “the number of lines of code per day” ☺
  73. @bart_goralewicz REMEMBER THAT REGARDLESS OF SEO, JAVASCRIPT HAS A MASSIVE PERFORMANCE COST.4 Make sure your users can afford it.
  74. @bart_goralewicz
  75. @bart_goralewicz
  76. @bart_goralewicz
  77. @bart_goralewicz DON’T USE FEATURES TARGETED ONLY AT COMPLYING WITH CHROME 41 ANYMORE5 But experiment and test before implementing changes. It’s new territory.
  78. @bart_goralewicz GOOGLEBOT IS STILL “INTRODUCING ITSELF” AS CHROME 41.6 It is only for the sake of making developers’ lives easier. It will change soon.
  79. @bart_goralewicz (hehe) OTHER BROWSERS7 will not deal with JS indexing in the nearest future
  80. @bart_goralewicz Share these #SMXInsights on your social channels! ALWAYS: Check if Google can render your website.1 Make sure that Google can index your content quickly. Use the “site” command.2 Make sure that Google can discover your links.3
  81. @bart_goralewicz

Give us 15 minutes of your time and find out why big brands trust Onely with their major technical SEO issues.