⚡ 130: Why frontend must build better

        5 July 2023

⚡ 130: Why frontend must build better

         ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
        ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

[issue 130]()

#### Editor’s note

I recently went on a long-overdue trip to Europe to see my family. I’ve been living in Australia for over eight years, and with each trip back I notice a range of differences between the two. One of the prominent ones is the choice of devices. In Melbourne, the latest iPhones ([iOS has ~60% of the market share](https://gs.statcounter.com/os-market-share/mobile/australia/#monthly-202206-202306)), AirPods, and MacBooks are commonplace. In Kraków, while you see those too, they’re far from mainstream ([Android is ~83% of market share](https://gs.statcounter.com/os-market-share/mobile/poland/#monthly-202206-202306)).

It’s easy to make assumptions: everyone has a new(ish) device. All of these devices are powerful enough to promptly render sites and apps because they are “modern”. Nothing further from the truth, which is one of the subjects of this issues’ article from Alex Russel. We must build better.

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

### [Too much JavaScript? Why the frontend needs to build better](https://thenewstack.io/too-much-javascript-why-the-frontend-needs-to-build-better/)

[Alex Russell](https://infrequently.org/) & [Loraine Lawson](https://thenewstack.io/author/loraine-lawson/)

Smartphones are the primary device for internet access, but not the high-end iPhone or Galaxy Ultra. Here’s why we should be testing and building for low to mid-range devices, how bias comes into play and what it can cost a business to build for expensive devices only.

### [What does the image decoding attribute actually do?](https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/)

[Barry Pollard](https://www.tunetheweb.com/)

Find out what the decoding attribute does: can it improve web performance? Does it block the main thread? Is it worth using as a strategy for improving image rendering?

### [First-person scrollers](https://meyerweb.com/eric/thoughts/2023/06/20/first-person-scrollers/)

[Eric Meyer](https://meyerweb.com/)

To make our experience of the web smooth, browser engines must render websites at 60 frames per second, while maintaining re-renders as anything changes. This is why we should be as focused on render and paint optimisations as much as asset size.

# Tools

### [capo.js: check how  element order and priority affect performance](https://rviscomi.github.io/capo.js/)

[Rick Viscomi](https://rviscomi.dev/)

The order of elements in the <head> element affects their priority, and then, perceived performance. Check if your resources are fetched and loaded in the most efficient way with capo.js!

# Courses, Talks & Podcasts

### [Catching up on web performance: Kashyap Kondamudi](https://catchingup.dev/podcasts/kashyap-kondamudi/)

[Kashyap Kondamudi](https://kgrz.io/) & [Tanner Hodges](https://tannerhodges.com/)

In this episode, Kashyap talks about getting into open source, working on Flipkart’s progressive web app, and diving into real user metrics.

### [Style recalculation secrets they don’t want you to know](https://www.youtube.com/watch?v=WRiOWJZoKlw&ab_channel=WebConferencesAmsterdam)

[Patrick Brosset](https://patrickbrosset.com/)

How do browsers recalculate styles when a page changes? Can the way you write CSS impact the speed of the recalculation process? Learn how browser engines react to DOM changes, apply styles to the page, and how to ensure there are no bottlenecks

                          This email is brought to you by the team at
                          [Calibre](https://calibreapp.com). We automate web performance testing, reporting and
                          alerting, so you don’t have to.

                                      Performance Newsletter is sent from the
                                      traditional lands of the Wurundjeri people
                                      of the Kulin nation. We acknowledge that
                                      sovereignty was never ceded and pay
                                      respects to the Elders past and present.

                                      Send your suggestions, links and feedback
                                      to
                                      [[email protected]](mailto:[email protected]).

[View or share this email →]()

[Quickly unsubscribe →]()

[Browse older issues →]()

**Sent by** 
Calibre Analytics

V119 /
                                          425 Smith Street
Ngár-go
Fitzroy
                                          VIC 3065
Australia

                                Don't miss what's next. Subscribe to Performance Newsletter:

                        Email
                        *

                    ← Newer

                ⚡ 131: Breaking up with SVG-in-JS

                    Older →

                ⚡ 129: How CDNs influence performance