My Blog

Land For You

Javascript Rendering: Common JS Rendering Issues for Websites

If you operate JavaScript in your internet site—and 98.8 percent of websites do—then information how JavaScript renders and why it’s crucial to your website is vital.

Why?

Unrendered or poorly rendered JavaScript may have untold impacts to your website. It can even go so far as to impact SEO if Google JavaScript rendering can not take region because it’s meant to.

The fact is, JavaScript rendering troubles will appear. So understanding why they occur and the way to cope with them may be the distinction between a poorly rendered internet site or an most effective consumer (and crawlbot) enjoy.

In this publish, I’ll give an explanation for what rendering JavaScript is and why it’s vital. My team at NP Digital will even offer an evaluation of 3 SaaS manufacturers, inclusive of common JavaScript rendering mistakes. Finally, I’ll provide a rundown of the maximum commonplace JS rendering mistakes and the way you may address them.

We have loads to cowl, so let’s soar right in!

Key Findings On JavaScript Rendering

JavaScript rendering is crucial for internet site usability and functionality, impacting entire sections or pages if left unrendered for users.

NP Digital analyzed 3 websites to example capacity issues with JavaScript Rendering

Zoom (Brand #1) Analysis:

Analysis of Zoom’s website famous variations between raw HTML and rendered HTML, together with lacking hreflang attributes in raw HTML.

Instances like missing H1 tags in uncooked HTML can impact search engine marketing and avert website performance.

Asana (Brand #2) Analysis:

Similar to Zoom, Asana faces problems like differing page titles in uncooked HTML and rendered HTML.

Asana has numerous pages with blocked JavaScript resources, but this could be easily constant through updating the robots.Txt record.

Neil Patel (Brand #3) Analysis:

Neil Patel’s website also famous attributes displayed in rendered HTML but now not in uncooked HTML.

There was a minimum impact from blocked JavaScript documents, showcasing effective control of this commonplace difficulty.

Why JavaScript Rendering Is Important

JavaScript rendering is essential from two views.

First, from a person attitude, JavaScript rendering is essential for website usability and capability. Depending on what elements are loaded using JavaScript, complete sections or maybe pages or your internet site may be inoperable if JavaScript is left unrendered.

If JavaScript isn’t rendering for users, then it’s certainly now not rendering for search engine crawlbots. This approach that Google can’t index or rank your internet site on SERPs.

This may have tremendous implications for search engine optimization, and it’s a large cause why JavaScript search engine optimization wishes to be a part of your general search engine marketing and advertising approach.

How Brands are Using JavaScript Rendering

JavaScript is used so widely that it may be tough to pinpoint what on a website is HTML and what’s JavaScript. To show you just how commonplace JavaScript is on websites—and why know-how JavaScript rendering is essential—my team at NP Digital has assessed 3 SaaS manufacturers.

Using Screaming Frog and source code, we’ve dug into the general website online breakdown of URLs to determine just what number of are the use of JavaScript. We’ve also analyzed a web page or two from each website to reveal you the potential effect that poorly rendered JavaScript will have on search engine optimization.

Before we dive in, even though, here’s a crash route in HTML rendering and JS rendering.

We’ll be discussing  styles of HTML codecs in this publish. The first is raw HTML and the second is rendered HTML.

Raw HTML: The unique version of HTML on a website earlier than JavaScript has loaded.

Rendered HTML: The HTML that is visible after JavaScript has loaded.

Now you will be asking, where and while does rendering JS take region?

There are  possibilities. The first is server-side rendering, and this is finished on the internet site’s server before being sent to the patron (i.E. User browser). This is the most common rendering alternative because it presents a smoother enjoy for the person.

The second alternative is client-aspect rendering, wherein the person’s net browser ought to render the JavaScript before the internet site fully hundreds. This can reason lag and isn’t always recommended for most web sites.

Finally, at the same time as we won’t talk is just too closely, it’s additionally helpful to understand how HTML is read through computers (including crawlbots). The document item model (DOM) is the shape of an HTML file. The HTML factors are saved become independent from the JavaScript factors, as shown underneath:

This is done for plenty motives. For builders, it’s easier to pinpoint errors and make adjustments to the HTML or the JavaScript as wished. For internet site rendering purposes, this guarantees that HTML factors are still loaded of their uncooked model despite the fact that JavaScript doesn’t render.

Now that you have a few heritage understanding, let’s begin our evaluation of 3 SaaS brands: Zoom, Asana, and Neil Patel.

Brand #1: Zoom

The first SaaS logo we analyzed was Zoom, a cloud-based totally video conferencing carrier.

Using Screaming Frog, the NPD group ran a scrape of the entire U.S. Model of the Zoom internet site to see how JavaScript will be impacting their internet site. Screaming Frog is terrific for identifying wherein JavaScript indicates up in the rendered HTML that Google cares about.

Right away, we will see a distinction within the way the hreflang characteristic is handled within the authentic HTML versus the rendered HTML. More in particular, hreflang is lacking from the authentic HTML (traces 39 through 56):

Assuming rendering in JavaScript takes place properly, this isn’t probably to have an effect at the performance of the web site. However, through no longer along with the hreflang attribute in the uncooked HTML, there’s the capacity that this facts isn’t surpassed to Google.

Let’s have a look at some other example where raw HTML and rendered HTML fluctuate:

In the above instance, we are able to see that the H1 tag is nicely rendered with JavaScript. However, because the H1 tag is not blanketed in the raw HTML, there is the ability for Google to miss this vital tag if the page become no longer well rendered.

Instances like this will have most important affects on search engine marketing and preclude internet site performance.

It’s not always the case that an vital assets is lacking absolutely from the raw HTML, but alternatively, it is able to be unique from what the rendered HTML is showing. In the under instance, the name tag within the raw HTML is “Loading” while the identify tag inside the rendered HTML is “Zoom Learning Center”:

This is an instance wherein JavaScript is updating the page title dynamically, but if JavaScript didn’t render then Google could now not index the proper page title.

One element to be aware is that JavaScript mistakes are not unusual, and that they don’t commonly have a big effect on web page rendering. We can see this through looking on the supply code and seeing that all relevant records we would anticipate to look on a page—mostly HTML tags—are seen.

This doesn’t imply that JavaScript errors can’t be elaborate for different reasons, though.

Just take, as an example, Zoom’s author pages like this one for Janine Pelosi:

In this case, the raw HTML doesn’t have the picture used above however the rendered HTML does. This manner if the traveler’s browser doesn’t render JavaScript, they may no longer be seeing the entirety you show for your web page.

From a credibility point of view, that’s a loss.

How can a vacationer see your internet site as credible and authoritative if they are able to’t put a face to a name? The equal can be stated for imagery and logos that your website shows some place else, like at checkout.

Overall, the above problems aren’t inflicting issues for web page rendering. So whilst a few on-page factors or information may not be to be had to Google crawlbots in the uncooked HTML, they may get them within the rendered HTML.

One primary difficulty that’s no longer precise to Zoom is a website blocking .Js files in the robots.Txt report. This can save you Google crawlbots from crawling, rendering, and indexing these files which can be unfavourable to your search engine marketing rating.

Here’s a list of all the JavaScript URLs with blocked resources on Zoom:

If this isn’t corrected, it may have main affects on rankings.

Brand #2: Asana

The 2nd SaaS emblem we tested became Asana, a piece and venture control platform.

Like Zoom, Asana leverages JavaScript throughout their website. We see a variety of the same problems on Asana as on Zoom, which includes differing web page titles on uncooked HTML as opposed to rendered HTML.

This isn’t a major difficulty, assuming there is not anything blocking the pages from rendering as they should.

However, much like with Zoom, Asana does have several pages with blocked JavaScript sources:

The right information is that this is an smooth repair. The robots.Txt record simply needs to be updated to make certain that no essential useful resource files (i.E. JavaScript) are being blocked. Once the blocks are removed, the files can be rendered to both internet customers (i.E. Consumer browsers) and Google crawlbots.

Don’t need to attend the weeks or months it can take for Google to recrawl your site?

Once you’ve unblocked your JavaScript files, you could ask Google to recrawl your URLs. This will ensure your previously non-indexed or poorly indexed pages are recrawled, rerendered, and reindexed for SERPs.Brand #3: Neil Patel

I couldn’t likely examine SaaS web sites that use JavaScript with out throwing my own website, neilpatel.Com, into the mixture!

Similar to Zoom and Asana, we see some of attributes (e.G. Hreflang, content) displayed in the rendered HTML however not inside the uncooked HTML:

The content material is properly loaded, so those are unlikely to be impacting Google crawlability. However, if the rendered HTML did now not display the content due to blocked JavaScript files, for instance, then Google may be lacking (i.E. Now not indexing) crucial content material.

Speaking of blocked JavaScript documents, although, Neil Patel best has 3 URLs impacted through the commonplace problem:

This is some thing we saw throughout all three brands to varying levels, though Neil Patel does a notable job of minimizing the danger via decreasing the range of blocked JavaScript documents.

My group did find one problem that we’re operating quickly to resolve, and that’s ensuring our JavaScript hyperlinks render effectively.

What are JavaScript hyperlinks?

These are links created in JavaScript, both as opposed to or in addition to, in HTML.

If the JavaScript hyperlinks don’t render, then the internal link exceptional and web page authority will not be exceeded to the centered URL. After all, if the hyperlink can’t render then Google can’t move slowly!

Common Javascript Rendering Issues and How to Address Them

We have tested 3 popular SaaS web sites and have throughout a few JavaScript rendering troubles. So what are the most common of those troubles and how can you cope with them?

Leave a comment

Your email address will not be published. Required fields are marked *