How to Deal with Partially Rendered or Empty Pages

Published on December 7, 2023
How to Deal with Partially Rendered or Empty Pages

Content that can’t be rendered is like it doesn’t exist. No matter how amazing your pages are, if Google can’t index a page’s content, it won’t help you rank higher on search engine result pages (SERPs).

In fact, when Google can only render and index part of your pages, they can cause even more trouble as they can be interpreted as thin content or spammy pages. That’s why render ratio is such an important concept that, sadly, doesn’t get too much attention.

In today’s article, we’re going to explore why partially rendered pages happen and how to fix them without complicated workarounds.

What are Partially Rendered Pages?

Partially rendered pages are web pages that Google can’t render completely due to crawl budget constraints, poor critical rendering path optimization, or many more technical SEO variables.

As the name implies, Google can render and (sometimes) index some parts of the page’s content, especially those sections requiring less rendering, like HTML sections.

This puts your site in a tough situation. When your pages are partially rendered, Google is missing essential pieces of content, internal links, and other elements that can help get your pages to rank higher.

However, in most cases, when websites have rendering issues across the board, it’s common for their URLs not to be indexed.

Note: There are also scenarios where your pages appear empty because Google fails to render your pages completely. That said, it’s not common for Google to index blank pages.

Why Does Partial Rendering happen?

There are many reasons for partially rendered pages. Some might have to do with your website, while others might be due to Google’s limited resources.

Here are some of the most common reasons for this:

1. You’re blocking critical resources through your robots.txt file

It’s a common mistake to stop Google from accessing JS, CSS, and other files to “save crawl budget.” The idea behind this is to force search engines only to crawl HTML files – which is where the content is for most sites.

But for sites using JavaScript frameworks or injecting dynamic content to the page, this means Google won’t get the necessary files to build your page correctly and miss all that extra content.

For single-page apps (SPAs), it is even worse. If Google can’t crawl JS files, it’ll see all your pages as blank files because there’s no content on the HTML template before JavaScript is executed.

Resource: Robot.txt SEO: Best Practices, Common Problems & Solutions

2. Poor JavaScript Optimization

Google needs more resources to render a JavaScript page than HTML static ones. This is a fact, and there’s no way around it.

It also means that your crawl budget suffers the consequences.

If you are not using your crawl budget efficiently and helping Google as much as possible, Google will probably deplete your crawl budget before rendering the entirety of your page.

That’s because JavaScript is resource-intensive and render-blocking, so before the crawler deals with it, it can’t move to the next step and render the rest of the page.

So, optimizing rendering and JavaScript, as a whole, is fundamental.

Resource: Why JavaScript Complicated Indexation

3. Google thinks some sections are not important enough to render

This is still a theory – like many things in SEO – but is being supported by some experiments run by Onely. In this experiment, they noticed Google tends to ignore certain parts of a web page layout based on their location – no matter if it was pure HTML and CSS sections.

Onely experiment on crawling

To summarize the study, they found that Google is trying to determine which sections contain the page’s main content to index and ignore some others, potentially to save resources and be able to index as much critical content as possible.

How can you plan your site’s architecture if Google randomly ignores sections?

This is a tough one, but it’s also a reality.

If we have to summarize why Google struggles with JavaScript, it’s because JS just is much more demanding than static HTML.

Onely statistic on rendering resources

Source: Onely

Dynamic content takes up to 20X more resources to render than plain HTML – no wonder Google is looking to cut some corners.

How to Test Your Page’s Rendering

Let’s focus on the two most straightforward ways to test your website’s rendering to see your content as Google does.

1. Test Your URLs Using Search Console

The first strategy is using the URL inspector within Google Search Console (GSC).

Google Search Console URL inspector

Submit the URL you want to test and click on “TEST LIVE URL” on the right side of your screen. 

Testing Live URLs in Google Search Console

It’ll request your page, as the standard crawler does, and provide details about your page.

Page indexing results in Google Search Console

After the test, click “VIEW TESTED PAGE” to see the details of your rendered page.

View tested page in Google Search Console

It’ll show you the HTML rendered, a screenshot of the page, and details like HTTP response and JavaScript console messages.

All of this information is useful, but in this case, you want to look at the screenshot and the HTML fetched.

Example of tested page in Google Search Console

The screenshot will show how much of the page is rendered before the test is completed. There’s a good chance it won’t take a screenshot of your entire page but don’t worry.

What matters the most is that the above-the-fold content is completely rendered, and the layout works appropriately. If you are seeing missing content or layout issues at this stage, it’s time to optimize your critical rendering path to prioritize above-the-fold content.

Note: If your above-the-fold content isn’t rendered, there’s a big chance the rest of your content isn’t as well.

The next thing to check is whether or not your content is within the rendered HTML.

We’ll take the following sentence from our FAQ section for this example.

Prerender FAQs

This section’s content is hidden and doesn’t appear on the screenshot, so it’s a good candidate for the test. That said, you should copy a fragment of text that’s only visible after JavaScript is executed. If you can find it, then Google can as well.

JavaScript code - evaluating TTV

Do this for every page type or template you’re using, and you’ll be able to determine how much of your page is being rendered and what sections aren’t.

2. Using Google Search

Here’s a little trick you can use to see if Google is indexing a piece of text or not. Navigate to Google and use this formula for your search

site: www.yourdomain.com “the text you want to search for”

Note: Use the version of your site that’s getting indexed. In our case, using the “www” will return nothing.

Here’s an example using the same text fragment as before:

Indexed fragment

This means that Google has rendered and indexed the fragment.

Fixing Partially Rendered (and Empty) Pages the Easy Way

To fix partially rendered pages, waiting for Google to do something about it shouldn’t be your first approach. Instead, you must solve the JavaScript dilemma.

1. Site Optimization is Critical

Creating the perfect conditions for Google to crawl, render, and index your pages properly requires a solid technical SEO foundation, clear site architecture, and UI/UX design to:

  • Ensure content loads fast
  • URLs (even deep ones) are easy to find
  • Provide the best user experience possible

Here are some resources you can use to guide your efforts:

These optimizations will do more than help with rendering. They’ll help you make Google fall in love with your site – which is super important for your SEO campaign.

However, that’s the hard part. The easiest part – and most impactful – just takes a couple of hours.

2. Use Dynamic Rendering with Prerender

Prerender is a plug-and-play solution that takes complete care of the rendering process for search engines just by installing the middleware that matches your website’s tech stack and submitting your sitemap through your dashboard.

From there, Prerender will crawl your pages, generating and caching a fully rendered and functional snapshot of them. When a search bot requests one of these pages, Prerender will send the 100% ready-for-indexing snapshot, removing the barrier of JavaScript from the root.

Prerendering process

Because the snapshot is fully rendered (including 3rd party scripts), your pages will gain near-perfect page performance scores (including core web vitals) and a server response time of 0.03s average.

No more rendering limitations holding your site back. Google will be able to index 100% of your content every time.

Learn how Prerender works in more detail.

Wrapping Up

You can also try DIY strategies like server-side rendering (SSR), static rendering, and hydration. Each approach has its own strengths and weaknesses, but is worth trying if you want to build a solution yourself.

Check our comparisons page for a detailed breakdown if you want to know how Prerender compares to other solutions. Still, here’s a quick overview for those in a hurry.

If you want to go the easy route and get your pages indexed in just a couple of weeks with near-zero development time, try Prerender for free for the first 1,000 renders.

See you in the SERPs!

Picture of Prerender

Prerender

Table of Contents

Ready For Growth?

Prerender turns your dynamic content into ready-to-index pages search engines love. Get started with 1,000 URLs free.

Prerender’s Newsletter

We’ll not send more than one email per week.

More From Our Blog

Learn how to optimize your job board's crawl budget to ensure that your job listings are indexed quickly....
Learn how to optimize meta tags, including meta titles, Open Graph tags, and Twitter Cards.

Unlock Your Site's Potential

Better crawling means improved indexing, more traffic, and higher sales. Get started with 1000 URLs free.