Sustainable web design / sustainable website

What is sustainable web design, and how can you reduce a website's energy and resource consumption?

Terms such as sustainable web design, sustainable websites and climate-friendly websites are often used when discussing how to reduce the environmental impact of digital solutions. But what do these terms actually mean, and which technical choices can make a difference?

In this article, we explain how web design, hosting, programming, image optimisation, video, fonts and website structure can affect data transfer, performance and resource consumption. We also explore how these considerations can be applied to a regular website, webshop, ticketing system or another digital solution.

It is important to distinguish between specific resource-saving measures and demonstrated environmental sustainability. A website does not automatically become sustainable or climate-friendly simply because it loads quickly or transfers less data. Its overall environmental impact depends on factors such as server operations, networks, user devices, energy supply and usage patterns.

What Is Sustainable Web Design and a Sustainable Website?

Sustainable web design is a term often used to describe efforts to consider environmental impact and resource consumption when designing and operating websites. This includes avoiding unnecessary data transfer, using resources efficiently and selecting technical solutions that match the website's actual requirements.

There is a difference between the web design itself and the complete digital solution. Design includes elements such as layout, images, colours, typography and user experience. The complete solution also includes hosting, server-side code, databases, network traffic, third-party services and ongoing maintenance.

Resource-conscious web design can therefore be approached at several levels:

• Design: Simple user interfaces, well-planned navigation and relevant content.
• Content: Optimised images, videos and fonts.
• Programming: Efficient code and limiting unnecessary scripts and requests.
• Hosting: Server capacity, energy efficiency and documented information about electricity supply.
• Operations: Ongoing updates, monitoring and optimisation.

Each of these measures can help limit specific types of resource consumption. However, the actual environmental effect depends on the particular solution and cannot automatically be determined from a single optimisation.

How Can You Make a Website More Resource-Efficient?

There are many opportunities to optimise a website, webshop or digital system. Some changes are straightforward to implement, while others require adjustments to design, content, hosting or the underlying code.

The most practical approach is usually to start by examining where resources are being used. A large background video, an extensive JavaScript library or unnecessarily high-resolution images may be obvious areas to investigate.

Website Size and Data Transfer

The size of a website can affect both loading times and resource consumption. This is particularly relevant to the amount of data transferred when a visitor opens a page.

The number of pages or products is not necessarily the deciding factor. A webshop containing many products can be efficiently built if its database, images and server-side code are optimised. Conversely, a single landing page can be resource-intensive if it contains large images, videos and numerous external scripts.

Important considerations include:

• How much HTML, CSS and JavaScript the browser downloads.
• The size of images and videos being transferred.
• The number of requests sent to servers and third-party services.
• Whether resources can be reused from the browser cache.
• Whether databases and server-side code perform unnecessary work.
• Whether resources are loaded only when the user needs them.

Smaller data transfers can reduce the need for network transmission. However, this does not necessarily mean that energy consumption decreases proportionally, as networks, servers and user devices also have a baseline energy consumption.

Choosing a CMS, SaaS Platform and Plugins

The choice of technical platform can affect a website's speed, maintenance and resource consumption.

Systems such as WordPress, Magento and other open-source solutions can be optimised for high performance, but the actual result depends on factors such as themes, plugins, hosting and configuration.

A large number of plugins or third-party integrations can introduce additional JavaScript, CSS, database queries and network requests. This applies not only to open-source systems but also to SaaS platforms and custom-developed websites.

It is therefore useful to investigate:

• Whether the system loads features that are not being used.
• Whether plugins and integrations affect performance.
• Whether the platform supports caching and image optimisation.
• Whether the system is regularly updated and maintained.
• Whether actual performance can be measured and improved.

A maintained SaaS solution can be a practical option because the provider typically handles updates and part of the technical operation. However, the actual implementation and its measured performance determine the result.

Read our article about alternatives to WordPress.

Technical SEO and Faster Loading Times

Technical search engine optimisation and website performance are connected in several ways. A website that loads efficiently and works well on mobile devices can provide a better user experience and support SEO efforts.

Google uses Core Web Vitals to describe important aspects of the user experience:

• Largest Contentful Paint (LCP): Measures how quickly the largest visible content element loads.
• Interaction to Next Paint (INP): Measures the page's responsiveness to user interactions.
• Cumulative Layout Shift (CLS): Measures unexpected layout shifts.

Good performance is relevant to both usability and search engine optimisation. However, Google does not automatically give a website a high ranking simply because it is fast or described as environmentally friendly.

Content relevance, quality and many other signals also influence rankings in search results.

It is therefore useful to choose a solution that offers:

• Ongoing technical SEO maintenance.
• Optimisation of images, scripts and stylesheets.
• Support for responsive layouts.
• Options for monitoring and improving Core Web Vitals.
• An efficient technical structure.

Read more about why website speed matters.

Mobile First and Responsive Web Design

Mobile First and responsive web design focus on creating websites that work well across different screen sizes, with particular attention to smartphones.

A Mobile First approach begins with smaller screens and subsequently expands the design for larger devices. This can make it easier to prioritise content and functionality.

However, Mobile First does not automatically mean that smartphones download less data. This depends on how the solution is programmed.

For example, responsive images can provide different image sizes for different screens, while conditional loading can limit the download of features that are not used on the current device.

It is therefore important to focus both on responsive design and on the actual amount of resources loaded by the browser.

Colour Choices and Energy Consumption

Colours can affect electricity consumption on certain screen technologies, but the effect depends on the screen type, brightness and the content being displayed.

On OLED screens, darker pixels can consume less energy than brighter pixels under certain conditions. The relationship is different on LCD screens, partly because their backlighting works differently.

It is therefore not possible to conclude generally that one particular colour always uses less energy than another.

Read more about colour choices and energy consumption on OLED screens.

Colour choices should also consider accessibility, contrast, readability and the company's visual identity. Changes to a colour palette should therefore not be justified by an expected climate benefit without relevant documentation.

Dark Mode

Dark Mode allows users to choose a darker version of a website or application.

On certain displays, especially OLED screens, a darker interface can reduce the screen's electricity consumption under specific conditions. The effect depends on factors such as screen technology, brightness and how much of the display shows dark colours.

Dark Mode should therefore be considered a design and user preference with a possible energy-related benefit in certain situations, rather than evidence that an entire website is climate-friendly.

When implementing Dark Mode, it is also important to maintain good contrast, readability and a recognisable design.

Fonts and Variable Fonts

Web fonts are another area where data transfer and performance can be optimised.

Each font and variation may require one or more files to be downloaded. Therefore, the number of fonts, font weights and character sets can affect how much data the browser retrieves.

Possible optimisations include:

• Limit the number of font families when appropriate for the design.
• Load only the font weights and character sets actually being used.
• Investigate whether variable fonts can reduce the need for separate font files.
• Consider system fonts when the design allows it.
• Use appropriate caching and font-loading techniques.

A variable font is not necessarily smaller than a single traditional font file. Its benefits depend on how many variations are being used.

It should also not be assumed that a web font is automatically available in the user's cache from other websites, as modern browsers may isolate caches between websites.

Icons

Icons can be implemented in several ways, including SVG files, SVG sprites, CSS-based icons or through an icon library such as Font Awesome.

The most important factor is not necessarily which method is chosen, but how many resources are loaded and how they are used.

A large icon library can be practical, but if only a few icons are needed, individual SVG icons may be more efficient in some cases.

It can therefore be useful to investigate whether the chosen solution loads unnecessary icons, fonts or scripts.

Website Structure and Navigation

Good information architecture makes it easy for users to find the content and functionality they need.

A clear menu, logical page structure and relevant internal links can reduce the need for unnecessary navigation.

This can be achieved by:

• Organising content into logical categories.
• Using descriptive menu items and headings.
• Providing direct access to important functions.
• Avoiding unnecessary steps in ordering and payment processes.
• Limiting disruptive popups and unnecessary interactions.

If users can find relevant content with fewer unnecessary steps, this can improve the user experience and limit unnecessary page loads. However, the actual environmental effect cannot be determined from the number of clicks alone.

Image Formats: WebP, AVIF and JPEG XL

Images often account for a substantial proportion of a website's total data transfer. Choosing the right image format, compression settings and resolution can therefore significantly affect loading times.

JPEG and PNG are still widely used, but newer formats such as WebP and AVIF can often provide comparable visual quality with smaller files.

No single format is best for every situation. The choice depends on factors such as image content, compression settings, transparency requirements and browser support.

WebP

WebP supports both lossy and lossless compression, transparency and animation.

The format is widely supported by modern browsers and is therefore a practical choice for many websites.

WebP can often reduce file sizes compared with equivalent JPEG or PNG files, but the savings depend on the image and the selected settings.

Read more about WebP.

AVIF and JPEG XL

AVIF is a newer image format offering efficient compression and support for features such as HDR and transparency. It is supported by modern browsers, but the requirements of the devices and browsers using the solution should still be considered.

JPEG XL is also a technically interesting format with advanced compression capabilities, but browser support should be checked before using it as the only image format on a website.

When necessary, the HTML <picture> element can be used to provide several image formats and allow the browser to select a supported format.

Comparison of Image Formats

Format	Features	Typical Use	Considerations
JPEG	Widely used format with lossy compression	Photographs and images containing many colours	Compression level and image quality
PNG	Lossless compression and transparency	Graphics, illustrations and images with particular quality requirements	May produce larger files than alternative formats
WebP	Lossless and lossy compression, animation and transparency	Photographs, graphics and general website images	Choose appropriate compression settings
AVIF	Efficient compression, HDR and transparency	Photographs and graphics where file size matters	Browser support and encoding time
JPEG XL	Advanced compression and support for different image types	Specialised applications and solutions with appropriate support	Browser support and fallback requirements

The important thing is to test relevant formats using your own images and choose the solution that provides an appropriate balance between file size, quality, compatibility and performance.

Image Compression

Image compression is one of the most practical ways to limit the amount of data transferred by a website.

Although many CMS and SaaS platforms automatically optimise images, it can still be useful to investigate whether images use appropriate dimensions and compression settings.

Two important factors are:

• Dimensions: The image's width and height should match how it is displayed.
• Compression: File size should be limited without an unacceptable loss of image quality.

Responsive images using srcset and sizes can also make it possible to deliver different resolutions depending on screen size and pixel density.

Lazy loading may be appropriate for images further down the page, allowing the browser to download them when they approach the visible area.

However, important images at the top of the page, such as the largest visible image, should not automatically be lazy loaded if this delays their display.

Image Details and Visual Complexity

The level of detail and visual complexity of an image can affect how efficiently it can be compressed.

Images containing many fine details may, in some situations, require more data to preserve the desired quality than images with larger uniform areas.

It may therefore be worth considering adjustments to backgrounds, levels of detail and compression when they do not interfere with the image's purpose.

This does not mean that all images should be blurred or simplified. Images must still support the design and provide users with the information they need.

Video Formats and Codecs

Video can account for a significant proportion of the data transferred by a website. It is therefore relevant to consider format, codec, resolution, bitrate and playback behaviour.

MP4 and WebM are common video containers, while H.264, H.265/HEVC, VP9 and AV1 are examples of video codecs.

The choice between them depends on factors such as compression efficiency, browser support, compatibility and playback requirements.

WebM and AV1

WebM is an open video container format that can use codecs including VP9 and AV1.

AV1 can provide efficient compression, but the result depends on the specific encoding settings and playback devices.

H.264 in an MP4 container remains relevant because of its broad compatibility. WebM and AV1 can be suitable alternatives when they match the browsers and devices used by the target audience.

Read more about WebM.

Comparison of Video Formats and Codecs

Technology	Type	Features	Important Considerations
WebM	Container format	Open format that can use VP9 and AV1	Support also depends on the selected codec
AV1	Video codec	Efficient compression and support for modern video features	Encoding time, hardware acceleration and compatibility
VP9	Video codec	Widely used codec with efficient compression	Compatibility and playback performance
H.264	Video codec	Very broad support across browsers and devices	May require a higher bitrate than newer codecs at comparable quality
H.265/HEVC	Video codec	Efficient compression, particularly at high resolutions	Licensing, browser and hardware support

Providing multiple video formats may be useful depending on the desired browser compatibility. The specific solution should be tested in the browsers and on the devices used by the target audience.

Video Compression and Background Videos

Videos can require substantial data transfers, especially when they play automatically or load at high resolution without considering the user's device.

It can therefore be useful to:

• Adjust video resolution to its actual display size.
• Choose an appropriate bitrate and compression level.
• Avoid unnecessarily long background videos.
• Use a static image where video does not contribute significantly to the content.
• Avoid autoplay when it serves no necessary purpose.
• Consider the user's network connection and preferences for reduced motion.

Videos can be optimised using tools such as:

• Professional software such as Premiere Pro from Adobe.
• Free tools such as HandBrake.
• Online services such as Convertio and FreeConvert.

When using external services, it is important to review their terms regarding file uploads, processing and storage.

For longer videos, a video platform such as YouTube can be practical because the platform handles encoding and adaptation to different playback conditions. However, this does not automatically mean that an embedded YouTube video has lower overall resource consumption than a self-hosted video.

Marketing and Advertising Optimisation

Marketing also affects how a website is used and how many visitors it receives.

By targeting advertisements and content towards relevant users, businesses can limit unnecessary ad impressions and clicks while potentially improving marketing efficiency.

Relevant measures include:

• Focus on relevant visitors rather than visitor numbers alone.
• Evaluate campaigns based on meaningful conversions.
• Adjust or remove keywords that do not produce relevant results.
• Avoid unnecessary third-party scripts and tracking features.
• Create blog articles that answer customers' actual questions.
• Optimise landing pages so information is easy to access.

More targeted campaigns can limit unnecessary interactions and data transfers. However, this alone does not demonstrate a specific reduction in CO2 emissions.

Is Sustainable Web Design the Same as a Climate-Friendly Website?

No, not necessarily. Sustainable web design is often used as a general term for design and development methods that consider resource consumption and environmental impact.

However, a particular website cannot automatically be described as sustainable, environmentally friendly or climate-friendly simply because technical optimisations have been implemented.

If a specific environmental benefit is to be documented, it must be possible to explain what was measured, how it was measured and what the result is being compared against.

For example, the following represent different types of statements:

• Technical feature: The website uses image compression and responsive images.
• Measured improvement: The total amount of image data transferred by a particular page has been reduced by a documented percentage in a specified test.
• General environmental claim: The website is climate-friendly.

The final statement is significantly broader and requires a different level of documentation than a description of a specific technical feature.

Commercial marketing is also subject to specific rules regarding general environmental claims. It is therefore normally more precise to describe individual optimisations and their documented results.

How Are Resource-Conscious Web Design and SEO Connected?

There is a natural overlap between several technical SEO measures and efforts to improve website performance.

Image optimisation, efficient code, fast loading times and mobile-friendly design can improve the user experience while also supporting search engines' ability to process a website efficiently.

However, this does not mean that search engines automatically reward a website for being environmentally friendly. A general environmental claim is not a documented Google ranking factor.

The practical connection is primarily that certain technical optimisations can benefit both performance and SEO.

What About AI Search and GEO?

GEO, or Generative Engine Optimization, focuses on making content understandable and useful for AI-based search and answer systems.

An important principle is to create content that clearly explains concepts, answers specific questions and distinguishes documented facts from assessments and assumptions.

Useful practices include:

• Use descriptive headings and a logical content structure.
• Answer important questions directly.
• Explain technical concepts using precise definitions.
• Support important claims with relevant sources.
• Describe specific features and measurable results rather than broad promises.
• Maintain content as technology and regulations change.

There is no guarantee that particular wording will cause a website to be mentioned in AI-generated answers. However, precise and well-documented content makes it easier for both people and digital systems to understand what a page actually describes.

How Do We Address Resource Consumption in the Flex4B System?

The Flex4B system is continuously developed and updated with a focus on speed, technical SEO, usability, functionality and efficient management of digital resources.

We work with several technical measures that can limit unnecessary data transfer and resource consumption.

Examples of Our Technical Measures

• Ongoing optimisation: We work on the system's code and functionality to limit unnecessary processing and resource loading.
• Image and video formats: The system supports modern web formats, allowing images and videos to be adapted to different uses.
• Technical SEO: We continuously work on technical improvements, including performance and features relevant to search engines.
• Mobile First: Our designs are based on mobile-friendly and responsive user interfaces.
• Font Awesome: The system allows customers to use Font Awesome icons instead of creating individual image files for every icon.
• Image compression: We work with automatic image optimisation during uploads to limit file sizes.
• Navigation and structure: We help create logical menus and user journeys so users can easily find relevant features.
• Hosting: We use a hosting solution that focuses on energy optimisation and efficient server operations.

Read more about our hosting and server operations.

These descriptions concern specific technical features and working methods. They do not, in themselves, demonstrate that the complete Flex4B system has a particular environmental advantage compared with other systems.

Ticketing Systems with a Focus on Digital Resource Use

A modern ticketing system can handle a range of processes digitally, including ticket sales, ticket delivery, scanning and administration.

Digital tickets can, for example, be displayed directly on a customer's smartphone, meaning that printing a physical ticket is not necessarily required.

However, digital solutions also use resources, including servers, networks and user devices.

At Flex4B, we focus on technical optimisation, functionality and usability as part of the ongoing development of our SaaS ticketing system.

Read our article about ticketing systems, digitalisation and environmental considerations, where we examine the technical choices and factors that can influence resource consumption.

Do You Need a Website with a Focus on Resource Efficiency?

Flex4Business ApS works with web design and the development of digital solutions, where we can provide advice on image optimisation, data transfer, performance and technical structure.

We can help identify optimisation opportunities in both new and existing websites, webshops and other digital solutions.

This may include design, programming, content, hosting and the technical factors that affect speed and resource use.

How We Optimise Flex4B.com

On our own website, we work with different types of technical optimisation. At the same time, we have chosen not to implement every possible measure because design, functionality, accessibility and the company's visual identity are also important.

Here are some of the choices we have made on Flex4B.com.

Flex4B.com

• System: The website uses the Flex4B system, where we focus on efficient loading and ongoing technical optimisation.
• Video: We do not use automatically playing hero videos to attract attention, but use video where it serves a relevant purpose.
• Technical SEO: We prioritise speed, mobile compatibility and ongoing optimisation.
• Mobile First: The website has been developed using a mobile-friendly and responsive approach.
• Colours and Dark Mode: We have chosen to maintain our visual identity and do not offer a separate Dark Mode on the website.
• Fonts: We limit the number of font families and variations where appropriate for the design.
• Icons: We use Font Awesome for a range of icons.
• Structure: We work with clear navigation that makes important pages and features easily accessible.
• Images: We optimise images with a focus on appropriate dimensions, file size and visual quality.
• Image formats: We use WebP, among other formats, on our website.
• Video optimisation: We adapt the videos we use for the web.
• Marketing: We focus on relevant target audiences and landing pages to limit unnecessary ad clicks and improve the user experience.

We also work with environmental and energy initiatives in our daily operations, including flexible remote work, digital communication and consideration of electricity and resource consumption.

Can We Help Optimise Your Website, Webshop or Ticketing System?

If you need a website or digital solution with a focus on performance, efficient data use and well-considered technical choices, we can assist with advice and development.

We can help with specific improvements to an existing solution or with planning an entirely new solution from the beginning.

• Contact us for a no-obligation discussion

Read more about the Flex4B system and the options for combining a ticketing system, webshop, pass management system and CMS.

More Inspiration for Sustainable Web Design

If you would like to learn more about sustainable web design, environmental considerations in digital development and resource-efficient websites, several relevant articles and professional resources are available.

The term sustainable web design continues to be used in professional contexts, but it is important to examine the specific technical factors and supporting documentation before drawing conclusions about a particular website's environmental impact.

• KEA has published a Danish podcast about sustainable web design.
• Business Insider has covered the environmental impact of digital advertising.
• Ryte Magazine has published an article about sustainable web design.

Frequently Asked Questions About Sustainable Web Design