This document contains advice from a presentation on JavaScript rendering and SEO. It recommends: 1) Being mindful that Google has not updated its tools yet to reflect improvements in JavaScript rendering. 2) Avoiding client-side JavaScript rendering and instead using server-side rendering or static sites, as client-side rendering can cause indexing issues. 3) Introducing and sticking to a web performance budget and limiting client-side JavaScript for reasons like performance, the crawler's technical limitations, and compatibility with other search engines and social media platforms.

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