3. hello@impression.co.uk
Impression
Founded in November 2012, Impression has
grown to be one of the UK’s premier agencies,
working with brands across the globe to drive
higher returns on their digital marketing
investments.
● 50 strong UK team
● Specialisms across SEO, PPC, PR, Analytics
● Work with startups, SMBs & Corporates
● Won a nice selection of awards, too
15. @impressiontalk
The two aspects of JavaScript SEO
Although they’re inherently intertwined, there are two aspects of
JavaScript SEO specialists want to learn:
JavaScript SEO for
Rendering Performance
JavaScript SEO for
Loading Performance
21. @impressiontalk
hello@impression.co.uk
How does this impact SEO / Googlebot?
● Ranking factor in mobile search - (Googlebot Smartphone)
● Crawl efficiency - if a page is slow, Googlebot can notice its crawlers
are slowing down your website and decide to decrease the crawl
rate.
● Google could have issues related to rendering your content.
22. @impressiontalk
hello@impression.co.uk
Optimisations you can make
● Fix render blocking resources
○ De-prioritise render-blocking JavaScript to the footer (not <head>)
○ Use “async” or “defer” tags
● “Chunk” JavaScript
○ Only load required modules per page
● Remove unused CSS and “scope” CSS
23. @impressiontalk
hello@impression.co.uk
JavaScript Async vs Defer
https://flaviocopes.com/javascript-async-defer/#performance-comparison & https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/lo
Only time-
critical, like
Analytics
Everything else
Load in footer
where possible,
too!
24. @impressiontalk
hello@impression.co.uk
Optimisations you can make
● Load appropriate image sizes
○ JavaScript lazy loading should never be used on all images
○ “Deferring loading of non-critical or non-visible content, also commonly known as
"lazy loading", is a common performance and UX best practice … if not
implemented correctly, this technique can inadvertently hide content from
Google...”
● Inline critical CSS and/or JS
○ Include critical JS in <script> in the <head> and de-prioritize/remove the rest
30. @impressiontalk
hello@impression.co.uk
JS rendered content & the web
● Google has had a long relationship with JavaScript crawl schemes [1]
● This summer the evergreen GoogleBot launched
● For other popular international search engines/apps without WRS
○ Indexing and ranking content is difficult/impossible
○ If present, home /popular linked pages often appear poorly in results pages
○ This is an inherent issue: JavaScript is traditionally rendered Client Side
○ Bing currently recommends Dynamic Rendering for best results
● Google has had a long relationship with JavaScript crawl schemes [1]
● This summer the evergreen GoogleBot launched
● For other popular international search engines/apps without WRS
○ Indexing and ranking content is difficult/impossible
○ If present, home /popular linked pages often appear poorly in results pages
○ This is an inherent issue: JavaScript is traditionally rendered Client Side
○ Bing currently recommends Dynamic Rendering for best results
34. @impressiontalk
hello@impression.co.uk
However...
“I wouldn't say that two waves of indexing are dead,
it's definitely not.
I expect eventually rendering crawling and indexing will
come closer together.
We're not there yet [...]”
- John Mueller, 28 August 2019
36. @impressiontalk
@impressiontalk
So can we do better?
● Not serving empty HTML to bots
● Not asking users to wait for initial content downloads
● Delivering consistent content for all search engines
● Ensuring we’re rendering Open Graph tags for the social web
The goal is to serve all users populated & complete HTML on the first load
37. @impressiontalk
Server Side Rendering
Server Side Rendering “SSR” is a blanket term:
● Pre-rendering / Static rendering
● Static site generation
● Dynamic rendering
● Hybrid rendering
● Isomorphic JavaScript /
Universal Rendering
38. @impressiontalk
@impressiontalk
Pre-rendering
● Serve bots full page HTML snapshots of all pages
○ Store snapshots in a temporary cache
○ Serve static HTML to all bots/crawlers
○ Refresh periodically (~7 days to keep cache fresh)
○ If pages update in the meantime, queue for new HTML snapshot
● Best for
○ Mostly static websites
○ Blogs, brochure & lead gen websites
39. @impressiontalk
Pre-rendering
● DIY Open Source options
○ Puppeteer & Rendertron
○ Try for yourself: https://render-
tron.appspot.com/render/https://www.brightonseo.com/
○ Relatively simple to get set up
● Commercial options
○ Prerender.io (250 pages free; no endorsement)
○ Very easy to get set up
○ Nice extra: prerender.io strips all <script> tags in HTML for bots (smaller files)
41. @impressiontalk
Hybrid rendering
● A combination of server-rendered
and client-side rendered pages
● First static page loads rendered
server side
● Users and Bots get HTML and for
users the JS then executes
● Then browser renders subsequent
content following this
https://developers.google.com/web/updates/2019/02/rendering-on-the-web & https://seopressor.com/blog/seo-javascript-google-io-18-summary/
42. @impressiontalk
Dynamic rendering
● For content that changes rapidly, or non-supported JS features
● A variation on pre-rendering/hybrid as HTML is rendered in real-time
https://developers.google.com/search/docs/guides/dynamic-rendering
43. @impressiontalk
Dynamic rendering
● A workaround for crawlers, but not seen as cloaking by Google
○ Google will diff rendered DOM vs server HTML for major content differences
● If appropriate then a temporary cache for rendered pages is fine
● Site dynamically detects whether it’s a search engine or not and
serves appropriate content
● Can use similar pre-rendering solutions (Rendertron etc) for this
● To test: Verify with Google’s Mobile Friendly Test/URL Inspection
https://developers.google.com/search/docs/guides/dynamic-rendering
45. @impressiontalk
Recap: Benefits of SSR*
*From any of the SSR options
➔ Serve users & bots populated HTML (no wait)
➔ Able to serve content from cache, CDN or static file (fast)
➔ JavaScript can be stripped out for bots (smaller files)
➔ Can rehydrate into an app once DOM ready (keeps functionality)
46. @impressiontalk
So today’s take away will be:
Serve all of your users - humans and bots - fully rendered HTML
on first page load
...and then load in some nicely optimised JavaScript enhancements
48. @impressiontalk
@impressiontalk
Navigating the site as a user
Probably the easiest and least technical!
● Navigate from page to page as a user
● If the browser URL changes but the page doesn’t visibly reload
… then it’s likely using at least some JavaScript features to do so
50. @impressiontalk
@impressiontalk
What is Diff checking?
As close as possible, a perfect match between
● client side rendered HTML and
● what it’s fed from the server
Resource: https://www.diffchecker.com/
Chrome plugin: “View Rendered Source”
51. @impressiontalk
@impressiontalk
Debugging and testing
● Google: Lighthouse Audit (Loading Performance)
○ Test real-world data on your machine or simulate & throttle RUN IN PRIVATE
● Google: Pagespeed Insights(Loading Performance)
○ Test “field data” (Lighthouse) vs “lab data” (the CrUX report) [1]
● Google: Mobile friendly test & URL inspection tool(Rendering Performance)
○ Test how GoogleBot sees your URL and ensure content is being displayed
● Bing Webmaster Tools & Yandex Webmaster Tools (Rendering Performance)
55. @impressiontalk
@impressiontalk
Venue finder website
● New React website with no SEO
consideration
● JavaScript redirects only partially
understood
● Metadata only rendering defaults
● All canonicals linking to homepage
The results
133%
Increase in organic
impressions
98%
Increase in weekly
organic traffic
93%
Increase in
enquiries
58. @impressiontalk
@eddjtw
Takeaways
● JavaScript SEO best practice is always changing
● There’s been 2+ major changes over the summer already
● Personalisation will continue to keep this interesting
● Frameworks will continue to improve (for SEOs!)
Serve all of your users - humans and bots - fully rendered HTML on
first page load