惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Full Disclosure
WordPress大学
WordPress大学
小众软件
小众软件
Cloudbric
Cloudbric
AWS News Blog
AWS News Blog
腾讯CDC
量子位
人人都是产品经理
人人都是产品经理
大猫的无限游戏
大猫的无限游戏
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
Vulnerabilities – Threatpost
Scott Helme
Scott Helme
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
The Hacker News
The Hacker News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
IT之家
IT之家
Jina AI
Jina AI
Attack and Defense Labs
Attack and Defense Labs
S
SegmentFault 最新的问题
Simon Willison's Weblog
Simon Willison's Weblog
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
Last Week in AI
Last Week in AI
博客园 - 【当耐特】
Google Online Security Blog
Google Online Security Blog
美团技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
Visual Studio Blog
罗磊的独立博客
L
LINUX DO - 最新话题
博客园 - Franky
博客园 - 叶小钗
Apple Machine Learning Research
Apple Machine Learning Research
The Last Watchdog
The Last Watchdog
J
Java Code Geeks
AI
AI
C
Cisco Blogs
酷 壳 – CoolShell
酷 壳 – CoolShell
C
Cyber Attacks, Cyber Crime and Cyber Security
Cisco Talos Blog
Cisco Talos Blog
博客园 - 三生石上(FineUI控件)
雷峰网
雷峰网
Help Net Security
Help Net Security
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
云风的 BLOG
云风的 BLOG
I
Intezer
S
Securelist

endtimes.dev

Happy new year | endtimes.dev why lowercase letters save data Practical betterments | endtimes.dev Short posts and some site updates Input Output | endtimes.dev Actually, dark mode can save the planet Why your website should be under 14kB in size HTML and CSS only multiple color scheme picker An HTML and CSS only dark-mode toggle button. you can use css to remove the double-tap zoom feature on iOs Missing Dice | endtimes.dev Can Dark Mode Save Battery Life and Human Civilzation? Your DNS has a significant impact on site speed. Add spaces to the dock on MacOS You can leave out <html>, <head>, and <body> tags. Listen for changes between dark and light mode with javascript Use a keyboard shortcut to quickly toggle light and dark mode on MacOs. Why Your Website Should Use Dithered Images You can restore the startup chimes on MacOS Emoji Clipboard | endtimes.dev You can use Emojis as Favicons .dev and HSTS preload | endtimes.dev Prod — Block Distractions. Achieve your goals. Pattern generator | endtimes.dev Green Quarantine | endtimes.dev Qwitter Bot | endtimes.dev
Why your website should work without Javascript.
2021-03-17 · via endtimes.dev

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. ES6 on an old version of internet 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 CDNSky 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 javscript too.

Who does this?

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,376 users 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.

published
17 Mar 2021
modified
17 Mar 2021
author
Nathaniel
tags
posts post a11y javascript web performance