Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
6 April 2022

⚡️ 98: Optimise your Largest Contentful Paint

͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
 
Performance Newsletter
[issue 98]()
 
#### Editor’s note
 

Are Single Page Applications here to solve our poor web performance woes? SPAs gained traction a while ago but, in a way, failed to deliver on its near-instant experiences promise.

In some cases, SPAs can bring speed improvements (as portrayed below). But there are also a lot of caveats to their success. When rendering everything client-side, we’re putting the burden of downloading and parse of usually significant assets on the end-user. Their hardware will dramatically influence the user experience, making it more volatile and harder to optimise.

Secondly, building a fast SPA is not an easy feat. You have to execute well not only on the architecture and implementation part but also ensure a fast API, database, efficient caching, and delivery. If even one area is not optimised, page speed starts falling apart.

We want clear-cut answers, but what we get is an engineering puzzle.

 
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 chart showing LCP timings by type
 
### [Optimising Largest Contentful Paint](https://csswizardry.com/2022/03/optimising-largest-contentful-paint/)
 
[Harry Roberts](https://twitter.com/csswizardry/)
Learn how to make Largest Contentful Paint your fastest Core Web Vital: choosing the right element candidate and optimising it to common pitfalls to avoid!
 
WebPageTest landing page waterfall showcasing LCP
 
### [Optimising Core Web Vitals on SPAs](https://simonhearne.com/2022/core-web-vitals-on-spas/)
 
[Simon Hearne](https://twitter.com/SimonHearne)
Single-page applications present some unique challenges for measuring and optimising Core Web Vitals. Find out which optimisations you should be making for your SPA.
 
### [Cache and Prizes: Serious Platforms Don’t Play Favourites](https://infrequently.org/2022/03/cache-and-prizes/)
 
[Alex Russell](https://twitter.com/slightlylate)
Should we bake in frameworks into browsers to improve web performance (and for many other reasons)? Would it bring more gain than harm? Hint: it’s not what you expect.
 
 
 
# Case Studies  
 
A simplified view of how we used a Reverse Proxy directed its traffic in the A/B experiment for Server-side Rendering.
 
### [Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS](https://doordash.engineering/2022/03/29/improving-web-page-performance-at-doordash-throughserver-side-rendering-with-next-js/)
 
[Patrick El-Hage](https://twitter.com/HagePat) & [Duncan Meech](https://www.linkedin.com/in/duncanmeech/)
Read this thorough case study to learn why and how DoorDash moved to an SSR for high-traffic apps. Migrating to Next.js improved page load time by 12%-15% and LCP by 65-67%!
 
 
 
# Browsers  
 
Preview of the Performance Insights panel
 
### [Performance Insights: Get actionable insights on your website's performance](https://developer.chrome.com/docs/devtools/performance-insights/)
 
[Jecelyn Yeen](https://twitter.com/jecfish)
If you have ever analysed speed in the Performance tab, you probably know it’s not an easy feat. Chrome Canary now has a new Performance Insights panel that helps quickly identify speed issues by highlighting critical events and insights. Give it a go and provide feedback!
 
Preview of the Performance panel in Firefox
 
### [Performance Tool in Firefox DevTools Reloaded](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/)
 
[Jan Honza Odvarko](https://twitter.com/janodvarko) & [Nicolas Chevobbe](https://twitter.com/nicolaschevobbe)
Firefox is also making improvements to speed profiling. The Performance panel is now running on the Firefox profiler and comes with testing presets, trace share options and more.
 
 
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, 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:
← Newer ⚡️ 99: Is lazy loading making your CLS worse? Older → ⚡️ 97: Make your pages feel smooth
perf.email
Bluesky
LinkedIn