͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
| |
|
Web performance is a difficult area. Making websites and apps fast is an ongoing project that easily can span months (if not years). Fostering a culture that makes those improvements possible is an even more involved task, requiring organisational buy-in. Building reliable tools that provide understandable reports, especially for people in various roles, is quite a feat, too (we might know a thing or two here).
Openly acknowledging the complexity can bring newfound appreciation for the task we’ve committed to.
📣 Speaking about building web performance tools, **we’re hiring!** We’re looking for [Lead Front-end Developer (React)](https://calibreapp.com/careers/front-end-developer) and a [Lead Back-end Developer (Rails)](https://calibreapp.com/careers/back-end-developer) to help us grow Calibre’s speed tools. **All roles are full time (4 days a week) and remote in Australia. **
|
| |
|
|
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
|
|
|
|
| |
 |
| |
|
### [Optimizing SVG Patterns to Their Smallest Size](https://css-tricks.com/optimizing-svg-patterns/)
|
| |
|
[Bence Szabó](https://twitter.com/finnhvman)
|
|
Learn radical ways of optimizing SVG patterns without affecting the overall image quality—this example shows an SVG pattern that started at 197 bytes and decreased to 44 bytes (77.7% reduction!).
|
|
|
| |
|
 |
| |
|
### [Web Animation Performance Fundamentals: How to Make Your Pages Look Smooth](https://www.freecodecamp.org/news/web-animation-performance-fundamentals/)
|
| |
|
[Reza Lavarian](https://twitter.com/lavary_)
|
|
Something must be off when a page doesn’t respond swiftly to user interactions or has jerky movements. Learn how browsers turn code into pixels and how to deliver frames consistently on time!
|
|
|
| |
|
|
### [Making the world’s fastest website, and other mistakes](https://dev.to/tigt/making-the-worlds-fastest-website-and-other-mistakes-56na)
|
| |
|
[Taylor Hunt](https://twitter.com/tigt_)
|
|
This article might be for you if you’re into an entertaining story of five stages of web performance grief and how to fit a Fortune 20 site in 20kB.
|
|
|
| |
|
 |
| |
|
### [Implementing JavaScript Delay for Cookie Consent Banner](https://dariusz.wieckiewicz.org/en/implementing-js-delay-for-cookie-consent-banner/)
|
| |
|
[Dariusz Więckiewicz](https://twitter.com/dariusz_w)
|
|
A quick primer on avoiding Cumulative Layout Shift issues when implementing cookie consent banners (hint: meaningfully delay its display).
|
|
|
| |
|
|
|
|
|
| |
|
# Browsers
|
|
|
|
| |
|
### [New WebKit Features in Safari 15.4](https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/)
|
| |
|
[Jen Simmons](https://twitter.com/jensimmons) & [Jon Davis](https://twitter.com/jonathandavis)
|
|
Safari 15.4 now supports lazy loading with the loading attribute on image elements. Yay!
|
|
|
| |
|
|
|
|
|
| |
|
# Talks & Podcasts
|
|
|
|
| |
 |
| |
|
### [JS Party #216: Enabling performance-centric engineering org](https://changelog.com/jsparty/216)
|
| |
|
[Dan Shappir](https://twitter.com/DanShappir), [Amal Hussein](https://twitter.com/nomadtechie) & [Nick Nisi](https://twitter.com/nicknisi)
|
|
Hear how Dan Shappir led a cultural transformation that propelled Wix sites to be faster than most other React apps in the wild.
|
|
|
| |
|
|
|
