͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
| |
|
Data is powerful, but *how* we collect, analyse and talk about it has even more impact. We can craft compelling stories based on data—it’s easy to handpick figures and focus on what’s most impressive (especially speed gains) or unexpected.
The devil is in the detail, some might say. And for web performance, it truly is. We cannot meaningfully and truthfully speak about user experience if we assume one number can represent countless combinations of people’s browsing circumstances. It’s a compelling abstraction, but it causes more harm than gain.
When talking about web performance, we must be specific, not look for generalisations.
|
| |
|
|
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
|
|
|
|
| |
 |
| |
|
### [Building an effective Image Component](https://web.dev/image-component/)
|
| |
|
Leena Sohoni, [Kara Erickson](https://twitter.com/karaforthewin) & [Alex Castle](https://www.linkedin.com/in/atcastle/)
|
|
Images are often performance-costly. They’re also challenging to implement in a bulletproof way. Learn how the Aurora team collaborated with Next.js on an effective image component.
|
|
|
| |
|
 |
| |
|
### [My Challenge to the Web Performance Community](https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/)
|
| |
|
[Phil Walton](https://twitter.com/philwalton)
|
|
Almost half of all pages with 100 Lighthouse Performance Score don’t meet the Core Web Vitals thresholds. Perfect lab results don’t guarantee a good real user experience. Learn how to analyse and talk about speed.
|
|
|
| |
|
|
### [What Is an Early Hints 103 Status HTTP Code, and How It Helps Load Times](https://feedthecuriosity.com/web-development/what-is-an-early-hints-103-status-http-code-and-how-it-helps-load-times/)
|
| |
|
[Shaleen Shah](https://www.linkedin.com/in/shaleenhshah/)
|
|
The 103 Early Hints HTTP status code will allow preloading assets before the main response is served, bringing speed benefits. Chrome 95+ already has experimental support for Early Hints if you’d like to try it out!
|
|
|
| |
|
|
|
|
|
| |
|
# Tools
|
|
|
|
| |
 |
| |
|
### [Core Web Vitals Checker](https://calibreapp.com/tools/core-web-vitals-checker)
|
| |
|
[Calibre](https://calibreapp.com/)
|
|
Check critical user experience and speed metrics in one click. Learn where to make improvements based on real user data from Chrome User Experience Report (CrUX).
|
|
|
| |
|
 |
| |
|
### [GPU.js: GPU accelerated JavaScript](https://gpu.rocks/#/)
|
| |
|
|
|
GPU.js automatically transpiles simple JavaScript functions into shader language and compiles them, so they run on your GPU with much faster computation.
|
|
|
| |
|
|
|
| |
|
# New in Calibre
|
|
|
|
| |
 |
|
### [Release Notes: September](https://calibreapp.com/blog/release-notes-sep-2021)
|
|
Here’s our monthly roundup of what was released in September: Test speed based on GitHub branch names, webhook alerts for Performance Budgets, Lighthouse 8.5 and more.
|
|
|
| |
|
|
