͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
| |
|
Web performance blockers can come from many places. Lack of interest of stakeholders and managers and lack of time, skill or expertise to fix identified issues are some of the most common.
Sometimes, what prevents us from implementing a potential web performance improvement is hidden in a licensing agreement (as in the case of the font subsetting tool mentioned below in this issue). A reasonably obscure reason!
The fact that a branding decision might influence performance down the road is an excellent example that we must implement speed (and overall user experience) across the entire organisation, not a single (usually development or SEO) department. The more we raise awareness about page speed within our teams, the more likely we will succeed.
|
| |
|
|
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
|
|
|
|
| |
 |
| |
|
### [Style scoping versus shadow DOM: which is fastest?](https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/)
|
| |
|
[Nolan Lawson](https://toot.cafe/@nolan)
|
|
Go through browser-by-browser web performance benchmarks for shadow DOM and style scoping solutions. Highlight: Firefox’s Stylo engine is smoking fast!
|
|
|
| |
|
 |
| |
|
### [Stress Testing Concurrent Features in React 18: A Case Study of startTransition & 3D Rendering](https://dawchihliou.github.io/articles/stress-testing-concurrent-features-in-react-18)
|
| |
|
[Daw-Chih Liou](https://twitter.com/dawchihliou)
|
|
Dive into a 3D visualization to see how to optimize its performance with React 18’s concurrent rendering. See how concurrent rendering makes the UI more responsive without the shortcoming of debouncing.
|
|
|
| |
|
|
|
|
|
| |
|
# Tools
|
|
|
|
| |
 |
| |
|
### [Subsetting.xyz: Which type foundries support font subsetting?](https://subsetting.xyz/)
|
| |
|
[Jeff Frankl](https://twitter.com/jefffrankl)
|
|
Font file subsetting is a technique of removing unused characters from files to improve performance. This handy resource compiles foundries that allow subsetting (many don’t!).
|
|
|
| |
|
 |
| |
|
### [Storybook Performance Addon](https://storybook.js.org/addons/storybook-addon-performance)
|
| |
|
[Alex Reardon](https://twitter.com/alexandereardon), [Andrew Campbell](https://twitter.com/andrewcampb_ll), [Daniel Del Core](https://twitter.com/danieldelcore) & [Alex Hinds](https://twitter.com/al_hinds)
|
|
Debug and understand React component performance directly in Storybook! You can measure server, client and interaction timings as you work. Note that the addon is currently experimental.
|
|
|
| |
|
|
|
|
|
| |
|
# Talks & Podcasts
|
|
|
|
| |
 |
| |
|
### [Performance Mistakes: an HTTP Archive Deep Dive](https://www.slideshare.net/PaulCalvano/lazy-load-22-performance-mistakes-an-http-archive-deep-dive)
|
| |
|
[Paul Calvano](https://twitter.com/paulcalvano)
|
|
Explore a few standard web performance techniques through HTTP Archive data. See examples of incorrect use and explore the impact and potential benefits of fixing them!
|
|
|
| |
|
|
|
| |
|
# New in Calibre
|
|
|
|
| |
 |
|
### [Release Notes: May](https://calibreapp.com/blog/release-notes-may-2022)
|
|
Here’s our monthly roundup of what was released in May: easily see Chrome and Lighthouse versions for tests, CLI 5.0.1 and more.
|
|
|
| |
|
|
