gatsby: Google Mobile-Friendly Test Failing for Gatsby with no CSS via styled-components

I am using Gatsby + styled-components for my new VSCode course site. Everything looks fine on Desktop/Mobile but Google Mobile-Friendly test is failing miserably. Which is costing me SEO and more.

I am out of options, searched about it and didn’t find anything. I think I added the webfontloader plugin since then I started having this issue. But not sure. I’ve since removed it. Any help would be appreciated.

image

This is what I see on Google’s Mobile-friendly test.

image

Steps to reproduce

Here’s the HTML in case you need it to test. I opened this HTML up and yes, there is actually no CSS to be found. Click this raw file, it’s huge so not adding it here.

Expected result

CSS should be loaded by Google Mobile-Friendly test it is not at the moment. I am out of options so creating this issue to get some pointers on what to do. This is what the site should look like.

image

Actual result

CSS is not loaded 😦

image

Even if I try loading this HTML that I got from Google Mobile-friendly test, this is exactly what I see. No CSS.

image

Environment

 System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - ~/.asdf/shims/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.asdf/shims/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 57.0.1
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.44 => 2.0.44
    gatsby-cli: ^2.4.6 => 2.4.6
    gatsby-image: ^2.0.20 => 2.0.20
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7
    gatsby-plugin-manifest: ^2.0.8 => 2.0.8
    gatsby-plugin-offline: ^2.0.13 => 2.0.13
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
    gatsby-plugin-sharp: ^2.0.12 => 2.0.12
    gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
    gatsby-source-filesystem: ^2.0.8 => 2.0.8
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8
  npmGlobalPackages:
    gatsby-cli: 2.4.3

Looking forward, peace! ✌️

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 24 (21 by maintainers)

Most upvoted comments

Most of the Google testing tools are now updated to use Googlebot evergreen rendering so try running your site through the testing tool again @ahmadawais.

Thanks Martin (@AVGP) for the comment above. Any other latest Googlebot updates you can provide?

Hey there, I’m looking at the issue now as well. A few notes:

  • Googlebot (and thus, mobile-friendly test and other testing tools) aren’t using service workers. PWAs are great but users coming through search results might be first-time users, so Googlebot ignores service workers, but they won’t break your site or CSS as they are ignored.
  • The testing tools haven’t been updated to the latest Chrome renderer yet, so they still run Chrome 41. We are working on fixing this, but maybe this causes trouble here?
  • The mobile-friendly test tool is unfortunately a little flaky sometimes, we also work on resolving that as quickly as possible.

@ahmadawais dustin at gatsbyjs dot com

You can’t have a look at the “real” source code via Site source. You’re seeing the content served from the Service worker (Ref: https://github.com/gatsbyjs/gatsby/issues/10017#issuecomment-439946657).

Do a curl https://www.vscode.pro and you’ll see the styling tags filled.

Just add the netlify plugin, no options needed