#### PerformanceNewsletter
|
#### Issue 40
|
|
#### Editor’s Note
In the realm of bustling Open Source community, every week, it feels like we see a new framework, tool or way of thinking. It’s easy to be drawn to novelty—legacy and older code instinctively get a bad rep. **Everyone wants to be a pioneer.**
But entering an uncharted territory often means lots of mistakes. Experimentation is valuable only when we are clear on motivations, benefits and the cost.
What if the cost of our strife for new is sacrificing the experience of our users? Who benefits then?
— Karolina
|
|
|
#### article
## Prioritise user experience over dev experience
Currently, there’s a widespread tendency for optimising the developer experience and working on ”the bleeding edge”. In the pursuit of new and exciting, customers and users of the Web are forgotten. UX > DX.
[]()[Putting Devs Before Users: How Frameworks Destroyed Web Performance →](https://uxdesign.cc/putting-devs-before-users-how-frameworks-destroyed-web-performance-6b2c2a506aab)
|
#### article
## Load only what’s necessary with Service Workers
[Phil Walton](https://twitter.com/philwalton) describes advanced Service Worker usage of requesting only a bare minimum of data necessary to load a given page. In his example, this technique yielded ~50% smaller network payloads and decrease in First Contentful Paint. Worth looking into.
[]()[Smaller HTML Payloads with Service Workers →](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/)
#### article
![Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]](https://assets.buttondown.email/rehosted/032d8c7d-40fd-4165-89c3-55d1bed4cdc7.png)
## Learn performance strategies for 2020
Each January, folks at Smashing Mag compile a mammoth of web performance recommendations. Make a cuppa, sit back and read advice spanning from establishing a performance strategy to nitty-gritty details of tooling and pipelines.
[]()[Front-End Performance Checklist 2020 →](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/)
#### tools
## See the impact of speed on conversion
[Sergey Chernyshev](https://twitter.com/sergeyche) built a visualisation tool that aims to help understand the relationship between speed, conversion and bounce rates. Establishing the real cost of sub-par speed is the holy grail of performance. An interesting project to play around with.
[]()[UX Speed Calculator →](https://ux-speed-calculator.netlify.com/)
#### article
## Optimise for hardware and network constraints
Adaptive Loading [was announced](https://calibreapp.com/blog/performance-at-chrome-dev-summit) a few months back at Chrome Developer Summit. Here, [Milica Mihajlija](https://twitter.com/bibydigital) showcases examples and strategies on how to offer appropriate experiences to users based on their hardware and network capabilities.
[]()[Adaptive Loading: Improving Web Performance on Slow Devices →](https://web.dev/adaptive-loading-cds-2019/)
#### talk
## Build fast & delightful mobile animations in React
[Alex Holachek](https://twitter.com/alex_holachek) explains in great detail how to build mobile-first, responsive animations in React. With lots of takeaways, code snippets and demonstrations, she describes how to mimic the intuitiveness and speed of native behaviour in React.
[]()[Building Mobile-First Web Animations in React →](https://mobile-first-animation.netlify.com/)
|
|
####
Spread the word about perf.email
We’d love to see more people reading
[perf.email](https://perf.email/); if you’d
like to help—forward this email to a friend, tweet, or
shout from a rooftop. It goes a long way. ✌🏻
|
|
