The five-year-old site wasn’t terrible, certainly not. But over the last few years browsers have improved dramatically, Internet Explorer has been laid to rest, and web developers can finally make use of modern HTML, CSS and media types.
These new possibilities are a pleasure to both work with and to measure the results of. In this article you can read about the improvements we achieved and the tools we used. All screenshots appear in English, but the interface is of course in Danish for writers and editors who prefer this.
Significant reduction in the website’s climate footprint
According to the Website Carbon Calculator, the old site was “cleaner” than 51% of the websites measured, which can be considered average. The new site hits 95%. It is therefore among the most climate-friendly websites tested by the Website Carbon Calculator.
Potential annual CO2 reduction
What does this mean in terms of CO2 reduction? For example, 10,000 monthly page-views reduce CO2 emissions from 108 kg to just over 5 kg.
Before
0kg CO2 yearly
After
0kg CO2 yearly
The measurements were taken on the front page, and although it is laid out differently in the new and old versions, it contains the same information; a menu with search box, a list of recent news, a footer with navigation and contact details – all standard. Yet the site is significantly lighter.
Technical methods for a leaner website
The amount of data transported from the data centre to the phone when visiting the Ehlers-Danlos website today has been reduced to ¼. This has required a wide-ranging effort. There is a lot to be gained in these and other areas:
- Switch to the WordPress core block editor, also known as Gutenberg, instead of Divi.
- Use of modern media formats such as WebP and WebM.
- Dynamic loading of assets, e.g. contact forms.
- Careful compression of assets, including PDF files and fonts.
- Local assets only, so no Facebook or Twitter embeds.
Optimizing the website as much as possible, making it use as little energy as possible, is the first and most important step on the road to a sustainable website. We work with a budget for the size of each page. An ambitious but achievable goal is a maximum of 500 KB per page.
Why choose a green hosting?
Digital is physical. Data in the cloud is not floating around somewhere up in the sky, as many actually imagine. Websites reside in a data center with very tangible computers that are always on 24 hours a day.
231 million trees would need to be planted to deal with the pollution caused as a result of the data US citizens consumed in 2019.
Gerry McGovern – World Wide Waste
These data centres use huge amounts of power. So does the network of routers, cables and antennas that move data from the data centres and down to your phone when you visit the website.
Therefore, it also makes sense to ask some environmental questions when choosing a web hosting provider:
- Is the web hosting powered by certified green energy?
- Is the web host physically located close to the website’s primary audience?
- How green is the electricity in general in the countries the data passes through to reach the target audience?
Choosing a web space powered by renewable energy is the second big step on the road to a sustainable website.
Swedish electricity is greener than Danish
Electricity Maps shows the current climate footprint of countries’ energy production. This depends of course on wind and weather, but the general picture is that Swedish electricity is 8-10 times greener than that from both Denmark and Germany. Many excellent web hosts use data centres in Germany or the Netherlands. But if the goal is to minimize the climate footprint and the primary target audience is Danish, then a Swedish web hosting company is a better choice.
Green hosting certified by The Green Web Foundation
With the above considerations and of course a number of technical requirements in mind, we have chosen to host our websites with Oderland in Sweden. Oderland has an active environmental policy, is labelled “Bra miljöval” by Göteborg Energi and is a certified partner of The Green Web Foundation.
Continuous monitoring of the website’s climate footprint
To encourage efforts to maintain a minimal climate footprint, we continuously monitor our website’s CO2 emissions with EcoPing. That way, the numbers don’t spike suddenly without us being aware and able to take action. Moreover, the measurements are one of the foundations for a qualified carbon offset.
CO2 offsetting and … trees!
The third and final step towards a carbon-neutral website is carbon offsetting. Like thousands of other companies, we have chosen B-Corp certified Ecology for this. Their climate efforts are two-fold: one is planting trees, and the other is financially supporting climate solutions offered as carbon offsets.
Newly planted trees are years away from capturing the necessary amount of CO2, but are one of the best things we can do for the environment, climate, and biodiversity in the long term. That’s why tree planting projects are combined with investments in climate solutions that make a difference here and now.
Are you sceptical? Good. You can read much more about Ecology’s work at ecologi.com/faqs
Calculation of annual CO2 emissions and the necessary compensation
To make sure we get the full picture when calculating how much to offset, we look at the total traffic of our web hosting. This includes traffic that occurs during development, deployment, backups, emails, etc.
At the time of writing, the annual emissions are calculated at around 200 kg of CO2.
We offset this by at least 500%. So at the time of writing, we have purchased 2 tonnes of offsetting and planted 50 trees.
Is it enough? No. It won’t save the world. But it is a real attempt to accept responsibility for the climate footprint we leave with the products we create.
Please contact us for details of calculation methods and recommendations.
Web accessibility – inclusion of all people
It goes without saying that a patient association for people with chronic conditions, including significant mobility impairments, needs a website that is accessible to everyone and meets formal requirements for web accessibility.
WebAIM Web Accessibility Evaluation Tool
Wattspeed, mentioned later, is fine for quickly detecting if there are problems with web accessibility. If there are, we can use WebAIM WAVE to pinpoint exactly where bugs are. These are typically missing ARIA labels, fields that cannot be navigated to with the keyboard, missing captions, text that is difficult to read due to small size or low contrast.
Ongoing web accessibility check in WordPress
Testing for web accessibility after publishing is fine, but also easy to forget. That’s why we use a plugin, Accessibility Checker, to check up to 40 common accessibility guidelines every time an article is saved. The results are displayed directly in the editor, so you can fix problems right away.
Using screen readers
Once the website has passed HTML5 and synthetic WCAG tests, we test on-screen text reading with a screen reader. People with blindness use advanced programs like JAWS or NVDA, but using Microsoft Windows’ built-in speech synthesis and the Edge browser, we can get an impression of how the site works when read without having to install additional software.
Below is an example. It should be noted that the voice “Microsoft Helle” sounds quite synthetic. The professional tools often have a more natural voice.
Respect user privacy and GDRP compliance
It’s entirely possible to develop a WordPress website with respect for user privacy. Essential considerations for any website are whether you really need to collect data about the user, and do you have to share it with anyone. As a rule, the answer is no.
On the new website, we respect user privacy with:
- Cookie-free zone. No cookies, no annoying (and usually pointless) cookie pop-ups.
- Support for WordPress’ built-in data insight and deletion tools.
- Built-in visitor statistics with Matomo. No data sharing with e.g. Google.
- All assets, i.e. images, fonts, scripts etc., are hosted on servers in Europe.
- Secure email delivery with TLS encryption and DMARC/SPF/DKIM records.
Matomo Analytics – a GDPR compliant alternative
When statistics are desired on our websites, the backbone reaction is often to connect the site to a Google account and let Google Analytics (GA) collect data on visitor behaviour. This information is valuable, especially to Google, which in turn provides GA free of charge.
Instead, we use Matomo Analytics, which gives us 100% ownership of visitor data and the ability to protect user privacy with IP hashing, Do No Track compliance, cookie-free statistics and GDPR tools. Matomo is used by the UN, Amnesty and the EU, among others.
Insight into and deletion of personal data in WordPress
WordPress has built-in tools for exporting and deleting personal data. Personal data can be, for example, contact information entered in an event registration. When we choose third-party plugins, for example for contact form, newsletter or events, we make sure that the plugin hooks into these tools so that we have one well-functioning entry point for GDPR compliance.
Performance and usability
It is most convenient to identify and correct errors on the site during the development process. If we discover a problem with a theme or plugin, we engage in dialogue with the developers. They are always interested in fixing the bugs, not just for us, but for all the often thousands of users.
Wattspeed by Advanced Web Ranking
The Wattspeed browser extension for Firefox and Chrome displays Google Lighthouse scores, validates HTML5, tests for mobile-friendliness and web accessibility – all at the touch of a button. With Wattspeed, it’s therefore really easy to get a quick impression of whether your site is functioning as intended.
Google Lighthouse
With Lighthouse, we go deeper into Google’s recommendations for Performance, Accessibility, Best Practices and SEO. All these parameters have an impact on the user experience and therefore search engine rankings. The new website passes all Google Lighthouse tests.
Author- and editor-friendliness with Gutenberg
Usability is not only about providing a good and intuitive experience for the visitor, but equally about making life easy for those who maintain the website on a daily basis. The typical board member is not a web developer.
Instead of a complicated page builder as previously used, we now use WordPress’ built-in block editor called Gutenberg. This gives us several advantages:
- A very simple interface for writers to work in.
- Enormous flexibility in terms of choice of theme and styling.
- Possibility of semantically correct HTML and good web accessibility.
- A wide selection of integrations for instance form tools.
- A strategically sound choice for future development.
Below are examples of how simple the block editor can be for writers, and how the list of posts can be customised to show just the information needed.
Safe and reliable operation and monitoring
A robust website should always be available. The Ehlers-Danlos website is manageable – after all, it’s a relatively simple site for a few thousand members. What interest would a hacker have in that? Bots on the web don’t care who you are. A website is a resource that – if compromised – can be used to spam, spread malware, mine bitcoins, harvest data – the sky’s the limit, and hackers’ imaginations are obviously not failing them.
We ensure a stable and predictable operation of the site with:
- Always updated WordPress core, LiteSpeed web server and PHP 8.
- End-point firewall with Brute Force Protection and two-factor authentication.
- Two independent, automatic backups.
- Logging of administrative actions, e.g. logins and installation of plugins.
- Monitoring of up- and response times.
Summary
With the new website, the Ehlers-Danlos Association and we have fulfilled our wishes for an effective, easy-to-use and long-lasting solution.
With a sustainable design, we meet multible goals, as leaner websites perform correspondingly better.
When we comply with web accessibility recommendations, the site becomes easy to use for all visitors – not just people with disabilities.
We don’t store unnecessary personal data about the visitor, we avoid cookie pop-ups, and we honor requests to access or delete personal data at any time – that’s privacy by design.
All plugins used and the theme are open source and available on WordPress.org.
