͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
| |
|
Is it possible to make websites and apps load instantly? Perhaps not entirely *yet*, but more and more approaches and technologies lead us towards an instant experience.
In a way, we’re coming full circle. From static, early days web of HTML and CSS only, we’re now generating JavaScript-free sites built on JavaScript frameworks. Being fast is cool, but being instant seems to be even more alluring. Especially when we’re not only gaining in speed but also transferring less bandwidth, using fewer resources.
Are we going to arrive at instant, fully offline-capable sites? I hope so. Time will tell.
|
| |
|
|
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
|
|
|
|
| |
 |
| |
|
### [How I Learnt To Stop Worrying And Love Animating The Box Model](https://whistlr.info/2021/box-model-animation/)
|
| |
|
[Sam Thor](https://twitter.com/samthor)
|
|
It’s advised to only animate GPU-accelerated CSS properties. Is it okay to animate other properties, too, without sacrificing speed? Let’s find out based on an accordion implementation example.
|
|
|
| |
|
 |
| |
|
### [Bringing instant page-loads to the browser through speculative prerendering](https://web.dev/speculative-prerendering/)
|
| |
|
Leena Sohoni & [Addy Osmani](https://twitter.com/addyosmani)
|
|
Learn about speculative hints, prefetch and prerender: how they work, benefits and drawbacks of instant loading implementations. You can also sign up for the Chrome origin trial to test new prerendering features.
|
|
|
| |
|
 |
| |
|
### [Using Performant Next-Gen Images in CSS with image-set ](https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/)
|
| |
|
[Ollie Williams](https://twitter.com/hypeddev)
|
|
You might know the HTML scrset attribute, but have you heard about image-set in CSS? Conditionally serve next-gen image formats straight from your stylesheet!
|
|
|
| |
|
|
|
|
|
| |
|
# Case Studies
|
|
|
|
| |
 |
| |
|
### [How Swappie increased mobile revenue by 42% by focusing on Core Web Vitals](https://web.dev/swappie/)
|
| |
|
[Lina Hansson](https://twitter.com/LinaCHansson)
|
|
Relative Mobile Conversion Rate (Rel mCvR) can highlight issues specific to mobile conversion. By focusing on improving mobile speed, Swappie notably improved its conversion on mobile devices.
|
|
|
| |
|
|
|
|
|
| |
|
# Tools
|
|
|
|
| |
 |
| |
|
### [Partytown: Run Third-Party Scripts From a Web Worker](https://www.npmjs.com/package/@builder.io/partytown)
|
| |
|
[Adam Bradley](https://twitter.com/adamdbradley)
|
|
Even the fastest websites can be slowed down when adding third party services and tools. Partytown aims to offload the main thread and use web workers to run third party code!
|
|
|
| |
|
 |
| |
|
### [DOM Treemap](https://chrome.google.com/webstore/detail/dom-treemap/albnoggfgnooeefdjpncieecohhblonh)
|
| |
|
[Christian Schaefer](https://twitter.com/derSchepp)
|
|
DOM Treemap is a [Chrome](https://chrome.google.com/webstore/detail/dom-treemap/albnoggfgnooeefdjpncieecohhblonh) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/dom-treemap/) extension that visualises your DOM tree. Find out how big it is and how to decrease the amount of nodes!
|
|
|
| |
|
|
|
