͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
#### Editor’s note
|
|
|
|
The JavaScript bundle is trying hard to become a tool for many jobs. Have some CSS or SVG? You can throw it in. But just because we can, it doesn’t mean we should. Just as the first article in today’s issue illustrates, there are multiple drawbacks of adding resources to the bundle which should be served separately.
To build for the web, it’s essential we know and understand how to apply its fundamentals. How to write semantic markup in different languages, and how to serve and compress specific assets. The more stable our scaffolding is, the better foundations we have for what we build.
|
|
|
|
|
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
|
|
|
|
|
|
 |
|
|
|
### [Breaking Up with SVG-in-JS in 2023](https://kurtextrem.de/posts/svg-in-js)
|
|
|
|
[Jacob 'Kurt' Groß](https://kurtextrem.de/)
|
|
The presence of SVGs in JavaScript bundles comes with a hefty performance and accessibility costs. Here are several strategies on how to get the SVGs out of the bundle back to HTML, where it belongs.
|
|
|
|
|
|
 |
|
|
|
### [In Defence of DOMContentLoaded](https://csswizardry.com/2023/07/in-defence-of-domcontentloaded/)
|
|
|
|
[Harry Roberts](https://csswizardry.com/)
|
|
Many deem DOMContentLoaded as an obsolete metric. Is there any usefulness to it still, and if yes, why would we track it?
|
|
|
|
|
|
|
### [Fixing INP with a viewport tag](https://www.phpied.com/fixing-inp-with-a-viewport-tag/)
|
|
|
|
[Stoyan Stefanov](https://www.phpied.com/)
|
|
Many of you might have gotten an alert about high Interaction to Next Paint in the last few days. Here’s what you could do about it.
|
|
|
|
|
|
|
|
|
|
|
|
|
# Case Studies
|
|
|
|
|
|
 |
|
|
|
### [A case study on scroll-driven animations performance](https://developer.chrome.com/en/blog/scroll-animation-performance-case-study/)
|
|
|
|
[Yuriko Hirota](https://www.linkedin.com/in/yurikohirota/)
|
|
Scroll-driven animations can enhance functionality or visuals, but only if they’re performant. Learn about a new set of APIs that help create even better animations with both CSS and JavaScript.
|
|
|
|
|
|
|
|
|
|
|
|
|
# Tools
|
|
|
|
|
|
|
### [Image performance enhancements in WordPress 6.3](https://make.wordpress.org/core/2023/07/13/image-performance-enhancements-in-wordpress-6-3/)
|
|
|
|
[Felix Arntz](https://felix-arntz.me/)
|
|
WordPress 6.3 comes with several changes to improve Largest Contentful Paint times. They include adding fetchpriority=high to elements that are most likely the LCP element and improving automatic handling of lazy loading.
|
|
|
|
|
|
|
|
|
|
|
|
|
# Courses, Talks & Podcasts
|
|
|
|
|
|
 |
|
|
|
### [Catching up with web performance: Karolina Szczur](https://catchingup.dev/podcasts/karolina-szczur/)
|
|
|
|
[Karolina Szczur ](https://thefox.is)& [Tanner Hodges](https://tannerhodges.com/)
|
|
In this episode, I’m interviewed by Tanner about my journey of building web performance tooling, the most common misconceptions and why we shouldn’t gate keep web performance from anyone. Tune in.
|
|
|
|
|
|
|
|
