Although most of my work is pagespeed-related, I also like to address web accessibility and carbon emission when doing R&D for our website-producing CMS.
Obviously, fast and performant webshops and websites, also means the inclusivity will increase. Less load, is more reach. Even people experiencing slow internet speeds will receive a fast First Meaningful Paint, in such a way that you enable them to start reading early in the loading process. They are more likely to wait for the page to be fully loaded.
Obviously, you still want to reduce the amount of resources. And when someone is on slow internet, we let the website adjust the amount of resources on the fly, as I wrote about before in the blogpost.
No Javascript
I like to build websites in a robust way. Even when visitors have JavaScript disabled, they can still use all critical functions, such as (mobile) navigation, search functionality, (contact) forms and obviously all hyperlinks. Even the layout will stay the same, but just less enriched and thus with less functionality.
Disabling JavaScript
Reasons why users could be surfing the web with JavaScript disabled:
- policy of the organisation (in 2019, some UK government departments were still navigating the web with JavaScript disabled);
- because of privacy reasons (prevent tracking by Google, Facebook or other platforms);
- because of security reasons (prevent form jacking or other ways of stealing your information);
- because of user agents, which don't support JavaScript / don't have a JavaScript engine.
Want to test the non-JavaScript compatibility of your website? When in Chrome, press F12 to open Chrome DevTools, press Control+Shift+P to start searching for "JavaScript", and then click "Disable JavaScript". JavaScript will only stay disabled within that browser-tab.
Web Content Accessibility Guidelines
So, improved pagespeed means more inclusivity and thus increased reach. But that's not all to it when it comes to web accessibility. To also provide an accessible website towards the visual (such as bad sighted or blind users) or motor impaired (for example, persons with Parkinson disease), the content, technique and UX are even more important.
We didn't only configure the CMS that affiliated agencies are using, to produce semantic HTML, but the websites build with the CMS are also providing users with options to change the website behaviour. You could think of:
- Reducing animations to prevent triggering epileptic attacks;
- Change color contrast to high, so text on images or background-colors become more readible if not already the case by default;
- Change theme to dark-mode, where text will become light-grey or yellow (also adjustable) on very dark gray background-color;
- Save data and bandwith, because of:
- slow internet connection;
- enforcing optimal speed;
- limited bandwith within internet plan;
- being abroad, paying per downloaded MB;
- environmental considerations.
Auto detect user preferences
The best part of all the mentioned options, is that they are auto-detected as well. Users are able to change browser-configuration and let websites know what their preferences are.
When websites -build with our CMS- is detecting these preferences, then these options will be set by default. Obviously, users are able to overwrite them for this very website, while maintaining their default preferences for other website visits.
If you want to see this in action, have a look at my own or this medical website which was build with the CMS I am offering agencies to create websites with.
Save-Data mode
From user perspective, Save-Data mode is a setting which can be used for several purposes. If you are committed to carbon emission and the environment, you can enable the Save-Data mode, sometimes called Lite mode, within your browser settings.
If you are in area's where you have to pay per megabyte, for example due to your type of internetplan, or if you typically have slow internet connection, you could enable Save-Data.
The downside? Only few agencies are building websites that support this user-preference. Although not all visited websites will respect this and thus lower the amount of resources, I hope to see more agencies following this example and implementing this feature.
Documentation and Add-ons
If you are building websites as well, you can read more about Save-Data on the mozilla developers page.
Mozilla (and likely other browsers as well) that don't have this setting by default (yet) are often offering an addon. You can find the mozilla addon to enable Save-Data on mozilla.org as well.
