͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
| |
|
We know poor performing sites and applications have a high environmental footprint. Carbon dioxide emissions rise with substantial traffic, unoptimised, large assets and expensive script computing.
While calculating the exact environmental impact is still a complex feast (despite a handful of tools available), just because we don’t know the precise repercussions of subpar web performance, it doesn’t mean it isn’t worth improving.
Environmental footprint is one of *many* areas that can benefit from a focused commitment to enhancing speed. Living in a time of climate crisis, with very little time to avert a catastrophe, we must try.
|
| |
|
|
Karolina
|
| |
| |
|
|
|
|
#### What’s Performance newsletter?
|
| |
|
Performance Newsletter is a fortnightly mailing by [Calibre](https://calibreapp.com), featuring web performance tools, talks and resources.
Don’t worry—we don’t spam. If you’d like to leave, [unsubscribe]() at any time. Suggest content [here](mailto:[email protected]).
|
|
|
| |
|
| |
|
|
|
| |
|
# Articles
|
|
|
|
| |
 |
| |
|
### [Don’t fight the browser preload scanner](https://web.dev/preload-scanner/)
|
| |
|
[Jeremy Wagner](https://twitter.com/malchata)
|
|
Find out what the browser preload scanner is, how it helps performance, and how you can ensure you’re not preventing it from early resource discovery.
|
|
|
| |
|
 |
| |
|
### [How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks](https://www.smashingmagazine.com/2022/05/google-crux-analysis-comparison-performance-javascript-frameworks/)
|
| |
|
[Dan Shappir](https://twitter.com/DanShappir)
|
|
We shouldn’t conflate website performance with the speed of the underlying JavaScript framework. See what real user Core Web Vitals data uncovers about popular frameworks and speed.
|
|
|
| |
|
 |
| |
|
### [Get to know your browser’s performance profiler](https://blog.atomrc.dev/p/js-performance-profiling/)
|
| |
|
[Thomas Belin](https://twitter.com/atomrc)
|
|
Learn the basics of the Firefox Performance Profiler—the data model of the profiler and how to use the call tree and inverted call stack to identify time-consuming functions in your application.
|
|
|
| |
|
 |
| |
### [Picture perfect images with the modern ![]() element](https://stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element/)
|
| |
|
[Addy Osmani](https://twitter.com/addyosmani)
|
|
Images are crucial to delivering a great experience on the web. This thorough guide will teach you how to prepare and optimise imagery for optimal performance, quality and Core Web Vitals ranges.
|
|
|
| |
|
|
|
|
|
| |
|
# Case Studies
|
|
|
|
| |
 |
| |
|
### [Faster JavaScript Builds with Metro](https://medium.com/airbnb-engineering/faster-javascript-builds-with-metro-cfc46d617a1f)
|
| |
|
[Rae Liu](https://twitter.com/liuraejin)
|
|
Learn how Airbnb migrated from Webpack to Metro and made the largest production build 50% faster (down from 30.5 minutes to 13.8 minutes).
|
|
|
| |
|
|
|
|
|
| |
|
# Tools
|
|
|
|
| |
 |
| |
|
### [Beacon](https://digitalbeacon.co/)
|
| |
|
[Aline](https://aline.to/)
|
|
Use Beacon to see the environmental impact of a web page and learn which metrics and type of resources to focus on when thinking about improvements.
|
|
|
| |
|
|
|
