Seo Website

The advantages of dynamic rendering for website positioning

JavaScript frameworks have been rising in recognition over the previous few years, thanks in no small half to the pliability they provide. “JavaScript frameworks enable for fast improvement. It presents higher person expertise. It presents higher efficiency and it presents enhanced performance that conventional frameworks — non-JavaScript ones — kind of lack,” mentioned Nati Elimelech, tech website positioning lead at Wix.

“So, it’s no shock that very giant web sites or advanced UIs with advanced logic and options often have a tendency to make use of JavaScript frameworks these days,” he added.

At SMX Subsequent, Elimelech offered an summary of how JavaScript works for client-side, server-side and dynamic rendering, and shared insights for auditing gained from rendering JavaScript on over 200 million web sites.

Shopper-side vs. Server-side rendering

Totally different rendering strategies are appropriate for various functions. Elimelech advocated on behalf of dynamic rendering as a method to fulfill search engine bots and customers alike, however first, it’s crucial to grasp how client-side and server-side rendering work.

Shopper-side rendering

When a person clicks on a hyperlink, their browser sends requests to the server that website is hosted on. 

“Once we’re speaking about JavaScript frameworks, that server responds with one thing that’s a bit completely different than what we’re used to,” Elimelech mentioned.

“It responds with a skeleton HTML — simply the essential HTML, however with a whole lot of JavaScript. Mainly, what it does is inform my browser to run the JavaScript itself to get all of the necessary HTML,” he mentioned, including that the person’s browser then produces the rendered HTML (the ultimate HTML that’s used to assemble the web page the way in which that we truly see it). This course of is called client-side rendering.

A slide with a description of client-side rendering.
Picture: Natie Elimelech.

“It’s very very similar to assembling your individual furnishings as a result of mainly the server tells the browser, ‘Hey, these are all of the items, these are the directions, assemble the web page. I belief you.’ And that implies that all the arduous lifting is moved to the browser as a substitute of the server,” Elimelech mentioned.

Shopper-side rendering could be nice for customers, however there are instances by which a consumer doesn’t execute JavaScript, which suggests it received’t get the complete content material of your web page. One such instance could also be search engine crawlers; though Googlebot can now see extra of your content material than ever earlier than, there are nonetheless limitations.

Server-side rendering

For shoppers that don’t execute JavaScript, server-side rendering can be utilized.

“Server-side rendering is when all of that JavaScript is executed on the server-side. The entire sources are required on the server-side and your browser and the search engine bot don’t must execute JavaScript to get the absolutely rendered HTML,” Elimelech defined. Because of this server-side rendering could be quicker and fewer resource-intensive for browsers.

A slide with a basic explanation of server-side rendering.
Picture: Natie Elimelech.

“Server-side rendering is like offering your visitors with an precise chair they will sit it on as a substitute of getting to assemble it,” he mentioned, persevering with his earlier analogy. “And, once you do server-side rendering, you mainly make your HTML seen to every kind of bots, every kind of shoppers . . . It doesn’t matter what the JavaScript capabilities are, it might probably see the ultimate necessary rendered HTML,” he added.

Dynamic rendering

Dynamic rendering represents “one of the best of each worlds,” Elimelech mentioned. Dynamic rendering means “switching between client-side rendered and pre-rendered content material for particular person brokers,” in line with Google. 

Beneath is a simplified diagram explaining how dynamic rendering works for various person brokers (customers and bots).

A flowchart describing dynamic rendering.
Picture: Natie Elimelech.

​​”So there’s a request to URL, however this time we verify: Do we all know this person agent? Is that this a identified bot? Is it Google? Is it Bing? Is it Semrush? Is it one thing we all know of? If it’s not, we assume it’s a person after which we do client-side rendering,” Elimelech mentioned. 

In that case, the person’s browser runs the JavaScript to get the rendered HTML, however nonetheless advantages from the benefits of client-side rendering, which regularly features a perceived increase in pace.

However, if the consumer is a bot, then server-side rendering is used to serve the absolutely rendered HTML. “So, it sees all the pieces that must be seen,” Elimelech mentioned.

This represents the “better of each worlds” as a result of website homeowners are nonetheless in a position to serve their content material whatever the consumer’s JavaScript capabilities. And, as a result of there are two flows, website homeowners can optimize every to raised serve customers or bots with out impacting the opposite.

However, dynamic rendering isn’t good

There are, nevertheless, problems related to dynamic rendering. “We have now two flows to take care of, two units of logics, caching, different advanced methods; so it’s extra advanced when you might have two methods as a substitute of 1,” Elimelech mentioned, noting that website homeowners should additionally preserve an inventory of person brokers in an effort to establish bots.

The pros and cons of dynamic rendering
Picture: Natie Elimelech.

Some would possibly fear that serving search engine bots one thing completely different than what you’re displaying customers could be thought-about cloaking.

“Dynamic rendering is definitely a most popular and advisable resolution by Google as a result of what Google cares about is that if the necessary stuff is similar [between the two versions],” Elimelech mentioned, including that, “The ‘necessary stuff’ is issues we care about as SEOs: the content material, the headings, the meta tags, inner hyperlinks, navigational hyperlinks, the robots, the title, the canonical, structured knowledge markup, content material, photos — all the pieces that has to do with how a bot would react to the web page . . . it’s necessary to maintain equivalent and once you hold these equivalent, particularly the content material and particularly the meta tags, Google has no concern with that.”

Potential site parity issues when using different JavaScript rendering methods
Picture: Natie Elimelech.

Because it’s crucial to take care of parity between what you’re serving bots and what you’re serving customers, it’s additionally essential to audit for points that may break that parity.

To audit for potential issues, Elimelech recommends Screaming Frog or an identical software that lets you evaluate two crawls. “So, what we love to do is crawl a web site as Googlebot (or one other search engine person agent) and crawl it as a person and ensure there aren’t any variations,” he mentioned. Evaluating the suitable components between the 2 crawls might help you establish potential points.

A slide with tools for auditing the javascript versions of your site.
Picture: Natie Elimelech.

Elimelech additionally talked about the next strategies to display for points:

“Bear in mind, JavaScript frameworks aren’t going anyplace,” he mentioned. “Likelihood is you’re going to fulfill considered one of them quickly, so that you higher be ready to deal with them.”

Watch the complete SMX Subsequent presentation right here (free registration required).

New on Search Engine Land

About The Creator

George Nguyen is an editor for Search Engine Land, masking natural and paid search. His background is in journalism and content material advertising and marketing. Previous to getting into the trade, he labored as a radio persona, author, podcast host and public faculty instructor.

Related Articles

Back to top button