Website and Webhosting

Deutsch | English | Einfache Sprache

DATA COMPASS - INTRODUCTION | END DEVICES | WORK ROUTINES | WEBSITE AND WEBHOSTING | SOFTWARE AND THIRD-PARTY SERVICES | CARBON ACCOUNTING | TECHNOLOGY AND US | LINKS AND SOURCES

Even though not all insitutions or cultural practitioners produce digital cultural offerings, they all run a website, mostly to announce, promote and archive their own projects. Websites are like business cards; they are used to present oneself. The respective website delivers data with each access. Multiple hits on a website thus also entail high data consumption.

For cultural institutions, a website’s visual aesthetics are a key concern. But there are ways to operate in data-saving ways without sacrificing any aesthetic appeal. The Green Web Foundations offer a helpful introduction in the Grid-aware Website Project.

Generally, many best practices for accessible web design also save energy. If we keep it simple and refrain from using data-intensive animations and plug-ins, our website does not just consume less energy but also becomes easier to navigate. A further example is dark mode, where higher contrasts contribute to greater legibility.

When planning a website for a new project, a new initiative or an institution, thinking about sustainable design and efficient programming from the outset can make a big difference. This is called green coding. The term refers to various approaches to simplifying code in order to consume less data and therefore energy. But even on an exisiting website, slight modifications can lead to reductions in data and energy expenditure. The Cleaner Web blog offers a good overview of tips and tricks as well as a checklist on how to make a website more climate-friendly. We will discuss a few of those tips below.

With the Cleaner Web audit and analysis tool, you can conduct a detailed examination of your own website and identify the largest data guzzlers. The Green Web Foundation also offers a tool for developers and programmers to calculate the carbon footprint of their apps and websites[3].

Green hosting

---

If you run your own website, you need to host it on a server. The Green Web Foundation allows you to check whether the server is operated with electricity from renewable energy sources.

Static vs. dynamic website

---

Most cultural institutions use a content management system (CMS) such as WordPress, TYPO3 or Wix to design, maintain and present their website. These dynamic websites are controlled on the server side and work with a database. Since the content is generated dynamically and presented from the server upon each request, they require much more powerful servers.

In general, cultural institutions do not change their websites on a rolling basis or deliver individualised content for each visitor (as opposed to feeds on social media, for instance). In this case, a static website that is not always updated automatically will do. A static website has a predetermined structure and set content. It is programmed with HTML and CSS and does not necessarily require an additional database. When the website is published, the content is unchanged and quickly available. On static websites, the rendering process (i.e. the process that creates the website from raw data) takes place when the content is updated, whereas dynamic websites are rendered each time their content is called up.

Another option is to use a headless content management system to manage content and then have it delivered as a static website. A headless CMS is a backend web content management system that is used primarily as a content repository.

Regardless of which system you choose, cleverly set caches (see the following section on caching) can significantly reduce the ecological footprint. Even with simple pages, a CMS consumes 10 times more energy than a static website. With a correctly configured server cache, the CMS can come close to the energy consumption of a static website with repeated page views.

Caching

---

Caching basically means that data is stored temporarily so that it can be made available more quickly the next time it is accessed. There are different types of caching:

• Browser cache: The browser saves certain elements such as images, fonts or formatting the first time you visit a website. On the next visit, these do not have to be reloaded from the server - less data has to be delivered by the server and transferred from the network.
• Server cache: Content that does not change between two visits can be cached directly on the web server. Instead of recalculating the page each time it is called up, this cached version can then be delivered. This saves significant computing power on the server, especially with CMS, and therefore saves energy.
• Database cache: Website content is often stored in a database. Each time a page is called up, information must be retrieved from there - such as texts or event data. A database cache remembers frequently used queries and delivers them faster without having to search the entire database each time.
• Object cache: It is not only in CMS that functions are regularly executed in the background, for example to compile certain content. These calculation steps can also be cached so that they do not have to be recalculated on every visit.

Caching is an important component of every climate-conscious website. When used correctly, caching ensures that websites run more resource-efficiently - and are also faster and more stable.

Lazy loading

---

Lazy loading is when images are not visible immediately but load with a delay. It can be used by modern browsers without special scripts by having images load only when called up, i.e. right before users scroll down to them. This can save copious amounts of data across multiple webpages.

Embedding videos

---

The amount of data used for streaming on platforms such as Netflix, Amazon Prime, YouTube and co already accounts for more than half of the volume of data on the internet. Video streaming is thus a considerable leverage point when it comes to saving data.

Tips:

• When embedding videos from video platforms such as Vimeo, YouTube, Twitch etc. on your own website, turn off the auto-play function. This ensures that videos are only loaded if visitors really want to see them.
• You can also turn off the auto-play function for further videos on a video platform.
• You can place an icon or image on the website so that the player only loads when the icon is clicked.
• Some providers allow you to set the video quality. The default video quality can be lower for conferences, for instance, where there is less movement. Streaming in SD rather than HD reduces the ecological footprint by 86 per cent.

You can find further information in the article “Using video considerately on sustainable websites” by Paul Jardine and Becky Thorn.

Hosting videos yourself will probably never be as efficient as using specialised providers since they try to deliver videos in the most data-efficient way possible too. As you would with any hosting service, pay attention to their GDPR and sustainability policies when choosing a provider.

Modern image formats

---

Many of us know and use image formats such as JPEG, GIF or PNG. But there are already better formats such as WebP or AVIF that use significantly less data. If you are using CMS, you can have formats converted automatically, e.g. for WordPress or TYPO3.

Images – resolution and size

---

Alongside the file format, the resolution of an image should also be adjusted according to the size in which the website presents the images. Images are often displayed much smaller than how they are uploaded. Ideally, the website should only deliver images that do not exceed the size that can be displayed on the end device’s screen.

Dark mode

---

Depending on the device, a dark screen requires up to 60 per cent less power, especially if the device has an OLED screen. This is why it makes sense either to develop a website’s design in dark mode from the outset or to include a way to opt in to dark mode.

---