TABLE OF CONTENTS
- Media
- a. Images
- b. Videos
- Content
- a. Non-essential content
- b. The life and death of content
- Plugins
- Hosting
In light of current environmental concerns, digital pollution is also being called into question, resulting in an increase in references to eco-friendly, sustainable, green websites, etc. While it would be misleading to claim to produce a “green” website, it is indeed possible to reduce its energy consumption.
This article does not focus on the technical aspect (known as “eco-design”), but on the actions you can take to reduce or limit your website's energy consumption.
We will therefore focus mainly on media and content issues.
Media
Some guidelines to help you understand the size of your files: an image on a web page should ideally be less than 100 KB, while a video less than a minute long should be between 2 and 5 MB. Below is the relationship between kilobytes, megabytes, and gigabytes.
1 Ko (Kilo-octet)
= 1024 octets
1 Mo (Mega-octet)
= 1024 Ko
1 Go (Giga-octet)
= 1024 Mo
For a visual understanding of the size ratio between each of these measurements, refer to the image opposite.
Each megabyte takes up as much space as 1024 kilobytes, and each gigabyte takes up as much space as 1024 megabytes (and therefore 1024 x 1024 kilobytes) ...
The good news is that it is not always necessary to fill your web pages with heavy elements!
a. Images
Representing an average of 44% of a web page's weight in 2022 (according to reports from the http archives: Report: Page Weight (opens in a new window) and Report: State of Images), images are often too heavy and too large.
You can resize your images to be around 800 pixels wide, which is perfectly sufficient for a desktop web page. Anything larger than that is too heavy and even requires computational effort on the part of the browser to resize it.
You can compress your images without any visible loss of quality using tools such as Shortpixel, ImageCompressor, or TinyPNG. On WordPress, you can also use plugins such as shortpixel API tools or imagify.io.
The image format also plays a role in its size.
For raster images (with pixels, such as photos), JPEG and WEBP formats are recommended. JPEG files contain less data than PNG files because they do not support transparent backgrounds, and are therefore smaller. The WEBP format is generally lighter than PNG at the same quality, while supporting transparent backgrounds. For so-called “vector” images, the preferred format is often SVG.
WEBP
- very light
- transparency
- raster (pixels)
AVIF
- very light
- transparency
- not supported by all browsers 😕
- raster (pixels)
JPEG
- light
transparency
- raster (pixels)
SVG
- light
- vector (illustrations, icons, logos, graphs, etc.)
PNG
light- transparency
- raster (pixels)
A few tips :
- Resize your images, as they are often too large for their intended use
- Ask yourself if you really need a full-width image or an image carousel
- Compress your images
- Choose the right image format for the right use (.svg, .jpeg, .webp, etc.)
b. Videos
Excessive use of videos excludes people with low bandwidth (causing slow or impossible downloads) and causes accessibility issues. If you really need to put a video on your site, there are some very useful compression tools available, such as Handbrake software. You can also choose to compress your soundtracks into MP3 format without any noticeable loss of quality using the free [Lame] encoder (https://lame.sourceforge.io/developers.php) or other free websites.
A few tips :
- Define your actual need for video (can it be replaced by an infographic, an image, or text?)
- Opt for short videos, less than 1 minute 30 seconds long
- Compress your videos and sounds according to how you intend to use them
- The mp4 format is the standard format for videos on the web
GIF
- very light
- limited lenght
MOV
- very heavy
MP4
- light
- most standard format on the web
WEBM
- very light
- May not be supported everywhere 😕 → use mp4 in this case
Content
a. Non-essential content
High-quality content meets the needs of your users, which is why it is essential to understand your target audience. Spade offers user testing (opens in a new window) if you feel the need. Producing content without a purpose, or content that does not add value for the people who visit your website, is often a waste of time and energy.
Some tips:
- Focus on content quality rather than quantity
- Keep information concise and easy to find in the message
- Question the usefulness of the content produced for your users
- Ensure that the content is of interest to your audience by measuring its performance
b. The life and death of content
In a context where more than half of stored content is obsolete, dead, or redundant, the question of content lifespan arises. Content management is not limited to creating and publishing in an endless loop; you have to ask yourself, “What happens to all this content after a certain amount of time?”
Thinking about the future of this content requires sorting out what is no longer consulted or has become obsolete.
Some tips:
- Update your content regularly
- Consider the lifespan of the content: if it is designed to be short-lived, it may be better to use it only on social media, or not to produce it at all
- Establish a strategy for archiving and deleting (automatically or manually) obsolete or outdated content
Plugins
Plugins are software extensions that add functionality to a computer program or website. They often use a lot of resources, which is why Spade has chosen to include only a limited number of them in Minos by default.
With the exception of the two plugins listed below, you can disable all other extensions included in Minos. This is highly recommended if you do not use them (Polylang, Gravity Forms, and Editoria11y).
List of plugins included with Minos
- Privacy: Complianz | GDPR/CCPA Cookie Consent is installed and offers advanced settings. We recommend keeping it, but you are free to change tools. Just be sure to disable Complianz before activating the new plugin!
- Forms: *Gravity Forms* (opens in a new window) allows you to manage all types of forms that you host on your website.
- Multiple languages: Polylang allows you to manage translated content. Please note that it does not translate from one language to another itself!
- Help with the accessibility of your content: Editoria11y helps you comply with accessibility rules for everything related to your website content. For the moment, the plugin is only available in English.
- Icons: Font Awesome allows you to add icons to different places (footer, social networks, etc.). This plugin is the only one that should not be disabled under any circumstances. It is necessary for your website to function properly.
Hosting
According to the RGESN (General Eco-design Reference Framework for Digital Services, a French publication), hosting accounts for 14% of a website's environmental performance. It is therefore essential to choose a hosting provider that minimizes the environmental impact of your website.
Criteria for choosing an eco-responsible hosting provider:
- Use of green energy: Although this is a good start, beware of greenwashing. The use of green energy is a minimum requirement.
- PUE (Power Usage Effectiveness): This energy efficiency ratio must be less than 2. In Europe, the average is 1.8, but some providers offer ratios close to 1, which is excellent.
- WUE (Water Usage Effectiveness): This water usage ratio is crucial, especially when it comes to server cooling. Best practices include free cooling (cooling using ambient air) and other innovative methods such as adiabatic cooling.
- Reuse of waste heat: Check how the hosting provider reuses the heat produced by servers, for example to heat buildings or water.
- CSR (Corporate Social Responsibility) policy: Consider whether the hosting provider has initiatives to reduce its carbon footprint, such as encouraging green transportation for its employees.
Source: WhoDuNit Academy - please note, content accessible upon registration - https://masterclass.whodunit.academy/view/courses/creer-et-gerer-un-contenu-web-responsable-sur-wordpress/2576454