Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Onely, profile picture
Uploaded byOnely
PDF, PPTX1,821 views

The New Renaissance of JavaScript - SMX London 2019

This document contains advice from a presentation on JavaScript rendering and SEO. It recommends: (1) Being mindful that Google has not fully updated its tools to the latest JavaScript rendering capabilities. (2) Avoiding client-side JavaScript rendering and instead implementing server-side rendering or static sites to ensure content is crawlable. (3) Introducing and adhering to web performance budgets and limiting client-side JavaScript to improve performance for users and search engines.

Internet◦
Download as PDF, PPTX
@bart_goralewicz
@bart_goralewicz This is not a dynamic rendering deck. The session description was created before some MAJOR changes at Google. DISCLAIMER
@bart_goralewicz
@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 ~70%
@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 DENIAL STEP
@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
@bart_goralewicz WHAT does it mean to SEOs, Developers and Webmasters?
@bart_goralewicz
@bart_goralewicz
@bart_goralewicz
@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
@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
@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 Can’t wait to buy this watch! John Seo Can’t wait to buy this watch!
@bart_goralewicz Poor JavaScript = Problems
@bart_goralewicz
@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
@bart_goralewicz
@bart_goralewicz
@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
@bart_goralewicz
@bart_goralewicz
@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
@bart_goralewicz