Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
5 September 2023

⚡ 134: Layout positioning and web performance

͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
 
Performance Newsletter
[issue 134 ]()
 
#### Editor’s note
 
It’s hard to shake the feeling that new metrics, APIs and tooling surrounding web performance prove how critical testing is. While exploring new capabilities, the community discovers side effects (such as portrayed by Eric Portis in this issue). What’s new gets carefully tested and evolves to better suit our needs.
 
For web performance (and the evolution of the web), we absolutely need to design for resilience. To ensure resilience, we must test, test, test and loudly advocate for those whose needs are often not taken into the account under the umbrella of an “edge case”. Nobody is an edge case.
 
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  
 
A comparison of thumbnail filmstrips from loading a website. The eager loaded image shows completion at 3.0s while the lazy loaded one shows completion at 3.5s.
 
### [How layout position impacts three big web performance levers](https://performance.shopify.com/blogs/blog/how-layout-position-impacts-three-big-web-performance-levers)
 
[Sia Karamalegos](https://sia.codes/)
Explore the most common performance issues connected to layout positioning and how to prevent them from happening if you’re using Shopify.
 
Code example of monitoring long tasks
 
### [Long Animation Frames API](https://developer.chrome.com/articles/long-animation-frames/)
 
[Barry Pollard](https://www.tunetheweb.com/) & [Noam Rosenthal](https://indieweb.social/@nomster)
There’s a new proposal from the Chrome team to update the Long Tasks API to provide a better understanding of slow interface updates. Find out what issues it addresses and how you can experiment with it.
 
Incremental rendering process visualised for a google search result
 
### [View Transitions break incremental rendering](https://ericportis.com/posts/2023/view-transitions-break-incremental-rendering/)
 
[Eric Portis](https://ericportis.com/)
The View Transitions specification brings exciting possibilities to the web, such as removing abrupt navigation, maintaining hierarchy and smoothing transitions between pages. However, it comes with drawbacks, too.
 
 
 
# Case Studies  
 
Illustration portraying before code splitting: All code for all pages is served via a single file
 
### [How we reduced the size of our JavaScript bundles by 33%](https://dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent)
 
[Umair Nadeem](https://github.com/umairnadeem/) & [Rich Hong](https://www.linkedin.com/in/hongrich/)
Dropbox replaced their bundler with a more modern solution supporting tree shaking and code splitting. Learn how this process yielded a 33% decrease in bundle size.
 
Bing Model for Driving Performance
 
### [Driving Performance at Microsoft Bing](https://blogs.bing.com/Engineering-Blog/august-2023/Driving-Performance-at-Microsoft-Bing)
 
[Paul Roy](https://www.linkedin.com/in/pauljroy/), [Jason Yu](https://www.linkedin.com/in/jasonyu07msft/) & the Bing Performance Team
Learn how Microsoft Bing implements organisational performance: from principles down to synthetic and real user monitoring tooling.
 
Homepage with DevTools Network inspection enabled and open.
 
### [Modern methods for improving Drupal’s Largest Contentful Paint Core Web Vital](https://www.smashingmagazine.com/2023/08/methods-improving-drupal-largest-contentful-paint-core-web-vital/)
 
[Mike Herchel](https://herchel.com/)
Step through Drupal’s Umami theme performance improvements that result in significantly faster Largest Contentful Paint.
 
 
Calibre
 
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:
← Newer ⚡ 135: Web sustainability guidelines Older → ⚡ 133: Performant imagery for ecommerce
perf.email
Bluesky
LinkedIn