Community Session: Web Performance AMA

[jacobparis]

Community Session: Web Performance

Join the Vercel Community for a Web Performance AMA on Sept 3.

To join in the live chat - join the community and click “Going” above

---

Speakers

Dom Sipowicz (@dom-vercel)
Senior Solutions Engineer
X | LinkedIn

[jonoroboto]

Yeeeeeeeeah! Get us signed up for this. Can’t wait to watch this, got the whole team on standby.

[avik-creator]

Really Excited for this one. Cleared all my schedule for this.

[dom-vercel (Dom Sipowicz)]

Do you have any questions about Web Performance you want me to cover?

[sneroboto]

Super excited for this one!

[jonoroboto]

Yeah, I actually would love to know your opinion on getting the perfect Next/Image.

I suspect if you don’t care about build times, AVIF is the de facto format. But the big question here, is what do you do personally when building a website when there are third-party providers giving you image optimisation? E.g., in our case, we have Sanity Image and we have Next/Image in most projects. Should we stick to one? How do we achieve ultra-crisp imagery while still staying within the 100kb-200 kb mark?

[arkmaster123]

look forward to listening in on this one!

[pawlean (Pauline P. Narvas)]

See you there, Avik!

[pawlean (Pauline P. Narvas)]

Get your questions ready!

[techchintan (Chintan)]

Hey @dom-vercel!

I hope you’re doing well. I’m really excited to learn more about web performance.

I want to understand how we can address the annoying LCP (Largest Contentful Paint) and FCP (First Contentful Paint) errors.

I noticed a suggestion to “Improve image delivery – Potential savings of 4,170 KiB.”

Maybe I’m just being lazy or feeling dumb to ask this, but earlier this year I optimized my game studio, QwiQ Games, and I struggled to resolve this issue in almost all my personal projects.

If possible, I’d love to discuss this further.

Let’s go!

[dom-vercel (Dom Sipowicz)]

Great question! You can definitely use both approaches effectively - Next/Image with Vercel’s optimization or third-party providers like Sanity’s Image CDN.

For the Sanity + Next.js combo specifically:
You have two solid options:

• Use next-sanity-image to leverage Sanity’s CDN directly
• Stick with next/image and let Vercel handle the optimization

My take on the approach:
The next/image component already handles the heavy lifting for Core Web Vitals (LCP, CLS) regardless of which optimization backend you choose. Beyond that, it’s really about fine-tuning for cost efficiency and UX.

Why I lean toward Vercel’s optimization:
The observability is fantastic - you get detailed insights in the Image Optimization tab under Observability (https://vercel.com/docs/observability/insights#image-optimization). This data is invaluable for understanding your actual usage patterns and optimization impact.

For Image size within 100-200kb:

• AVIF is indeed the gold standard but use data and observability to confirm your use case
• Vercel’s automatic format selection handles this intelligently based on browser support
• The key is finding the right quality/size balance, which Vercel’s analytics help you monitor

And knowing you, @jonoroboto - if you find the existing Sanity plugin too limiting, I’m sure you’d either contribute back to the project or build something even better open source Roboto Studio version for the community!

Personally, I’d go with Vercel’s optimization for the observability alone.

PS. Yes, I used v0 to answer that question, however I did put my input into the prompt!

[dom-vercel (Dom Sipowicz)]

Are you using Vercel Speed Insights? Maybe your users are actually having a good experience in the real world and Lighthouse is just complaining, but that would be over-optimization. This is exactly the case I want to cover in the AMA!

[techchintan (Chintan)]

I was using it earlier, but due to some changes and speed issues, I’ve commented it out for now. I’m not sure how to resolve this.

Let’s discuss how we can determine whether my end users are having a good experience with this issue in the real world, while Lighthouse only raises concerns.

[dom-vercel (Dom Sipowicz)]

1. Speed Insights should not affect UX or Web Perf. That would be something off.
2. You can use sampling - https://vercel.com/guides/sending-sample-to-speed-insights

[jonoroboto]

Wow, ok, didn’t know about the image observability. More importantly I can’t believe you popped that into v0

Funny you should mention the next-sanity-image package. We actually used it many years back, but there was some Typescript errors before there was a first party solution to Typescript generation. I think we are probably going to try the Next native way on the Roboto Studio website and report back with the results

[bestcodes]

This is gonna be interesting!

[purohitdheeraj (Dheeraj Purohit)]

Really excited for this one!
Would be great to see optimization for multiple images/videos,
especially in CMS use cases with next.js as Jono mentioned above

Also, really appreciate this Vercel community version

[system]

Originally sent in Community Session: Web Performance

pawlean

Can't wait for this!

Hi, everyone!

2

philwolstenholme

Hi all

2

pawlean

@philwolstenholme Nice to see you here :D Been a while!

If you have any questions for Dom, drop them here!

jacobparis

hey everyone

2

sneroboto

Go Dom

2

jonoroboto

Yoooo, LFG

3

pawlean

Roboto Team represent

2

2

philwolstenholme

Related INP question that might be about to be answered! What sort of changes have you seen help people improve their INP when tag managers are involved… I got excited about Partytown (or the worker strategy for the Next.js Script component) but it seems like it hasn't really taken off?

2

1

1

arkmaster123

happy to be here!

pawlean

Hi, @arkmaster123!

1

arkmaster123

so we sometimes build with a separate FASTAPI / Django for llm complex builds then frontend nextjs , when would you decide to just go "put it all in nextjs via API routes" and have a separate API deployed

and would this affect web performance?

2

2

jonoroboto

Master of the TLA's

jacobparis

Enterprise e-commerce migration cheat-sheet: essential terms and definitions

This cheat sheet provides a comprehensive guide to essential terms and definitions for enterprise e-commerce migration. While the terminology originates from the e-commerce sector, it’s also applicable to related projects like product directories—where functionalities like “add to favorites” replace traditional basket and checkout systems—or any directory-based applications involving classifications, categories, hierarchical structures, searching, filtering, sorting, and pagination. The renderi…

4

6

1

pawlean

One of the best posts on here

jonoroboto

Question on enterprise - when you're targeting a legacy Next.js environment, think pages router, 3/4 years old, what's the first thing you tackle when looking for performance gains, what's the lowest hanging fruits?

1

3

jacobparis

GitHub - vercel-solutions/meganav-demo

jonoroboto

I'm super interested in the no-javascript meganav

4

philwolstenholme

Or a browser extension?

arkmaster123

may the demo gods be with you

3

3

jonoroboto

That's actually nuts that it works with js off

I didn't know you could do that (stealing the code as we speak)

3

4

4

anshumanb

it's crazy. IK

philwolstenholme

A related SEO gotcha that some people make with navigation menus is using JSX conditional rendering to show and hide the menu. This means the nav links aren't in the initial SSR'd HTML by default – and so search engine crawlers can't find the links! If you use CSS to toggle the menu then the links are always present in the HTML for bots, just not always visible.

2

arkmaster123

yes took the code too for our agency :) thanks!

jonoroboto

<3

4

avik-creator

Really excited

1

sneroboto

Super insightful, thanks

avik-creator

Before next15 it was cached by default but after that it became opt in

jacobparis

yeah that was my favourite change in 15, was way easier to reason about

2

avik-creator

Yes

These stories feels exciting to hear, but staying there is fire place

pawlean

Great tool suggestions!

4

philwolstenholme

webpagetest – you can use it to record a 'before' and 'after' video of loading a page after making a change (e.g. test two different preview environments) then use this snippet or something like it to turn the two videos into a side-by-side video to show in demos, impress stakeholders/customers etc

2

avik-creator

Can we get these notes?

Really love the Vercel Speed insights. It is really detailed

2

2

anshumanb

Demos over memos!

3

avik-creator

A new sentence we learned

philwolstenholme

The $ is a chrome devtools thing @jacobparis Console Utilities API reference  |  Chrome DevTools  |  Chrome for Developers

2

2

jacobparis

ah TIL

I've been doing doucment.querySelector() liek an animal

philwolstenholme

me too! I always forget!

anshumanb

$0 is the element you last clicked on the page

1

jacobparis

$_ is the last return value in the console

I do copy($_) a lot to copy to clipboard

avik-creator

Not everything needs to be optimized. Over optimizing is not that good always

sneroboto

In our experience, sometimes it's hard to convey the value of performance, especially if the client's team is non-technical. It's interesting to see your method to test buy-in

avik-creator

So testing everything is the key

jonoroboto

Can we get Dom back on for personalisation and A/B testing at some point. It's so difficult to find bleeding edge info about it. So much is old and slow

4

philwolstenholme

I've learnt a lot from these sort of resources:

• Optimizing web experiences with Vercel Edge Middleware. — Vercel
• Personalization strategies that power ecommerce growth - Vercel
• Find your Template

There's an example repo showing the 'use middleware to switch between ISR'd pages for the 'A' and the 'B' technique here: examples/edge-middleware/ab-testing-simple at main · vercel/examples · GitHub

jacobparis

Introducing the Runtime Cache API - Vercel

3

avik-creator

Jacob is super fast

A great question for me. But I like to use tanstack query for it

using server side rendering?

during that? For calling external api?

1

1

jacobparis

think of a scenario where you have to call two or three backend services to get the data needed for a page

avik-creator

Hm, then how can we optimize it?

jacobparis

user -> server happens once

saqibmehdianwar-7915

In order to sign off a performance audit on preview build, with 0 real users in speed insights we dont have accurate Core Web Vitals, how to deal with this? Should we stick on to Light House here ?

philwolstenholme

I've gotta drop off, thanks Dom and Vercel peeps

5

avik-creator

Have a great day ahead

anshumanb

thanks for joining

Microfrontends

avik-creator

I need to hack that special prompts

pawlean

avik-creator

arkmaster123

jacobparis

Technical audits: Optimizing cost, performance, and productivity - Vercel

avik-creator

Again super fast

arkmaster123

almost like its been intentional…

jonoroboto

subtle flex, real nice

2

amyegan

3

jonoroboto

Absolute banger session @dom-vercel @pawlean - cheers for the insights!

1

avik-creator

Banger session @dom-vercel

sneroboto

Thanks Dom and the Vercel Community team

3

avik-creator

ggs

Great session

jacobparis

thanks everyone for showing up

avik-creator

Really loved it a lot

saqibmehdianwar-7915

Great learning, thank you!

pawlean

Thanks everyone!

Join us on Friday!

Community Session: Community at Vercel

[Community Session: Community at Vercel] In this Vercel Community Session, we’ll share how we run Community at Vercel, from key initiatives to exciting projects and beyond. Bring your questions, we’d love to hear from you! To join in the live chat - join the community and click “Going” above Speakers [Pauline P. Narvas] [Kapehe Sevilleja] Pauline Narvas (@pawlean) Kapehe Sevilleja (@kapehe) Customer Community Developer Community X | LinkedIn | Bluesky X | L…

[bestcodes]

Darn it, I missed the stream! I’m for sure gonna watch it later.

[pawlean (Pauline P. Narvas)]

If you have any questions you’d like to ask @dom-vercel async, drop them in this thread