Recently I started a site of tools for boardgames players. Simple tools like dice and spinners.
I wanted the site to be as accessible as possible. So I challenged myself with some rules on how it would work.
One rule was that every tool must work without javascript.
I learned a lot by doing it, and started to write posts about building tools without js. But before I write any more I wanted to answer the question:
Why in 2021 would you bother making a website without js?
While researching this post I found two really great sources of information. So, most of this is going to be stolen from this article by Adam Silver and this post from gov.uk.
But I'm going to go a little deeper into why some people block js.
The obvious answer to why you should build a website that doesn't need js is… because some people don't use js. But how many?!
How many visitors don't use javascript?
The answer to this question is roughly 1%.
There's not a lot of information on this but here's what I found:
- A 2010 study by yahoo suggests
1.3%– web.archive - A 2013 study by gov.uk suggests
1.1%— gov.uk - For buzzfeed in 2018 it was
1%— youtube
1% sounds like a lot! is it really possible 1 in 100 people block javascript? well...no
The 1% from these studies is 1% of visits where javascript has failed for any reason.
According to gov.uk the number of people who actively block js (or use a really really old browser) is 0.2% — 1 in 500.
Those 0.2% have their reasons, but first let's look at the 0.8% of visits where the js fails.
Why does javascript fail?
There are lots of reasons your site's javascript might fail:
- Your javascript is broken! It happens.
-
A feature you're using doesn't work on an older browser. e.g.
ES6on an old version ofinternet explorer. - Inteference from a browser extension. Some web-extensions alter your site's code - with negative effects.
- Network Errors. Sometimes things just break.
- Mobile users losing signal - e.g. from being in a rural area, going through a tunnel, falling down a manhole, etc
- Some browsers block javsacript on slow connections. — Android does this
- CDN going down. in 2017 AWS went down for 3 hours
- Corporate or local blocking or stripping of Javascript. Sometimes organizations block javascript for security reasons.
- ISPs accidentally blocking your CDN — Sky Broadband once blocked jQuery
- mobile networks altering your content and breaking it — T-mobile and Orange also broke jQuery!
There's probably other reasons too.
That accounts for about 0.8% of visitors not using Javascript
But what about the 0.2% who block js?
Why do people block javascript?
Some people block javascript in their browser. Some people choose a browser that doesn't support javascript. There are a number of reasons why:
- Accessibility
- Security
- Privacy
- Cost
- Bandwidth
- CPU
- Battery
- are stuck with or prefer an very old or text-based browser
- they just like the web without javascript.
Accessibility
Some people find it easier to navigate the web with javascript switched off. There's less distractions.
Others choose text-to-speech browsers that don't support js.
Text-to-speech can work fine with javascript. For instance voiceOver on MacOS works within any browser.
Security
Many people disable js for security reasons, both professional and personal. No javascript means no malicious javascript too.
Who does this?
- People who work with sensitive or valuable data.
- Journalists and whistleblowers. Edward Snowden recommends switching off js
- Cautious people who don't want to get their credit cards stolen.
Privacy
Lots of people don't like corporations collecting their personal data. You might block ads, and tracking scripts.
Some people take that a step further and block all javascript. Then, if they trust a site, they'll allow it to run.
Cost & Bandwidth
Blocking javascript can save a lot of money.
Downloading d3.js (a popular graphing library) costs 1 cent in Canada. In Mauritania it costs 0.06% of the average daily income.
That's may not seem like a lot. But d3.js is only 90kB — and only one of many scripts someone may have to download to use a site.
Then javascript can request all kinds of data, images, video, and it adds up fast. Once you've visited a few sites you may find yourself over budget.
The same logic applies for people with limited bandwidth.
dev.to costs 24 cents to visit on mobile in canada!
CPU and Battery
Some people switch off javascript to save CPU and Battery.
Users of low-powered devices — or one that's doing more important tasks in the background — may want to take pressure off their CPU.
People without easy access to a power supply may want to save battery.
Out-dated Browsers & Text-based browsers
Very old browsers like IE < 3, Netscape 1, Mosaic, and others don't support javascript. Almost nobody uses these browsers anymore — but you can bet somebody is.
Some text-based browsers like Lynx don't support js. Lynx is a browser that runs in terminal applications. So someone browsing the web on a computer without a GUI may well be using it.
Lynx has been around since 1992 and is still updated today. So people are definitely using it.
Some people just prefer the web without js.
Some people think the web is better browsed with javascript off. It's faster and reduces distractions. See I Turned Off JavaScript for a Whole Week and It Was Glorious - Wired 2015
Should you cater to 0.2%?
Yes and no. Personally, I enjoy going out of my way to make things work. I find all this stuff fascinating. But making sure a site works for the 0.2% of people who disable javascript isn't really the point.
The Curb Cut Effect
An analogy that comes up often when talking about web accessibility is curb cuts. Curb cuts are the small concrete ramps on the side of the road.
Curb cuts we're added to sidewalks after a long campaign from disability rights activists. Their purpose was to give wheel-chair users the same freedoms non-disabled people enjoy.
Now that curb cuts are everywhere — everyone benefits from them. People with strollers, skateboarders, people delvering packages, and more.
The point? Making the world more accessible for one group of people benefits everyone. That's the curb cut effect.
Here's a great episode of 99% invisible about curb cuts.
Building sites that function well without javascript doesn't just benefit the 0.2% of people who disable it.
It improves the 0.8% of vists where javascript fails too.
Building everything you can without js will make your site:
- faster
- smaller – (most of the time)
- more reliable
- more accessible
- have smoother animations
- easier to index by search engines
- less vulnerable to hacks
- easier to develop – personal opinion
I'd prefer to write js all day — but finding html and css only solutions has made me a better developer.
It's forced me to find creative ways of solving problems — and to learn new html and css features.
Then when I do add javascript, it's ends up being a lot smaller and easier to manage.
How to disable Javascript
If you're going to build sites without js you're going to need to test them.
Probably the most popular way of disabling javascript is with the browser extension NoScript — it's available on Google Chrome and Firefox and elsewhere too.
As of writing this noScript has:
-
100,000+users on Google Chrome -
404,376users on Firefox
That's at least half a million people who use that specific app. There are many more apps and other methods of disabling js.
Anyway
Give browsing the web without js a try, or maybe even have a go at using Lynx. Let me know what you think.
Oldest comments (50)
If you want to give
Lynxa go, and you're onmacOShead to your terminal (make sure you've already installed homebrew)then
It's an interesting experience.
FYI: Everyone has JavaScript, right?
Yes, I should have added that to the post. Also by the same guy: Why Availability Matters
You convinced me. Fortunately, my personal website works almost fine without JS, there's still some work to do. Thank you for the article!
Serious question: What do you recommend for js apps? Do you stick a bunch of stuff between noscript tags? Do you steer clear of js apps entirely and stick with server-side rendered content? With the prevelance of React, Angular, and Vue there doesn't seem to be a clean way to accommodate both users of "webapps" and those who choose to go without js completely. Is it all one way or the other?
Depending on the app, the first thing you can do is server-side render it with
next.jsandnuxt.jsforvue. That way at least the static content of the pages is rendered and all the links still work. You can host a server-side only version of Next.js on Netlify (i think).For dynamic content if it's not too complicated, you can stick all the inputs in a form. Then, if javascript isn't present, the user is redirected to a server-rendered version of the content. That's what i'm doing here. But that's very simple application that rolls dice. If javascript isn't present the dice are rolled on a server. It uses the same code on both the client and server side.
There are some things you just can't do without javascript — for those situations all you can do is leave a polite note in a
<noscript>tag explaining what's happened.But most of the web isn't or shouldn't be like that. It's weird that you can't use twitter without javascript — it's mostly just text.
That's my guess anyway, I'm only just starting to learn about this stuff.
I appreciate your detailed response. It's clear from your article and your responses that you've put quite a bit of thought into this topic. I have mixed feelings about it to be honest. On one hand I love the power and capabilities of js and on the other I hate how reliant the web has become on it in recent years. Plus the potential for privacy violation it brings is a huge downside too. I get why many in the FOSS realm hate it.
I'm glad you brought this topic up. It's good to regularly question conventions and expectations otherwise we all fall into the trap of "we do things this way because this is how we do things". It's something I see a lot of in many aspects of life and I hate it.
I don't think anybody is actively blocking the JavaScript anymore, those 1% would be some bots trying to browse using chrome/firefox user agents. And some developers trying to test the website for SEO. The cost of making application without JavaScript for 1% users is too high to consider any revenue from them. For such users you can always tell them to download Electron bundled website.
That's not the conclusion gov.uk came to. They came up with a way of tracking this number not including bot traffic.. Buzzfeed came to a similar conclusion and decided it was worth their time.
To be fair Buzzfeed’s 0.8% of traffic is bigger than most websites 100% of traffic, so it does make sense for them to invest significant resources to rebuild / cater to them . If your site gets 1000 visistors per week, and it’s not a pay-per-use, financially there is not incentives to spend 100s of hours to rebuild your website to cater to 10 people per week
Once you add up all the
0.8%niches everyone belongs to you end up something closer to100%.Everyone belongs to a niche at least temporarily. One could argue that there's no point in catering to people on 2g connections, or feature phone users, or the visually or motor impaired. But when you do make your site welcoming to everybody you may find more visitors show up — and you've improved your site not just for those specific people but for everyone.
Honestly I don't think it's harder to build a site this way, we're all just so used to using javascript frameworks that we think in javascript. html and css are way easier.
Again, I think @konung made right point, you must calculate the money lost in such visitors, for BuzzFeed, Youtube and general social media, it makes sense because to offer server side rendering for
0.8%fits in their budget. For lot of small business applications, there is no enough returns to support SSR.If user cannot even afford to upgrade from 2g to 3g, do you think they will pay for the services you will offer? The calculation is straight forward, for BuzzFeed and social media sites, even 2g user is a target audience because they sell ads and ads are generally targeted to all users for brand awareness.
But for SASS business services or any subscription based services where users will pay to business, non paying users are burden.
Additionally, the Government Digitial Service (and developers across government in the UK, at least) still design their services to be operable and usable without JavaScript. And rightly so - a choice a citizen makes, wether for good reason or not, shouldn't prevent them from accessing public services.
Jusr chiming in here: I am that 1%! I actively block JavaScript on plenty of sites. However, I'm probably not your target audience - specifically, I block JS on sites that use it to do annoying things (playing floating videos, popping up mailing list signup forms, powering floating chatbots that ping me constantly, or auto loading comments or images I don't care about). It lets me filter out the noise so I can focus on the content (I also heavily use Firefox's reader mode). If those things are core to your business model or marketing activities, then yeah, you probably don't want to cater to people like me.
Yes here is the difference, website is what people expect to read, reading and consuming content is one part of website which does not need JavaScript frameworks, but SASS or subscription based business applications where users pay for the service, disabling JavaScript does not work in user's favor. You are competing book with a interactive game.
Sure, no disagreements there - full-blown webapps requiring JavaScript is obviously reasonable, particularly if it's a paid service that isn't going to be needed in a personal emergency. However, if it's a critical service, I truly think it's only responsible to make sure the app works on low-end devices (insurance, medical, counselling, govt., or anything else that someone might need to access in an emergency).
Yet another +1.
+1
I too am that 1%. We might be a minority but I hate it when the websites don't work without javascript. Especially if it is your personal website (this is a personal opinion and you can ignore :) ).
While I understand JavaScript have it's genuine use cases, dumping JS like we are doing now is not very great for privacy, security, accessibility and climate!
Every unnecessary computation is bad for climate. Performance not only equals better UX anymore, it means less emissions and better climate. websitecarbon.com is something I recently discovered which roughly calculates the carbon emission of a website.
While websitecarbon.com shouldn't be used as a strict benchmark, it definitely raises the question on how to create less emissions for websites? The answer most often than not is definitely using HTML and CSS without JS unless and until really necessary.
Imagine just going onto some modern website from a really old or bad device and it's like "download this 150MB+ piece of software just to view the site"...
I like the accessibility points and I do actually know people who turn off their JS. How do you still make things interesting and what are those common workarounds you've used with HTML and CSS?
I would guess a lot of this depends on what kind of site/app you are building, and what the value is that it provides to your customers.
I don't know what percentage of people this applies to, but I don't visit websites (or webapps) for their interesting UIs - I visit them for content (in the case of websites), or some concrete value (in the case of apps - Evernote, Google Docs, etc.). In either case, I would prefer the UI do as little as possible. Things like fade-ins, slide-out sidebars and hover-cards are fun to build, but as a user, I would prefer you skip the animation and just show me the content (otherwise it's just increasing the time I have to wait before I can get to the value I'm trying to get to).
You can do some really wild stuff just css — Stephanie Eckles site moderncss.dev blows my mind.
One workaround I did was a css+html dark mode toggle, i wrote a post on it
Re your accessibility point,
for me is more like, this site could be ok, but someone's gone and replaced all the navigation with some custom scripted stuff that doesn't behave like I expect it to, my tab stops are all over the place, and half the links aren't... links. They're
divelements someone's attached events to because they think it's clever. I see this a lot.If you take the extra time to make your JS-powered site run as well as a generic HTML site, that's ok, I guess, but seems a bit pointless.
Say your bakery gets 250 visitors every day. You sell a lot of pies. Life is good. At the same rates we're talking here, you're turning away a wheelchair user three or four times a week. Or even a couple per day, depending which number I picked. But you're not just saying, "sorry, we can't fit your chair through the door, can I bring you something out?", you're blanking them and talking to other people in the queue. You're saying you don't want them in your shop.
The question I'd put to a lot of designers/developers is, "why did you design this to exclude people?"
100% all of this. Doubly so if your website offers a crucial service that could ever be important to anyone in a time of need who does not have access to high-powered devices (utilities, phone service providers, hospitals and clinics, emergency services, etc.)
Hum, browsers natively support disabling javascript 🤔
Yes, but it’s much easier to use an extension that toggles it for you and remembers your preferences for different web sites. As far as I know Firefox and Safari only have on and off, and you have to navigate to the settings page to do that.
Ah yes, indeed
Seriously, amazing article.
I personally try to make websites work without JS for 2 reasons:
Because, if you can, why not? Firstly, it's a fun challenge. Secondly, it's not necessarily challenging - but definitely requires you to engage at least a few grey cells.
When you build something in an environment-independent or server-side-rendered way, it usually leads to a lot of benefits, such as testability and better architecture, and, hence, better overall development and maintenance experience.
I think it is time to move on from supporting internet explorer 7 and people that aren't using JavaScript. Of course, it won't run if your JavaScript has issues but that is why we have tools like ESLint and TypeScript to make sure errors do not occur.
If people are still using internet explorer 7 and blocking JavaScript. Good luck to them, they should just leave the internet and start living in a cave for all I could care.
I guess there's a slight caveat here though.
In that, if JavaScript isn't available. I don't believe we should do anything to make things work. For example, using things like the "Checkbox Hack". I've fallen into that trap before 😅
But, I definitely agree with the sentiment. And it's often forgotten how far native controls and a bit of styling can take you 💯
but if javascript is disabled, how can the user be blessed by my elite typescript functionality?
Thank you for this article! I have to admit, that when I see someone's personal website which has only two subpages and it loads 4MB of javascript I start to twitch :/
My brother is visually impaired and from my experience websites with massive javascript bloat usually produce many issues with accessibility and are rather hard to debug.
Great article!
In Security a typo:
javscript --> Javascript
Thanks! Sorted.
Well basically you could do enough with css, but i hope you learned something out if this exercise.