This project was released in tandem with my talk "Green Code: A Blueprint for Eco-Friendly websites", first given at Codegarden 2024.
Sustainability is a hot topic, and lots of great talks have scratched the surface. In this talk, we dive into the practical application of green code with real world examples we can apply to everyday software development, and how those intersect with performance and accessibility.
This talk will demonstrate how to make practical changes to your code (with live demos!) to make a tangible difference in your work based on up and coming standards such as the Web Sustainability Guidelines 1.0 and Low Impact Manifesto. We'll learn how to implement better caching, lazy loading, iframe facades, use MiniProfiler testing, optimse images and async all the things.
Grounded in real world examples, this talk will encourage people to embrace green code both from the start of a project and in day-to-day support, whether you have 30 minutes or $30k to play with.
The aim is that it follows some of the best practice encouraged today, specifically from the Web Sustainability Guidelines 1.0 and the Low Impact Manifesto and can produce a good result from tools like the Website Carbon Calculator.
The Low Impact Manifesto states that a low impact website:
loading="lazy" has been implemented on images throughout this demo site.
There are a number of things you can do to lower power consumption:
- check long running/slow running scripts
- MiniProfiler
- async all the things
- don't do something in JS that can be done in CSS
There is the start of an example of this within HeroBanner.cshtml, using the CarbonIntensityUK NuGet package to determine the current load of the network within the London region (assuming your server is based in the UK/on Azure UK South)
Nothing too specific exists on this site (other than the behaviour above) but you can check out herning.dk—winner of the Green Award at Codegarden 2023—for an example of their 'Reduce your site's climate footprint' mode.
Just get rid of videos, or at least stop them autoplaying and use a facade! See lite-youtube-embed for a great, modern example.
A Service Worker is configured to locally cache styles, scripts, images coming from Umbraco and more. See sw.js for the specific setup.
- image cropping
- minified CSS/JS
Don't load Google Maps on every page if you're only using it on your contact page!
Dark mode baby! First class citizen on the web since 2018, and there is the start of changing some components on the site to use Tailwind's dark: modifier.
There is also an example in style.scss of a more modern CSS/Sass approach using the new light-dark() function.
Some third party fonts are loaded in this site as an example, but the ideal would be to use a system font stack where possible, like GitHub uses:
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}See systemfontstack.com for other great examples!
The solution should be able to be pulled and run wherever .NET is installed.
The site uses Umbraco v13.3.2, with a front end build runner using Vite based on this excellent article from Erica Quessenberry. A Vite watch process runs automatically in Development mode.
The site uses SQLite and content will automatically be imported using uSync First Boot.