⚡ 107: Speed impact of generated JavaScript

        9 August 2022

⚡ 107: Speed impact of generated JavaScript

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

[issue 107]()

#### Editor’s note

We have a lot of options for the compression of assets. Images, video, script, CSS and HTML–we can condense them to the tiniest size. One would think our transfer size woes are over.

To make things harder, what we transfer differs from what the browser has to unpack and compile. This can be exceptionally costly in the case of JavaScript, but <a class="editor-rtfLink" href="https://calibreapp.com/blog/css-performance#watch-the-size-of-css" style='color: #4a6ee0;background: transparent;margin-top: 0pt;margin-bottom: 0pt;border-collapse: collapse;mso-line-height-rule: exactly;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-decoration: none;font-weight: normal;margin: 0;padding: 0;mso-effects-shadow-color: #2B2B2B;' target="_blank"><span data-preserver-spaces="true" style="background: transparent;color: #4a6ee0;margin-bottom: 0pt;margin-top: 0pt;border-collapse: collapse;mso-line-height-rule: exactly;">significant CSS</span></a> or HTML file size also brings headaches. 

To offer a great experience, we need to pay attention to not only size but also execution, rendering and responsiveness.

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

### [Understanding the Performance Impact of Generated JavaScript](https://blog.sentry.io/2022/07/22/performance-impact-of-generated-javascript)

[Abhijeet Prasad](https://www.linkedin.com/in/abhijeet-prasad/?originalSubdomain=ca) & [Katie Byers](https://www.linkedin.com/in/byerskatie)

Understanding how your code is being transpiled and downcompiled is essential because your bundle size is affected by your final JavaScript files. Check out strategies to reduce the script file size.

### [For a change, let’s talk web performance: HTTP 103 (Early Hints)](https://www.polarsignals.com/blog/posts/2022/07/26/http-103/)

[Manoj Vivek](https://twitter.com/vivek_jonam)

Early Hints just shipped in Google Chrome 103, so it’s a good time to learn what they are and how they can help improve initial load performance!

### [Reflections on the Behavioral Aspects of Web Performance](https://www.ethangardner.com/posts/reflections-behavioral-aspects-web-performance/)

[Ethan Gardner](https://twitter.com/ethangardner)

Getting web performance buy-in is difficult, especially within smaller organisations. Find out what behavioural approaches can make you a successful web performance advocate.

# Case Studies

### [Introducing web workers to improve subito.it performance (part 1)](https://medium.com/adevinta-tech-blog/introducing-web-workers-to-improve-subito-it-performance-part-1-baac8ee5b09e)

[Alberto De Agostini](https://twitter.com/albertodeago88) & [Alessandro Grosselle](https://twitter.com/ale_jarvis)

Learn what web workers are, when to use them and why the Subito team decided to embark on an engineering challenge to implement them for better performance.

# Browsers

### [What’s New In DevTools (Chrome 104)](https://developer.chrome.com/blog/new-in-devtools-104/)

[Jecelyn Yeen](https://twitter.com/jecfish)

There are a few notable web performance updates to Google Chrome Developer Tools! You can now visualize *performance.measure()* marks and simulate hardware concurrency.

# Courses, Talks & Podcasts

### [HTTP 203: DOM ready events considered harmful](https://youtu.be/_iq1fPjeqMQ)

[Jake Archibald](https://twitter.com/jaffathecake) & Cassie Evans

DOM ready events are not uncommon, but they can slow down your app in unexpected ways. Walk through code examples explaining the bottlenecks and alternative solutions!

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, present and emerging.

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

[View or share this email →]()

[Quickly unsubscribe →]()

[Browse older issues →]()

**Sent by**

<a style='border-collapse: collapse;mso-line-height-rule: exactly;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-decoration: none;font-weight: normal;margin: 0;padding: 0;mso-effects-shadow-color: #2B2B2B;color: #ffffff;'>Calibre Analytics<br/><br/>149A Brunswick Street<br/>Ngár-go<br/>Fitzroy VIC 3065<br/>Australia</a>

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

                        Email
                        *

                    ← Newer

                ⚡ 108: Can browsers help load third-party resources?

                    Older →

                ⚡ 106: Can SVG symbols affect performance?