Community Session: Web Performance AMA

pawlean

:fire:

Can't wait for this!

Hi, everyone! :waving_hand:

waving_hand 2
philwolstenholme

Hi all :waving_hand:

waving_hand 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

waving_hand 2
sneroboto

Go Dom :fire:

waving_hand 2
jonoroboto

Yoooo, LFG :fire::fire::fire:

rocket 3
pawlean

Roboto Team represent

cowboy_hat_face 2
heart 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?

+1 2
grinning_face 1
slightly_smiling_face 1
arkmaster123

happy to be here!

pawlean

Hi, @arkmaster123!

waving_hand 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?

+1 2
red_question_mark 2
jonoroboto

Master of the TLA's

jacobparis
fire 4
heart 6
smiling_face_with_sunglasses 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?

heart 1
red_question_mark 3
jacobparis
jonoroboto

I'm super interested in the no-javascript meganav

plus 4
philwolstenholme

Or a browser extension?

arkmaster123

may the demo gods be with you

100 3
joy 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)

fire 3
100 4
plus 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.

clap 2
arkmaster123

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

jonoroboto

<3

heart 4
avik-creator

Really excited

fire 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

plus 2
avik-creator

Yes

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

pawlean

Great tool suggestions!

100 4
philwolstenholme

:heart: 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

heart 2
avik-creator

Can we get these notes?

Really love the Vercel Speed insights. It is really detailed

100 2
heart 2
anshumanb

Demos over memos!

100 3
avik-creator

A new sentence we learned

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

joy 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

100 4
philwolstenholme

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

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
fire 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?

100 1
plus 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 :waving_hand:

waving_hand 5
avik-creator

Have a great day ahead

anshumanb

thanks for joining

avik-creator

I need to hack that special prompts

pawlean

:laughing:

avik-creator

:joy:

arkmaster123

:joy:

jacobparis
avik-creator

Again super fast

arkmaster123

almost like its been intentional…

jonoroboto

:joy: subtle flex, real nice

grin 2
amyegan

:waving_hand:

waving_hand 3
jonoroboto

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

heart 1
avik-creator

Banger session @dom-vercel

sneroboto

Thanks Dom and the Vercel Community team :sparkling_heart:

heart 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!

1 Like