Lesson 14To go further, some code practices
- Notion 86 - Introduction to eco web design code practices with The Good Manager project
- Notion 87 - Clean code for energy efficiency
- Notion 88 - Asynchronous code: do more, in less time
- Notion 89 - More efficient and less resource-intensive servers
- Notion 90 - Manage your server workload
- Notion 91 - Using external libraries: the example of Bootstrap CDNs
- Notion 92 - Code practices review
Notion 86
Introduction to eco web design code practices with The Good Manager project
Target skills
The Good Manager website has been designed and developed following eco-web design principles. Design and implementation choices are documented in the Project’s Logs (accessible through the menu). In this notion we would like to showcase some development good practices used for this platform that could be useful for eco-web design.
User tracking
Privacy is a major concern, and user tracking consumes resources, may it be through data collection, storage and analysis.
The Good Manager is not tracking users so it simplifies our work regarding the GDPR obligations, as well as keeping the platform free of third-party scripts that would make the platform heavier.
Static website
The Good Manager website is mainly composed of static content, meaning it doesn’t need a web server to generate pages each time a visitor asks for them. Pages are generated beforehand in order to reduce the server load, thanks to Gatsby ( https://www.gatsbyjs.com/ ). Therefore, we only need basic hosting features for static pages in a low-tech approach, reducing our footprint.
Images
We've used svg images to reduce their size and optimize their display. The total weight of the images is currently 26kb, which is really low.
According to the Gatsby documentation, here is a list of how Gatsby can optimize images:
- Loads the optimal size of an image for each device size and screen resolution
- Holds the image position while loading so your page doesn’t jump around as images load
- Uses the “blur-up” effect i.e. it loads a tiny version of the image to show while the full image is loading
- Lazy loads images, which reduces bandwidth and speeds the initial load time
- Uses WebP images, if browser supports the format
Hosting
This website is hosted at Infomaniak (https://www.infomaniak.com/en) which has a public sustainable energy policy. By choosing a commercial hosting solution instead of self-hosting, we seek to take advantage of economies of scale to reduce our footprint. By being hosted in an eco-friendly datacenter, we hope to reduce our individual consumption and benefit by optimization and hardware management from professionals.
To go further:
- Learn more about our technical choices in the project’s logs: https://thegoodmanager.eu/en/project-logs