Performance and 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.
How could this be solved?
There are a couple of ways to avoid your site ending up in this predicament:
Other ways to improve site performance & accessibility
- 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.
- The unreasonable effectiveness of simple HTML - A reminder that not all visitors to our websites will be on the latest smartphone or laptop.
- What Does My Site Cost? - Find out how much it costs for someone to use your site on mobile networks around the world.
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.