The New Renaissance of JavaScript - SMX London 2019

@bart_goralewicz
This is not a dynamic rendering deck.
The session description was
created before some
MAJOR changes at Google.
DISCLAIMER

@bart_goralewicz
Developers love JavaScript for its
flexibility and capabilities.
BUT
Search engines still find it difficult
to process JavaScript successfully.

@bart_goralewicz
Developers love JavaScript for its
flexibility and capabilities.
Search engines still find it difficult
to process JavaScript successfully.
BUT

@bart_goralewicz
WHY?
Flexibility Decent UX Community

@bart_goralewicz
WHY?
Flexibility Decent UX Community
Easy to start Frameworks Platforms

@bart_goralewicz
short history of
JavaScript
& JavaScript SEO
A VERY,
VERY

@bart_goralewicz
Mocha
10 days
JavaScript
Created in: 7 days
The World
Created in:
Status: Status:Simple F*cked up

@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.

@bart_goralewicz
The rise of JavaScript
2006
AngularJS
2010

@bart_goralewicz
AWARENESS
STEP

@bart_goralewicz
2009: Google knows JS is everywhere.

@bart_goralewicz
2009: Google knows JS is everywhere.
But they still couldn’t render it at scale

@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

@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

@bart_goralewicz
2015-2017: The Dark Ages

@bart_goralewicz
2017:
JSSEO.expert
experiment

@bart_goralewicz
August 2017:
Google declared they use Chrome 41 for rendering
Chrome 41 was released in 2015!

@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

@bart_goralewicz
ACCEPTANCE
STEP

@bart_goralewicz
2018:
Google officially recommends dynamic
rendering as a “workaround” to their
JavaScript rendering issues

@bart_goralewicz
Dynamic rendering
explained
SERVER
BROWSER
Initial HTML + JS
CRAWLERRENDERER
Static HTML

@bart_goralewiczoogle - Big news from Google - Bi
May 2019

@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

@bart_goralewicz
WHAT does it mean to
SEOs, Developers and
Webmasters?

@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?

@bart_goralewicz
…Google is still
not perfect
at rendering
JavaScript at
scale

@bart_goralewicz
Being able to do something
Actually doing it

@bart_goralewicz
You think Google no longer recommends
serving Googlebot a static version?

@bart_goralewicz
Google is still NOT PERFECT at rendering JavaScript

@bart_goralewicz
Rendering
delays...

@bart_goralewicz
But how long
do you
HAVE to wait
for the 2nd
wave?

@bart_goralewicz
The rendering delay is confirmed by Google

@bart_goralewicz
Will Google be able to index the JS content instantly?

@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!

@bart_goralewicz
JavaScript is too expensive… for
JS

@bart_goralewicz
Technically, can
render JavaScript.
But also struggles with
rendering JavaScript at scale

@bart_goralewicz
Can Bing index the content of Vimeo?

@bart_goralewicz
Can Bing index
the content
of Angular.io?

@bart_goralewicz
Description and
photo not found
RISK:

@bart_goralewicz
Angular.io is doing
fine on Twitter

@bart_goralewicz
Angular.io is
NOT doing
fine on Twitter
Vue.js is doing
MUCH better

@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?

@bart_goralewicz
John Seo
Can’t wait to buy this watch!
John Seo
John Seo

@bart_goralewicz
Poor JavaScript = Problems

@bart_goralewicz
GOOGLEBOT DOESN’T ACT LIKE A REAL USER
Watch out for
infinite scrolling!

@bart_goralewicz
Many websites still implement
infinite scrolling INCORRECTLY...
No access to
page 2 of
pagination.

@bart_goralewicz
Use proper <a href> links
MAKE SURE GOOGLE CAN DISCOVER YOUR INTERNAL LINKS

@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

@bart_goralewicz
Dynamic rendering – solution or a workaround
one.ly/dynamic-rendering

@bart_goralewicz
We heavily recommend
Rendertron as a Dynamic
Rendering solution.
Google I/O 2018

@bart_goralewicz
Is
a solution?

@bart_goralewicz
My personal beef with dynamic rendering
It’s only made
for the sake of SEO.
It doesn’t improve
anything for users…

@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

@bart_goralewicz
HYBRIDRENDERING
Beneficial for users and search engines
More developer resources
More difficult to implement
than dynamic rendering

@bart_goralewicz
What should we do until Google I/O 2020?
Summary

@bart_goralewicz
BE MINDFUL1
Google didn't update the URL
inspection tool (and other tools) yet.
Mind that when testing your website

@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

@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” ☺

@bart_goralewicz
REMEMBER THAT
REGARDLESS OF SEO,
JAVASCRIPT HAS A MASSIVE
PERFORMANCE COST.4
Make sure your users can afford it.

@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.

@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.

@bart_goralewicz
(hehe)
OTHER BROWSERS7
will not deal with JS indexing
in the nearest future

@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

The New Renaissance of JavaScript - SMX London 2019

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to The New Renaissance of JavaScript - SMX London 2019

Similar to The New Renaissance of JavaScript - SMX London 2019 (20)

Recently uploaded

Recently uploaded (20)

The New Renaissance of JavaScript - SMX London 2019