͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
|
|
In a month, Interaction to Next Paint replaces First Input Delay as a Core Web Vital. INP has been available through Chrome User Experience Report (CrUX) and several other tools for a good while now, but the modern over-reliance on JavaScript means that many still miss the mark on INP measurements. For example, only one airline from top ten Skytrax airlines has a good INP value. The slowest one peaks at a whooping 786ms (I fly with this airline, and can confirm it’s truly a horrific user experience).
Now is time to check on your INP measurements and focus on [strategies that mitigate JavaScript issues](https://calibreapp.com/blog/interaction-to-next-paint#how-to-improve-your-inp). The performance inequality gap article by Alex Russel (featured in this issue) only emphasises the importance of not only optimising, but also pausing before adding more script.
Let’s go!
|
|
|
|
|
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
|
|
|
|
|
|
 |
|
|
|
### [The performance inequality gap, 2024](https://infrequently.org/2024/01/performance-inequality-gap-2024/)
|
|
|
|
[Alex Russell](https://infrequently.org/)
|
|
This year’s thorough analysis of how device and network situation evolves in relation to web performance. What got better and what’s stopping us from performance equality?
|
|
|
|
|
|
 |
|
|
|
### [Interaction to Next Paint becomes a Core Web Vital on March 12](https://web.dev/blog/inp-cwv-march-12)
|
|
|
|
[Jeremy Wagner](https://jlwagner.net/) & [Rick Viscomi](https://rviscomi.dev/)
|
|
Here’s everything you need to know to prepare for the official transition to Interaction to Next Paint (INP) as a Core Web Vital.
|
|
|
|
|
|
 |
|
|
|
### [How to embed 3D models on the web](https://cloudfour.com/thinks/how-to-embed-3d-models-on-the-web/)
|
|
|
|
[Jason Grigsby](https://gri.gs/)
|
|
Would you like to drop in a 3D model into your site? Learn about the formats, the UX of viewing them and the performance costs.
|
|
|
|
|
|
 |
|
|
|
### [How many bytes is “normal” for a web font: a study using Google Fonts](https://www.phpied.com/bytes-normal-web-font-study-google-fonts/)
|
|
|
|
[Stoyan Stefanov](https://www.phpied.com/)
|
|
I find it easier to be accurate about what feels acceptable for image file size rather than font size. Find out what a median size and glyph count is.
|
|
|
|
|
|
|
### [Offloading JavaScript with Custom Properties](https://heydonworks.com/article/offloading-javascript-with-custom-properties/)
|
|
|
|
[Heydon Pickering](https://heydonworks.com/)
|
|
Finessing animations is often complex. Browse through this example on how to create a smooth effect without too much JavaScript.
|
|
|
|
|
|
|
|
|
|
|
# New in Calibre
|
|
|
|
|
|
 |
|
### [Track real user Core Web Vitals data with CrUX Dashboard](https://calibreapp.com/blog/crux-dashboard)
|
|
Are you looking to track Core Web Vitals for real user sessions, without any installation overhead? Now, you can quickly check your assessment in the CrUX Dashboard. Just in time for INP optimisations.
|
|
|
|
|
|
|
