Google’s Lighthouse Audit Tool is great for evaluating the performance of a site and for confirming just how awesome static sites created with GatsbyJS + React can be.
A common point reduction seen by Gatsby developers is: Does not provide fallback content when JavaScript is not available, with the description: “The page body should render some content if its scripts are not available”.
This post is here to help you resolve that and get one step closer to a perfect score.
The audit requirement
Google explains: “Your app should display some content when JavaScript is disabled, even if it’s just a warning to the user that JavaScript is required to use the app”.
One might think that React Helmet offers a potential solution, however it’s not applicable in this case. Helmet is specifically a document head manager and even though <noscript> tags are valid inside a document head, the audit rule specifically refers to the page body.
Adding tags to the page body above Components injected by Gatsby
Copy html.js from .cache/default-html.js in your Gatsby project folder to your src/ folder, renaming it to html.js:
cp .cache/default-html.js src/html.js
html.js will now take precendence over Gatsby’s boilerplate version.
Open html.js. Between {this.props.preBodyComponents} and before the <div> that contains Gatsby’s body components, you can insert a tag such as:
<noscript>This website requires JavaScript. To contact us, please send us an email at: <a href="mailto:email@example.com">email@example.com</a></noscript>
Voila, one more checkbox on your Lighthouse audit results!
For more information about html.js see: https://www.gatsbyjs.org/docs/custom-html/