How Rendering Affects SEO: Takeaways From Google’s Martin Splitt via @sejournal, @MattGSouthern

6 months ago 97
ARTICLE AD BOX

Google has released a caller occurrence of its Search Central Lightning Talks, which focuses connected rendering strategies, an important taxable for web developers.

In this video, Martin Splitt, a Developer Advocate astatine Google, explains the intricacies of antithetic rendering methods and however these approaches interaction website performance, idiosyncratic experience, and hunt motor optimization (SEO).

This occurrence besides connects to caller discussions astir the overuse of JavaScript and its effects connected AI hunt crawlers, a taxable previously addressed by Search Engine Journal.

Splitt’s insights connection applicable guidance for developers who privation to optimize their websites for modern hunt engines and users.

What Is Rendering?

Splitt begins by explaining what rendering means successful the discourse of websites.

He explains rendering successful elemental terms, saying:

“Rendering successful this discourse is the process of pulling information into a template. There are antithetic strategies arsenic to wherever and erstwhile this happens, truthful let’s instrumentality a look together.”

In the past, developers would straight edit and upload HTML files to servers.

However, modern websites often usage templates to simplify the instauration of pages with akin structures but varying content, specified arsenic merchandise listings oregon blog posts.

Splitt categorizes rendering into 3 main strategies:

  1. Pre-Rendering (Static Site Generation)
  2. Server-Side Rendering (SSR)
  3. Client-Side Rendering (CSR)

1. Pre-Rendering

Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.

Pre-rendering, besides known arsenic static tract generation, generates HTML files successful beforehand and serves them to users.

Splitt highlights its simplicity and security:

“It’s besides precise robust and precise secure, arsenic determination isn’t overmuch enactment happening with the server, and you tin fastener it down rather tightly.”

However, helium besides notes its limitations:

“It besides can’t respond to interactions from your visitors. So that limits what you tin bash connected your website.”

Tools specified arsenic Jekyll, Hugo, and Gatsby automate this process by combining templates and contented to make static files.

Advantages:

  • Simple setup with minimal server requirements
  • High information owed to constricted server interaction
  • Robust and reliable performance

Disadvantages:

  • Requires manual oregon automated regeneration whenever contented changes
  • Limited interactivity, arsenic pages cannot dynamically respond to idiosyncratic actions

2. Server-Side Rendering (SSR): Flexibility with Trade-Offs

Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.

Server-side rendering dynamically generates web pages connected the server each clip a idiosyncratic visits a site.

This attack enables websites to present personalized content, specified arsenic user-specific dashboards and interactive features, similar remark sections.

Splitt says:

“The programme decides connected things similar the URL, visitor, cookies, and different things—what contented to enactment into which template and instrumentality it to the user’s browser.”

Splitt besides points retired its flexibility:

“It tin respond to things similar a user’s login presumption oregon actions, similar signing up for a newsletter oregon posting a comment.”

But helium acknowledges its downsides:

“The setup is simply a spot much analyzable and requires much enactment to support it secure, arsenic users’ input tin present scope your server and perchance origin problems.”

Advantages:

  • Supports dynamic idiosyncratic interactions and tailored content
  • Can accommodate user-generated content, specified arsenic reviews and comments

Disadvantages:

  • Complex setup and ongoing maintenance
  • Higher assets consumption, arsenic pages are rendered for each visitor
  • Potentially slower load times owed to server effect delays

To alleviate assets demands, developers tin usage caching oregon proxies to minimize redundant processing.

3. Client-Side Rendering (CSR): Interactivity with Risks

Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.

Client-side rendering uses JavaScript to fetch and show information successful the user’s browser.

This method creates interactive websites and web applications, particularly those with real-time updates oregon analyzable idiosyncratic interfaces.

Splitt highlights its app-like functionality:

“The interactions consciousness similar they’re successful an app. They hap smoothly successful the inheritance without the leafage reloading visibly.”

However, helium cautions astir its risks:

“The main contented with CSR usually is the hazard that, successful lawsuit thing goes incorrect during transmission, the idiosyncratic won’t spot immoderate of your content. That tin besides person SEO implications.”

Advantages:

  • Users bask a smooth, app-like acquisition without leafage reloads.
  • It allows features similar offline entree utilizing progressive web apps (PWAs).

Disadvantages:

  • It depends heavy connected the user’s instrumentality and browser.
  • Search engines whitethorn person occupation indexing JavaScript-rendered content, starring to SEO challenges.
  • Users mightiness spot blank pages if JavaScript fails to load oregon run.

Splitt suggests a hybrid attack called “hydration ” to amended SEO.

In this method, the server initially renders the content, and past client-side rendering handles further interactions.

Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.

How to Choose the Right Rendering Strategy

Splitt points retired that determination is nary one-size-fits-all solution for website development.

Developers should see what a website needs by looking astatine circumstantial factors.

Splitt says:

“In the end, that depends connected a clump of factors, specified arsenic what does your website do? How often does the contented change? What benignant of interactions bash you privation to support? And what benignant of resources bash you person to build, run, and support your setup?”

He provides a ocular summary of the pros and cons of each attack to assistance developers marque informed choices.

Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.

Connecting the Dots: Rendering and JavaScript Overuse

This occurrence continues earlier discussions astir the drawbacks of excessive JavaScript use, particularly regarding SEO successful the property of AI hunt crawlers.

As antecedently reported, AI crawlers similar GPTBot often person difficulty processing websites that trust heavy connected JavaScript, which tin alteration their visibility successful hunt results.

To code this issue, Splitt recommends utilizing server-side rendering oregon pre-rendering to guarantee that indispensable contented is accessible to some users and hunt engines. Developers are encouraged to instrumentality progressive enhancement techniques and to bounds JavaScript usage to situations wherever it genuinely adds value.

See the video beneath to larn much astir rendering strategies.


Featured Image: Screenshot from: YouTube.com/GoogleSearchCentral, January 2025