search

vercel / analytics

Privacy-friendly, real-time traffic insights
https://vercel.com/analytics
Mozilla Public License 2.0
429 stars 26 forks source link

Performance issue with latest nextjs 13 #13

Closed M1ck0 closed 1 year ago

M1ck0 commented 2 years ago

The app is deployed on Vercel normally, but when loading the app, there is a script file that loads for 1+ sec. Here is screenshot

Screenshot 2022-10-30 at 21 26 54

When I removed analytics package, website loaded much faster and FCP was much lower.

timolins commented 2 years ago

Hi there! Mind sharing a preview URL for this?

M1ck0 commented 2 years ago

@timolins

It is currently on my work-in-progress website. Here is the link https://www.miletadulovic.me/

When you do a hard reload Command + Shift + R (Ctrl + Shift + R) while the network tab is open in the console, you'll see script.js file that is 1.1-1.3 kb heavy and loading for a long time. I just rechecked it, It took 3.57 sec.

This really reduces page speed score on both Vercel analytics, and Google Page Speed analytics. I first wasn't sure from where is this coming, but after disabling Vercel analytics, this file vanished from the network tab.

Screenshot 2022-10-31 at 12 38 27

Here are the headers for this file

Screenshot 2022-10-31 at 12 39 18 Screenshot 2022-10-31 at 12 39 45
M1ck0 commented 2 years ago

Any updates on this? @timolins

tobiaslins commented 2 years ago

@M1ck0 I saw that the script is currently embedded on your page and did several speed score tests (Google Page Speed, etc) and did not see anything poping up because of that longer script load time. (It's async and soon defer so will not block anything) Can you share us some results that shows the script impacts your page?

M1ck0 commented 2 years ago

@timolins Here are the screenshots

Screenshot 2022-11-04 at 20 51 54 Screenshot 2022-11-04 at 20 57 20

Take a look at Time to Interactive and Total Blocking time. The difference is enormous.

Also, look at the treemap, when is the first frame presented to a user?

Are you sure that you can't see anything wrong with this? And let me also say that the page I am testing is just a page with few lines of text, no API calls, no interactions, or anything.

When I removed @vercel/analytics it was much better. With that package when I try to load the site in incognito, I always see blank (white) screen for like second or two (based on my connection) and then page appears.

timolins commented 1 year ago

Interesting, thanks for investigating! Mind sharing a preview deployment link with us that has Audiences enabled? So we can compare as well.

M1ck0 commented 1 year ago

I'll send you a link in a few hours.

M1ck0 commented 1 year ago

@timolins I added it to the main deployment so you can go check it there.

miletadulovic.me

timolins commented 1 year ago

The initial issue you mentioned appeared to be caused by Cloudflare, which sits in-front of your deployment. We recently switched to a more loose caching policy, allowing Cloudflare to cache the script, which should resolve the issue you mentioned.

To make sure, I made an experiment that compares the Next.js 13 starter in 4 different environments:

A ran this test multiple times and there was no notable difference for environments that had Audiences enabled.

image

I'll close this issue for now.

It might be worth to experimenting with removing Google Tag Manager as well, which could be the cause of the slow down.