Fetch as Google - Googlebot (desktop) not rendering page correctly

Question

I'm having an issue with getting Googlebot to correctly render my webpage(s).

It's rendering the header and one "row" of my page (just the page's top background picture), and then failing to render anything beyond that, not even the footer, missing about 3/4 of the page.

My site is www.runparis.fr and screenshots of the rendered fetch are attached.

Other potentially relevant information includes:

• The code that was fetched is missing nothing
• The fetch status is complete (no missing resources)
• The problem is site-wide; it happens on all my pages
• When I check the cache the whole page is rendered perfectly
• Fetch as Google (mobile) renders the site perfectly
• The site looks fine in any of my browsers
• There's nothing funky going on in my page; It's just background images and text. Easy stuff.

My questions are:

• Will google's inability to render the page have an impact on how Google ranks it?
• Is there any advice for solving the problem and having google render the page correctly?

Thanks for any help or advice anyone can offer! Googlebot render 2

Edit: I've done another Fetch as Google and render for a test page and found that Googlebot will stop rendering after it has rendered any background images that I've set to "full height" in my page builder in my Wordpress installation; that is, any image that is set to take up the full height of the browser window kills the render.

So, it will render everything until it hits this image, renders that, and then stops.

As stated before, my page isn't fancy; It's just simple background images and text. It surprises me that Googlebot has trouble rendering what any browser can render perfectly, especially given the simplicity of the pages!!

So, my questions are:

• Will Google not being able to render my page impact the way Google ranks my site? (given that what's in the cache renders fine on my browser)
• And, Is this a common problem? Are there any fixes that will let Google render my pages correctly?

---

Some new information supplied by an external source:

"validator.w3.org/nu/?doc=http%3A%2F%2Frunparis.fr%2F"

"jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frunparis.fr%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"

The various errors and warnings might explain why rendering is hampered in some tools such as Google Fetch and render. Browsers are much more forgiving than all these validation and rendering tools. I'm guessing that in Google's rendering tool the css rules that set the background image(s) and foreground image(s) and text content are being applied in the wrong order so background stuff ends up on top of foreground.

Does this new information help anyone understand why Googlebot would be having trouble to render the page?

Answer 1

I have experienced the same problem, the only viewable thing on the renderer was the hero section, and it was caused with defining height:100vh; for the hero section.
This problem occur when using vh css units, or in some cases height:100%;

Here is the thread and discussion that really helped me out to understand the issue:

I believe that the google bot is doing this:
1. Looking at your website with a 1024x768 viewport.
2. Checks how tall the window.scrollHeight is
3. Resizes it's virtual browser to be the same height as the window.scrollHeight
4. Takes a screenshot and
5. Checks to see what elements are visible, and tallies SE score as appropriate. (Dinging content that is not visible.)

---

I partially solved this issue with inserting extra rules into mediaqueries:
So for resolutions around 1024px width, I put max-height:800px; (rule height:100vh; stayed active) on my hero section,
and on mediaquery for rules around 1280px width and up, I set max-height:none; (rule height:100vh; is active).

I'm still loosing around 30px of height in the renderer, but that's being cut off at the end of the page, with no text and any meaningfull content.