
The
[Sustainability Web Design Community Group](https://www.w3.org/community/sustyweb/)
announced the
[Web Sustainability Guidelines](https://www.w3.org/blog/2023/introducing-web-sustainability-guidelines/).
It’s all about _“how to design and implement digital products and services that
put people and the planet first.”_

> This guideline provides best practices and recommendations for reducing the
> environmental impact of web development and design, such as minimizing data
> transfer, optimizing images, using green hosting, and more.

The climate crisis is a real threat, and it’s fantastic that people exist who
care to share their ideas on **how to reduce the impact of our industry**. If
you’ve thought the internet is not a part of the problem, think again.

We are responsible for _“2-5% of global emissions, more than the aviation
industry”._ I want to quote some actions from the
[Web Sustainability Guidelines](https://w3c.github.io/sustyweb/) you can take
immediately to participate in this.

- Minify Your HTML, CSS, And JavaScript
- Avoid Code Duplication
- EnsureYour Solutions Are Accessible
- Use HTML Elements Correctly
- Choose A SustainableHosting Provider
- Optimize Browser Caching
- Be Mindful Of Duplicate Data.

These are just a few suggestions tailored to a **more environmental friendly
web**. The list is long, and I’m sure everybody will find something they can
apply there. The key takeaway I get from this is **anything you already do to
improve the accessibility of your website and the loading performance is also
good for the environment**.

If you’re interested in sustainable web design, check out
[https://sustainablewebdesign.org/](https://sustainablewebdesign.org/), listed
as the **Implementation** of the Web Sustainability Guidelines.


The Sustainability Web Design Community Group announced the Web Sustainability Guidelines. It’s all about “how to design and implement digital products and services that put people and the planet first.”

Web Sustainability Guidelines


Today I learned about the tool [Image Carbon](https://imagecarbon.com/). It's a
tool that helps you to calculate the carbon footprint of your websites images.

After entering a URL it will show you the amount of CO2 you could reduce by
optimizing your images. It can achieve that by uisng the
[Sustainable Web Design](https://sustainablewebdesign.org/calculating-digital-emissions/)
model.

It checks every image on your page for the format and the size and tells you how
you could improve on that.

Here are the results for my website:
[https://www.imagecarbon.com/sites/marcoheine.com](https://www.imagecarbon.com/sites/marcoheine.com)

Reducing your image sizes by compressing them and using better formats is not
only better for your websites performance but also for reducing the carbon
footprint.


Image Carbon is a tool that helps you to calculate the carbon footprint of your websites images

Image Carbon


If you haven't heard of Lighthouse before, it's a tool that helps you improve
the quality of your website. It's available as a Chrome extension and as a Node
module. It's also integrated into Chrome DevTools.

It's my go-to tool for improving the performance of my websites. I test every a
website with it before I publish it, and I test it regularly after that to make
sure, I don't regress.

[Lighthouse 10](https://developer.chrome.com/en/blog/lighthouse-10-0/) was
released recently and includes some major new features.

### TTI is being removed

One of the most significant changes is that
[TTI (Time To Interactive)](https://web.dev/tti/) is being **removed**
completely. Its 10% score weight is shifting to
[CLS (Cumulative Layout Shift)](https://web.dev/cls/) which will then account
for 25% of the performance score.

Here is a comparison of the metrics that are used to calculate the performance
in Lighthouse 8 and Lighthouse 10.

<Image
  src="/images/lighthouse8-vs-lighthouse10.webp"
  alt="Lighthouse 8 vs Lighthouse 10 performance score metrics"
  caption="Lighthouse 8 vs Lighthouse 10 performance score metrics"
  width={762}
  height={1014}
/>

Google explains the removal of TTI as "being overly sensitive to outlier network
requests and long tasks." They say that other metrics are better heuristics and
tend to correlate better to the Core Web Vitals.

The shifted and increased score weight of CLS will **improve the performance the
score of about 90% of all websites**.

### Back/forward cache

Besides the removal of TTI and the increased score weight of CLS, there are two
completely new features in Lighthouse 10.

**Back/forward cache** will be added as a **new audit**. It will navigate away
from the test page, go back to it to see if it's bfcache-able.

[Bfcache](https://web.dev/bfcache/) will restore the page layout and execution
state nearly instantly, improving the user experience dramatically. However, if
the website prevents the browser from restoring a page from bfcache, the audit
will be impacted negatively and list reasons for the failure.

### Paste-preventing Inputs

Another new audit is **paste-preventing-inputs**. It will check if users can
paste into any input fields on the page. Before that, there was only a check for
password fields. Paste-preventing is a net-negative user experience and should
be avoided.

Some significant improvements to Lighthouse! They are available in the CLI tool,
right away and they will land in Chrome stable in Chrome 112.


Lighthouse 10 was released recently and included some significant new features. In this Today-I-learned Post will have a look at everything new.

What's new in Lighthouse 10


This post is not an actual Today I learned because I knew about this tool for
several months. Nevertheless, I want to share it with you because it's a great
tool. I use it almost weekly.

If you ever wondered what tool to use to **improve your images for better
website performance**, you should check out the
[Squoosh App](https://squoosh.app/). The web app allows you to **compress**
images in various formats.

You upload your image and choose the compression settings you want. The Squoosh
App will then compress your image, and you can download it.

It offers a lot of settings, like resizing, choosing the format, quality, etc.
You can also compare the original image with the compressed one with a neat
slider.

One of the best things about Squoosh is if you're worried about **privacy**:
Images always stay on your device since Squoosh does all the work locally.

I use it to compress all the images on my website. I use the WebP format and
resize it to drop all my images below 100kb. So if you haven't already, check
out the Squoosh App and improve your website performance. I totally recommend
it!


The Squoosh App is a web app that allows you to compress images in a variety of formats.

Squoosh App


As a frequent reader of <a href="https://www.stefanjudis.com/" target="_blank">Stefan Judis blog &#8599;</a> I often come across the stats in the bottom right of his website. It shows for example the amount of ms for the first and the largest contentful paint of his website. 

I was curious about how he gets or calculates these values. Turns out it's an npm package you can easy implement on your own website. It's called the <a href="https://www.npmjs.com/package/web-vitals-element" target="_blank">web vitals element &#8599; </a>.

It's super cool to see that on your website and it kind of encourages others too to improve their performance and showcase their efforts. 

Web Vitals Element ist a component that displays the Core Web Vitals metrics of your website.

Web Vitals Element


Third-Party JavaScript is one of the number one things that slows down modern
websites. And it's often hard to improve as you are unable to change the code
itself, because you know, it's not yours, it's from a third party.

Milica shares great ways to improve the loading of third-party JS in this <a href="https://web.dev/efficiently-load-third-party-javascript/" target="_blank">article &#8599;</a>.

She specifies two ways to deal with third-party JS. The first one is: if you're
able to and it doesn't add value, get rid of it, which seems to be the obvious
one. The second one describes the optimization of the loading process.

Therefore she explains several techniques which make use of modern JS and
improve the loading process of third-party JS drastically.

I learned a lot by following along with Milica's article and could improve my
own loading process of third-party JS.


Today I learned, how to efficiently load third-party JavaScript and share it on this post

Efficiently load third-party JavaScript


While
[Suspense for Data fetching](https://reactjs.org/docs/concurrent-mode-suspense.html)
is still an experimental feature in React and is not yet available in a stable
release, React 16.6 also added a `<Suspense>` component.

This `<Suspense>` component lets you specify the loading indicator in case some
components in the tree below it are not yet ready to render.

This is a super cool and easy way to add a loading state with a loading
component to your React application.

Here is a simple example:

```javascript
import * as React from 'react'
import { LoadingComponent } from './loading-component'

const ComponentWithAsyncData = React.lazy(() =>
  import('./component-with-async-data')
)

const App = () => {
  return (
    <React.Suspense fallback={<LoadingComponent />}>
      <ComponentWithAsyncData />
    </React.Suspense>
  )
}

export default App
```

While the `<ComponentWithAsyncData />` may not be ready to render yet because
it's still waiting for an API Request, React.Suspense will handle that and show
our `<LoadingComponent />` instead.

What's even cooler, is that React can also lazy load the component with the
async data by using `React.lazy`. So it's not even imported, until it's ready.
Awesome!

You rean read more about it in the
[official React docs](https://reactjs.org/docs/react-api.html#reactsuspense).

So that's what I learned today. What about you?

Just send me an [email](mailto:marco@marcoheine.com) or message me on
[twitter](https://twitter.com/home) about your learnings. I would really like to
here from you!


React Suspense Lazy Loading Components


The React Hook useMemo ist not the solution for all your performance problems.
In most cases memoizing costs more CPU power than not doing it.

Learn more: https://kentcdodds.com/blog/usememo-and-usecallback


Today I learned