Hello,
I'm the founder of the digital sustainability audits (we call it DAS for brevity).
After reading this post you will have an idea of my vision, goals and you will have a lot of fun testing your digital services across all audits from a sustainability point of view.
First things first
Important matters should be dealt with before other things.
At this point, you should already know some of the biggest challenges we as web developers are facing nowadays (and it's not about interacting with stupid people).
Let's not forget that we all feed off an invisible but omnipresent thing that goes by the name of the Internet.
It is already everywhere and it takes up an increasingly prominent position in our lives, to the extent that more and more people seek to take part in and this is causing well known network bottleneck problems.
In fact, this situation will accentuate in the next years mainly due to:
- Data-oriented society
- Digital transformation
- Higher availability in developing countries
So DAS's goal is to:
Create a sound economy; one that embraces sustainability practices and pushes the digital world with the lowest environmental impact.
Can we measure sustainability?
Absolutely. Others have tried to from an emissions standpoint (i.e. carbon footprint index).
Indeed, they have helped to raise awareness on the matter but still is a flavorless product for professionals.
DAS goes far beyond that. It runs sustainability audits on websites and provides a free and customized report to improve your site's results.
Let's see how this is achieved.
Sustainability audits
Let's install the tool's CLI:
npm i -g sustainability
You also have to install puppeteer library yourself. For instance with:
npm i -g puppeteer
Easy busy.
Let's see what it can do for us. Run:
sustainability -h
Usage: sustainability [opts] url
Available options:
--output <path> or -o <path> Path to write the audit report
--viewport Determines page viewport. Values are ’mobile’ or ’desktop’. Defaults to desktop
--maxnav Max puppeteer navigation time in ms. Defaults to 60000 (60s) and should be greater than 15000 (15s)
--nosandbox Launches puppeteer with [’--no-sandbox’, ’--disable-setuid-sandbox’]
--debug or -d Enables verbose logging.
--version or -v Prints out sustainability version
Now let's run it against our website:
sustainability https://audits.digital
This will launch a headless chromium browser and make use of the puppeteer library to navigate and fetch all the required information to evaluate our website.
Let's move on.
We should know be able to see the resultant report at stdout.
{
"globalScore": 100,
"meta": {
"url": "https://audits.digital",
"timing": [
"2020-07-27T10:56:28.270Z",
6535
]
},
"audits": [
{
"category": {
"name": "server",
"description": "Server aspects which are essential for online sustainability: green hosting, carbon footprint, data transfer."
},
"score": 100,
"audits": {
"pass": [
{
"meta": {
"title": "Use compression",
"id": "usescompression",
"description": "Text compression is important because it reduces the total amount of data transferred to clients",
"category": "server"
},
"score": 1,
"scoreDisplayMode": "binary"
},
{
"meta": {
"title": "Website’s carbon footprint is moderate",
"id": "carbonfootprint",
"description": "The carbon footprint is the total amount of greenhouse gases released into the atmosphere for directly or indirectly supporting a particular activity. Keeping it as low as possible it’s key to prevent the climate change.",
"category": "server"
},
"score": 1,
"scoreDisplayMode": "numeric",
"extendedInfo": {
"value": {
"totalTransfersize": [
86441,
"bytes"
],
"totalWattage": [
"0.0000041862",
"kWh"
],
"carbonfootprint": [
"0.12606",
"gCO2eq / 100 views"
],
"share": [
{
"document": "0.84"
},
{
"stylesheet": "0.17"
},
{
"script": "96.72"
},
{
"image": "2.28"
}
]
}
}
},
{
"meta": {
"title": "Use HTTP2",
"id": "useshttp2",
"description": "HTTP2 provides advantages such as:\n multiplexing, server push, binary headers and increased security.",
"category": "server"
},
"score": 1,
"scoreDisplayMode": "binary"
},
{
"meta": {
"title": "Server 100% renewable-powered",
"id": "greenserver",
"description": "It is important to make sure a server uses renewable-powered energy to host a website. Green hosting your website it is as easy as selecting a green web hosting provider.",
"category": "server"
},
"score": 1,
"scoreDisplayMode": "binary",
"extendedInfo": {
"value": {
"hostedby": "Firebase Hosting"
}
}
}
],
"fail": [],
"skip": []
}
},
{
"category": {
"name": "design",
"description": "Hands-on the website assets that convert code to user-friendly content: images, css stylesheets, scripts, fonts."
},
"score": 100,
"audits": {
"pass": [
{
"meta": {
"title": "Use WebP image format",
"id": "webpimages",
"description": "WebP images provides superior lossless and lossy compression for images on the web. They maintain a low file size and high quality at the same time. Although browser support is good (77%) you may use WebP images along with other fallback sources.",
"category": "design"
},
"score": 1,
"scoreDisplayMode": "binary"
},
{
"meta": {
"title": "Don’t have console logs",
"id": "noconsolelogs",
"description": "It is important to keep the console log clean of error, warning or info outputs.",
"category": "design"
},
"score": 1,
"scoreDisplayMode": "binary"
}
],
"fail": [],
"skip": [
{
"meta": {
"id": "fontsubsetting",
"category": "design",
"description": "Font subsetting is a method to only download the character sets of use. <a href=\"https://web.dev/reduce-webfont-size/#unicode-range-subsetting\">More info</a>"
},
"scoreDisplayMode": "skip"
},
{
"meta": {
"id": "lazyloading",
"category": "design",
"description": "Lazy loading is a powerful feature. It instructs the browser not to download an asset until an specific event happens. Now it is natively supported on HTML on img and iframe elements. <a href=\"https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading\">More info</a>."
},
"scoreDisplayMode": "skip"
}
]
}
}
]
}
That is our JSON stringified report. It consists of the following:
- A global score between 0-100
- Metadata section
- Audits section with server and design audits
Audits are straightforward.
For each category there's an object which contains the category score, more metadata, and finally the audits output divided in pass, fail or skip.
You shall now see that there's two categories with a set of audits:
- Server
- Design
Server audits
Server audits assess the aspects which are essential for online sustainability.
- Running with renewable energy
- Carbon footprint
- Uses HTTP2
- Uses text compression
Design audits
Targets the website assets that convert code to user consumable content.
- Uses WebP images
- Uses lazy loading on images
- Uses font subsetting
- No console logs
Bear in mind that if for any reason your page fails on a certain audit, you will receive a customized feedback including the aspects where your page might have failed.
Let's see an example. Some page did not pass the font sub-setting audit.
The report will state the following:
...
"extendedInfo": {
"value": [
{
"name": "Crimson",
"value": {
"glyphs": "U+A,U+20,U+22,U+2D-32,U+34-36,U+39-3F,U+47,U+48,U+4D,U+4E,U+51,U+54,U+58,U+61-69,U+6C-70,U+72-77,U+79",
"styles": [
"normal"
],
"weights": [
"400",
"700"
]
}
},
{
"name": "Campton-Book",
"value": {
"glyphs": "U+9,U+A,U+20,U+28,U+29,U+2C-34,U+3A,U+3F,U+41-47,U+49,U+4B-50,U+52-58,U+61-70,U+72-79,U+A0,U+E5,U+E6,U+F8",
"styles": [
"normal"
],
"weights": [
"700",
"400",
"500",
"300"
]
}
},
}
]
}
This not only provides you with the styles and weights used for each font, but also it states the used glyphs.
If your fonts EULAs allows for subsetting, you can do so with the provided list of glyphs and a proper tool.
Finally, add them in the unicode-range CSS descriptor:
@font-face{
...
unicode-range: <your_list_of_glyphs>
}
Go on and test your site!
Besides using the CLI, you can download the tool locally with:
npm i sustainability
and use it on your code, like this:
const {Sustainability} = require('sustainability');
const url = 'https://www.example.org';
(async () => {
try{
const report = await Sustainability.audit(url);
console.log(report)
}
catch(e){
//handle the async errors
}
})();
Don't forget to explore the set of settings you can make use of to audit your site. And if you are TS user, you will enjoy first-hand types.
Give it a spin -- https://audits.digital
Alternatively, if you want to test your site right now without dealing with server-side installations, and enjoy from a user-friendly interface to view your reports, visit the DAS website.
Bonus
If your site scores 80/100 or more, you will get an unique badge to show your milestone.
Top comments (0)