How To Test Your Website With JavaScript Disabled

Testing your website with JavaScript disabled can help you provide a better user experience.

In this article we'll explain why testing your website without JavaScript is a good idea and explain different approaches you can take to test your website with JavaScript disabled.

Why test your website without JavaScript?

Most websites today use JavaScript to enhance their content, or even to render all page content in the case of single page applications.

So why test your website without JavaScript?

• It helps you understand how JavaScript is impacting your page speed
• It can help with indexing and improve SEO
• Some users have JavaScript disabled for privacy or security reasons

You may find that some of your content depends on JavaScript and doesn't appear with out. Here's are two screenshots of the same website, one with JavaScript enabled and the other with it disabled.

How to disable JavaScript with Chrome DevTools

One easy way to test your website without JavaScript is by disabling JavaScript execution in Chrome DevTools. Here's what you need to do:

1. Open the website you want to test
2. Right-click on the page and select Inspect
3. Press Command+Shift+P on Mac or Control+Shift+P on Windows
4. Type Disable JavaScript in the search field
5. Press Enter and reload the page

For example, if we follow these steps on the Youtube homepage this is what we get:

If you don't want to remember the shortcut for the DevTools Command menu, you can also click the top left Gear icon top open settings and then look for the Disable JavaScript checkbox in the Preferences tab.

Use a browser extension to disable JavaScript

Another way to disable JavaScript is to use a browser extension like NoScript. This extension works in Chrome and Firefox.

NoScript lets you decide whether JavaScript is enabled or disabled by default, and you can choose to block or unblock specific websites.

Showing fallback content with the noscript HTML tag

What can you do if your website doesn't work well without JavaScript?

Setting up server side rendering is a good starting point if content isn't showing up.

If parts of your website require JavaScript you can use the <noscript> HTML tag to show a message to visitors explaining why this part of the page isn't working.

<script src="app.js">
<noscript>
This part of our website requires JavaScript.
</noscript>

Can you make a single page application work without JavaScript?

You can provide an SPA-like experience without JavaScript by using cross-document View Transitions. This helps provide a seamless transition between page navigations. If you need to manage state between pages, you can try using URL parameters and cookies, which can both be used on the server side.

Alternatively, you can use same-document View Transitions which continues to provide a smooth transition between page navigations, but with a thin layer of JavaScript to manage the state.

Trying to optimize your website?

Having a fast website and providing a good user experience helps your website rank higher in Google and convert better.

DebugBear is a monitoring tool that keeps track of your website performance, provides insights on how to improve it, and alerts you when something goes wrong. Start a free trial!