͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
| |
|
Having a single number, the Performance Score, to portray the speed of your sites and applications is both helpful and dangerous.
|
| |
|
|
A bird’s eye view of performance can be a guiding light—something to share with co-workers who might not have an understanding of performance or another helpful reading to be used alongside other metrics.
|
| |
|
|
Focusing on a single measurement, even if it comprises of several metrics, can hide a myriad of less obvious issues. Keep an eye on the Performance Score, but understand how it works and be prepared to investigate further.
|
| |
|
|
As much as we want it, there’s no number quantifying user experience.
|
| |
|
|
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 Algorithm Behind the Performance Score (and How to Improve Yours)](https://calibreapp.com/blog/how-performance-score-works)
|
| |
|
[Karolina Szczur](https://twitter.com/fox)
|
|
Learn what has changed in the Performance Score algorithm (a lot!), get answers to the most common questions and improve yours.
|
|
|
| |
|
 |
| |
|
### [How to Use AVIF: The New Next-Gen Image Compression Format](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/)
|
| |
|
[Dan Klammer](https://twitter.com/danklammer)
|
|
Prepare for the arrival of WebP successor, the AVIF format, with actionable tips on progressively enhanced implementation.
|
|
|
| |
|
 |
| |
|
### [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)
|
| |
|
[Una Kravets](https://twitter.com/una) & Vladimir Levin
|
|
Get to know the new, speed-boosting CSS property that enables the user agent to skip an element’s rendering work, including layout and painting, until it is needed.
|
|
|
| |
|
 |
| |
|
### [Infinite Scroll without Layout Shifts](https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/)
|
| |
|
[Addy Osmani](https://twitter.com/addyosmani)
|
|
Understand the accessibility implications of infinite loading approaches and how they will negatively impact your Cumulative Layout Shift metric.
|
|
|
| |
|
 |
| |
|
### [Measuring and examining TLS 1.3, IPv4, and IPv6 performance](https://nooshu.github.io/blog/2020/07/30/measuring-tls-13-ipv4-ipv6-performance/)
|
| |
|
[Matt Hobbs](https://twitter.com/therealnooshu)
|
|
Learn how to collect data about connection timings and see the benefits of enabling TLS 1.3.
|
|
|
| |
|
|
|
|
|
| |
|
# Tools
|
|
|
|
| |
 |
| |
|
### [Layout Shift GIF Generator](https://defaced.dev/tools/layout-shift-gif-generator/)
|
| |
|
[Chris Johnson](https://twitter.com/defaced)
|
|
Layout Shift Generator helps to quickly uncover which elements on your sites might be contributing to poor Cumulative Layout Shift readings and worse overall Performance Score.
|
|
|
| |
|
|
|
