Performance & accessibility

In the last couple of weeks, I've been flat out giving my personal website a refresh. Besides a fresh lick of paint, I've also aimed to make content easier to find. In the process, I moved the site from Netlify to Cloudflare Pages. I'm also now using Cloudinary to generate AVIF & WebP versions of my images and then caching those with Cloudflare (to save on my Cloudinary bandwidth). Despite adding more images to the site, I've been able to keep it fairly lightweight by focusing on sustainable design & development fundamentals. Give it a look, I'd love to hear any feedback!

Now, let's get into this week's newsletter.

When you hear the words "web accessibility" what comes to mind? Your first thoughts probably go to screen reader users, or perhaps users who can't use a mouse or keyboard. You wouldn't be wrong there, my mind heads there first too. And that's definitely right, disabled and less-abled users should not be excluded from accessing information, services and entertainment online. There are plenty of lawsuits that have been brought forward to ensure this right.

Accessibility, however, has a broader meaning. We all face situations where websites might be hard to use, or inaccessible. Perhaps you only have one hand free to navigate with on your smartphone. Or, maybe you're trying to access information during a disaster/crisis/pandemic but get shown an error page because the site's experiencing heavy traffic. Maybe you're just on the metro with a variable internet connection trying to book a COVID vaccination. Or you might even be looking up government information online using a PlayStation Portable. Web accessibility even goes as far as ensuring that visiting your site is affordable for your users. A truly accessible website should still be usable - no matter what device you're on, how fast (or slow) your connection is, and no matter what physical state you're in.

A personal experience

I live in Taiwan. It's a country of around 24 million people located off the east coast of China, south of Japan. Recently, it was dubbed the most dangerous place on Earth. Taiwan's situated in a part of the West Pacific Ocean that sees strong typhoon (hurricane/cyclone) activity each Summer. It also lies on tectonic fault lines, so we're no stranger to earthquakes either.

What's this got to do with web performance and accessibility? We'll get there. Consider a typhoon and an earthquake for a moment. Both are large scale, potentially devastating events that impact a lot of people in a very short space of time. In these scenarios, ensuring people have access to up-to-date information is paramount.

Last month we had a magnitude 6.2 earthquake that shook most of Northern & Central Taiwan. When something like this happens, it's natural to want to get information about the event and its impact on your immediate area. For that, I normally go to Taiwan's Central Weather Bureau's website. After that particular 'quake, though, the website was down with a server error (presumably because so many people were trying to access it at the same time). That's not great, obviously. Thankfully damage from this earthquake was limited, and there weren't many aftershocks. But had it been worse, having to search for information because the normal service I rely on was down would not have been a very pleasant experience.

How could this be solved?

The main solution here would be to build pages with critical information as static pages. Real-time data could be fed in via an API. This approach would reduce server loads, and possibly even allow pages to be cached and served by a CDN.

JavaScript & Accessbility

A very small percentage of web users browse with JavaScript disabled on their device. That said, every user is actually browsing without JavaScript until their browser has downloaded, parsed, and executed a website's JS bundle. If the content of your site relies entirely on a large JavaScript file being downloaded first, then you're increasing the chances of that content being inaccessible to your users. If the JavaScript doesn't download completely because the user is on a train with a spotty internet connection, then they might never see your content.

How could this be solved?

There are a couple of ways to avoid your site ending up in this predicament:

  • Most websites have at least a handful of pages that are not dynamic and don't change frequently. Build these as static pages. For the rest of the site, consider building most pages as static "shells" within which smaller JavaScript files can fill in/hydrate the shell with dynamic content.
  • Try breaking down your large JavaScript bundle into smaller modules. These can be loaded progressively. This allows you to prioritise the order in which JavaScript is downloaded, parsed and executed. It will in turn improving the load performance of your site. This means less important areas, like the footer of a page, won't hold up the more important content at the top of the page.

Other ways to improve site performance & accessibility

  • Use HTML. Plain HTML comes with plenty of elements that are easily understood by browsers and assistive technologies. HTML is also much lighter & quicker to parse than JavaScript.
  • When planning your website, don't immediately reach for the new hotness in JavaScript frameworks. Go through your site plan and really ask yourself if you'd lose anything by building a static site instead.
  • Use a Service Worker to deliver an offline version of your site when a user's network fails them. This works best if you have repeat users since the Service Worker will cache the offline page (and any other content you tell it to) on the first visit. If the user returns but is not connected to a network, they'll still be able to access the cached content.



We Ran Tests on Every State’s COVID-19 Vaccine Website
The team from The Markup ran tests to check the accessibility, performance, and privacy protection status of each US State's COVID-19 vaccine website. The results, sadly, are not crash hot.

The next issue of Optimised will be in your inbox on May 28th. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.

As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.