Javascript Rendering: Common JS Rendering Issues for Websites

If you use JavaScript on your website—and 98.8 percent of websites do—then understanding how JavaScript renders and why it’s important for your website is crucial.

Why?

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

The fact is, JavaScript rendering issues will happen. So knowing why they happen and how to address them can be the difference between a poorly rendered website or an optimal user (and crawlbot) experience.

In this post, I’ll explain what rendering JavaScript is and why it’s important. My team at NP Digital will also provide an analysis of three SaaS brands, including common JavaScript rendering errors. Finally, I’ll provide a rundown of the most common JS rendering errors and how you can address them.

We have a lot to cover, so let’s jump right in!

Key Findings On JavaScript Rendering

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

NP Digital analyzed 3 sites to example potential issues with JavaScript Rendering

Zoom (Brand #1) Analysis:

Analysis of Zoom’s website reveals differences between raw HTML and rendered HTML, such as missing hreflang attributes in raw HTML.

Instances like missing H1 tags in raw HTML can impact SEO and hinder website performance.

Asana (Brand #2) Analysis:

Similar to Zoom, Asana faces issues like differing page titles in raw HTML and rendered HTML.

Asana has several pages with blocked JavaScript resources, but this can be easily fixed by updating the robots.txt file.

Neil Patel (Brand #3) Analysis:

Neil Patel’s website also exhibits attributes displayed in rendered HTML but not in raw HTML.

There was a minimal impact from blocked JavaScript files, showcasing effective management of this common issue.

Why JavaScript Rendering Is Important

JavaScript rendering is important from two perspectives.

First, from a user perspective, JavaScript rendering is crucial for website usability and functionality. Depending on what elements are loaded using JavaScript, entire sections or even pages or your website can be inoperable if JavaScript is left unrendered.

If JavaScript isn’t rendering for users, then it’s certainly not rendering for search engine crawlbots. This means that Google cannot index or rank your website on SERPs.

This can have significant implications for SEO, and it’s a large reason why JavaScript SEO needs to be a part of your overall SEO and marketing strategy.

How Brands are Using JavaScript Rendering

JavaScript is used so widely that it can be difficult to pinpoint what on a website is HTML and what is JavaScript. To show you just how common JavaScript is on websites—and why understanding JavaScript rendering is important—my team at NP Digital has assessed three SaaS brands.

Using Screaming Frog and source code, we’ve dug into the overall site breakdown of URLs to determine just how many are using JavaScript. We’ve also analyzed a page or two from each site to show you the potential impact that poorly rendered JavaScript can have on SEO.

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

We’ll be discussing two types of HTML formats in this post. The first is raw HTML and the second is rendered HTML.

Raw HTML: The original version of HTML on a website before JavaScript has loaded.

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

Now you may be asking, where and when does rendering JS take place?

There are two possibilities. The first is server-side rendering, and this is done at the website’s server before being sent to the client (i.e. user browser). This is the most common rendering option because it provides a smoother experience for the user.

The second option is client-side rendering, where the user’s web browser must render the JavaScript before the website fully loads. This can cause lag and is not recommended for most websites.

Finally, while we won’t discuss is too heavily, it’s also helpful to know how HTML is read by computers (including crawlbots). The document object model (DOM) is the structure of an HTML document. The HTML elements are kept separate from the JavaScript elements, as shown below:

Caption: The end of HTML and the beginning of JavaScript is clearly shown above. 

This is done for many reasons. For developers, it’s easier to pinpoint errors and make changes to the HTML or the JavaScript as needed. For website rendering purposes, this ensures that HTML elements are still loaded in their raw version even if JavaScript doesn’t render.

Now that you have some background knowledge, let’s begin our analysis of three SaaS brands: Zoom, Asana, and Neil Patel.

Brand #1: Zoom

The first SaaS brand we analyzed was Zoom, a cloud-based video conferencing service.

Using Screaming Frog, the NPD team ran a scrape of the entire U.S. version of the Zoom website to see how JavaScript could be impacting their website. Screaming Frog is great for identifying where JavaScript shows up in the rendered HTML that Google cares about.

Right away, we can see a difference in the way the hreflang attribute is handled in the original HTML versus the rendered HTML. More specifically, hreflang is missing from the original HTML (lines 39 through 56):

Assuming rendering in JavaScript occurs properly, this is not likely to have an impact on the performance of the webpage. However, by not including the hreflang attribute in the raw HTML, there is the potential that this information is not passed to Google.

Let’s look at another example where raw HTML and rendered HTML differ:

In the above example, we can see that the H1 tag is properly rendered with JavaScript. However, since the H1 tag is not included in the raw HTML, there is the potential for Google to miss this important tag if the page was not properly rendered.

Instances like this can have major impacts on SEO and hinder website performance.

It’s not always the case that an important property is missing entirely from the raw HTML, but instead, it may be different from what the rendered HTML is showing. In the below example, the title tag in the raw HTML is “Loading” while the title tag in the rendered HTML is “Zoom Learning Center”:

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

One thing to note is that JavaScript errors are common, and they don’t typically have a massive impact on page rendering. We can see this by looking at the source code and seeing that all relevant information we might expect to see on a page—mostly HTML tags—are visible. 

This doesn’t mean that JavaScript errors can’t be problematic for other reasons, though.

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

In this example, the raw HTML doesn’t have the image used above but the rendered HTML does. This means if the visitor’s browser doesn’t render JavaScript, they may not be seeing everything you display on your site.

From a credibility standpoint, that’s a loss.

How can a visitor see your website as credible and authoritative if they can’t put a face to a name? The same can be said for imagery and logos that your website displays elsewhere, like at checkout.

Overall, the above issues are not causing issues for page rendering. So while some on-page elements or data may not be available to Google crawlbots in the raw HTML, they will get them in the rendered HTML.

One major issue that’s not unique to Zoom is a website blocking .js files in the robots.txt file. This can prevent Google crawlbots from crawling, rendering, and indexing these files which could be detrimental to your SEO ranking. 

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

If this isn’t corrected, it can have major impacts on rankings.

Brand #2: Asana

The second SaaS brand we examined was Asana, a work and project management platform.

Like Zoom, Asana leverages JavaScript across their website. We see a lot of the same issues on Asana as on Zoom, such as differing page titles on raw HTML versus rendered HTML.

This isn’t a major issue, assuming there is nothing blocking the pages from rendering as they should.

However, just like with Zoom, Asana does have several pages with blocked JavaScript resources:

The good news is that this is an easy fix. The robots.txt file just needs to be updated to ensure that no critical resource files (i.e. JavaScript) are being blocked. Once the blocks are removed, the files can be rendered to both web clients (i.e. user browsers) and Google crawlbots.

Don’t want to wait the weeks or months it could take for Google to recrawl your site?

Once you’ve unblocked your JavaScript files, you can 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 possibly analyze SaaS websites that use JavaScript without throwing my own site, neilpatel.com, into the mix!

Similar to Zoom and Asana, we see a number of attributes (e.g. hreflang, content) displayed in the rendered HTML but not in the raw HTML:

The content is properly loaded, so these are unlikely to be impacting Google crawlability. However, if the rendered HTML did not display the content due to blocked JavaScript files, for example, then Google could be missing (i.e. not indexing) important content.

Speaking of blocked JavaScript files, though, Neil Patel only has three URLs impacted by the common issue:

This is something we saw across all three brands to varying degrees, though Neil Patel does a great job of minimizing the risk by reducing the number of blocked JavaScript files.

My team did find one issue that we’re working quickly to resolve, and that’s ensuring our JavaScript links render correctly.

What are JavaScript links?

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

If the JavaScript links don’t render, then the internal link quality and page authority will not be passed to the targeted URL. After all, if the link can’t render then Google can’t crawl!

Common Javascript Rendering Issues and How to Address Them

We have examined three popular SaaS websites and have across a few JavaScript rendering issues. So what are the most common of those issues and how can you address them?

Blocked .js Files in Your robots.txt File

If I had to pick just one JavaScript rendering issue to focus on, it would be blocked JavaScript resources in the robots.txt file.

Why?

A blocked JavaScript resource is one that has no chance of rendering, whether for the user or Google crawlbots. While there may be reasons to block some resources in the robots.txt file, it’s something you should avoid whenever possible. 

The other reason I like to call attention to this JavaScript rendering issue is because it’s such an easy fix!

You or your website administrator simply need to update the robots.txt file to remove resource blocks. This just takes a little bit of knowledge of robots.txt files. Once completed, you can ask Google to recrawl your URLs.

Conflicting Directives

There are a few ways to directly communicate with search engine crawlbots in your HTML code. These are known as directives, and some well-known examples of them are the “noindex” and “nofollow” tag attributes.

The noindex directive tells crawlbots not to index the page, while the nofollow directive tells crawlbots not to pass link juice from the current URL to the linked URL.

A common JavaScript rendering issue is conflicting directives. This means that the raw HTML contains one or more directives that the rendered HTML doesn’t. We saw this on Zoom, as shown in the image below:

When this happens, neither the non-rendered page nor the rendered JavaScript page will be indexed. It may also cause a timeout error, which is likely to appear in any website performance reports you run.

Fortunately, the fix for this is also simple.

If you want to ensure that your page is noindexed without creating a JavaScript timeout error, then ensure the noindex directive is included in the rendered HTML as well. If instead you wish the page to be indexed, then ensure the directive is removed from both the raw HTML and rendered HTML.

Non-Renderable JavaScript Links

Just like JavaScript files may not always render, the same can be said of JavaScript links.

These links can have many purposes, though most of them call to related JavaScript files (e.g theme files) or plugins.

It’s not uncommon for files to be deleted or plugins to be deactivated over the lifetime of your website. So because of this, you very likely have non-renderable JavaScript links.

In many cases, like most JS rendering errors, these won’t have an impact on overall website performance. However, you should know which links are non-renderable and remove them on a regular basis to avoid script bloat.

FAQs

Conclusion

Rendering JavaScript is something that many of us have never given a thought. We take for granted all the work involved in loading a fully functioning webpage.

You now know, though, that JavaScript rendering is not always a perfect process. And while it may not have noticeable impacts to your website’s performance, it can certainly impact things like SEO.

Even popular SaaS brands—like Zoom, Asana, and Neil Patel—have JavaScript rendering errors to address. The good news is, you too can find your site’s JS issues and ensure they are fixed before you begin to see major impacts to your website.

Do you have questions about common JS rendering issues? Let us know in the comments below.