͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
|
|
LoAF (the Long Animation Frames API, not a sleeping cat, or bread, sadly) is a new initiative building on the Long Task API and addressing its shortcomings. With Interaction to Next Paint (INP) becoming a Core Web Vital shortly, we need more methods to measure and identify responsiveness issues.
What’s interesting about LoAF, is that it provides more granularity—instead of tasks, we can monitor frames and find out when a rendering update is delayed beyond 50ms. This issue features an article about the API, and I encourage you to have a browse!
|
|
|
|
|
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 emergence of the Long Animation Frames API ](https://www.behrouz.nl/article/long-animation-frames-api-enhancing-web-performance)
|
|
|
|
[Behrouz Pooladrak](https://www.behrouz.nl/)
|
|
Have you seen the LoAF acronym and are unsure what it’s about? Here’s a good primer on what the Long Animation Frames API is and what it means for working on performance.
|
|
|
|
|
|
 |
|
|
|
### [Rendering performance](https://web.dev/articles/rendering-performance)
|
|
|
|
Paul Lewis
|
|
Learn about the key areas to watch out for in the pixels-to-screen pipeline that affect rendering performance.
|
|
|
|
|
|
 |
|
|
|
### [Debugging common causes for slow loading in Shopify Liquid storefronts](https://performance.shopify.com/blogs/blog/debugging-common-causes-for-slow-loading-in-shopify-liquid-storefronts)
|
|
|
|
[Sia Karamalegos](https://sia.codes/)
|
|
Debugging web performance can be a multi-day adventure. Learn out how to analyse real user data, find and address the most common performance bottlenecks on Shopify.
|
|
|
|
|
|
 |
|
|
|
### [Who stole my Largest Contentful Paint?](https://calendar.perfplanet.com/2023/who-stole-my-largest-contentful-paint/)
|
|
|
|
[Mateusz Krzeszowiak](https://www.linkedin.com/in/mateusz-krzeszowiak/)
|
|
Largest Contentful Paint has the lowest pass rate out of all Core Web Vitals. While it seems easy on the surface, you can encounter tricky issues that make it harder to optimise.
|
|
|
|
|
|
|
### [What’s the smallest file size for a 1 pixel image?](https://shkspr.mobi/blog/2024/01/whats-the-smallest-file-size-for-a-1-pixel-image/)
|
|
|
|
[Terence Eden](https://shkspr.mobi/blog/)
|
|
Who doesn’t love a good experiment? Here, we learn what compression is best for dealing with tiny files.
|
|
|
|
|
|
|
|
|
|
|
# New in Calibre
|
|
|
|
|
|
 |
|
### [Your Sites dashboard with real-user data from Chrome User Experience Report](https://calibreapp.com/changelog#01-your-sites-crux)
|
|
We refreshed the Your Sites dashboard and added Core Web Vitals data originating from CrUX. Now you can easily switch from synthetic and real user sources!
|
|
|
|
|
|
|
