Theo's Typesafe Cult•13mo ago

Speed Insights for Astro

So on these docs: https://vercel.com/docs/speed-insights/quickstart There is no dropdown for Astro, and Other is quite vague. What is the proper way for Astro projects to include Speed Insights for Vercel?

Vercel Documentation

Vercel Speed Insights Quickstart

Vercel Speed Insights provides you detailed insights into your website's performance. This quickstart guide will help you get started with using Speed Insights on Vercel.

Solution:

UPDATE (December 20, 2023): So with a little bit of digging, I've found an solution to the implementation for Vercel's Speed Insights via Astro. Even though it's not a drop down on their docs: https://vercel.com/docs/speed-insights/quickstart, the one your looking for is "Other frameworks" Which consists of this code:...

Jump to solution

29 Replies

KingPr0o7OP•13mo ago

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: vercel({
    webAnalytics: {
      enabled: true
    },
    speedInsights: {
        enabled: true,
    },
  }),
  integrations: [react()]
});

import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: vercel({
    webAnalytics: {
      enabled: true
    },
    speedInsights: {
        enabled: true,
    },
  }),
  integrations: [react()]
});

Rhys•13mo ago

@King is it a react project and are you importing their speed insights component?

KingPr0o7OP•13mo ago

It’s an Astro project, thought if using the React integration I might be able to use it.

Rhys•13mo ago

https://vercel.com/docs/speed-insights/quickstart#add-the-speedinsights-component-to-your-app they recently made it a component, this may be worth a shot to try

Vercel Documentation

Vercel Speed Insights Quickstart

Vercel Speed Insights provides you detailed insights into your website's performance. This quickstart guide will help you get started with using Speed Insights on Vercel.

Rhys•13mo ago

For other frameworks they have injectSpeedInsights

import { injectSpeedInsights } from '@vercel/speed-insights';
 
injectSpeedInsights();

import { injectSpeedInsights } from '@vercel/speed-insights';
 
injectSpeedInsights();

KingPr0o7OP•13mo ago

Yeah tried injectSpeedInsights although I've might've done it wrong Here is the repo with commits of me trying, maybe I just did it wrong or something: https://github.com/KingPr0o7/personal-portfolio

KingPr0o7OP•13mo ago

https://github.com/withastro/astro/issues/7573 Seem to be similar issues, I also recieve the "VERCEL_ANALYTICS_ID" not found

Rhys•13mo ago

Are you testing it on your production site, and do you have an adblocker enabled? What do you see in the network tab when you visit the live site?

KingPr0o7OP•13mo ago

1. Yes Prod. 2. No there shouldn't be any adblockers. 3.

KingPr0o7OP•13mo ago

Proof of 1.

Rhys•13mo ago

Have you tried the HTML install approach?

<script>
  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>

<script>
  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>

KingPr0o7OP•13mo ago

I can give it another shot, guessing that would have to be Layout.astro?

KingPr0o7OP•13mo ago

Other things of note: - Astro project - SSR-ed - package.json - React Implementation

Rhys•13mo ago

Yeah throw it in your <head> tags

KingPr0o7OP•13mo ago

Rhys•13mo ago

I think you can remove args and it’ll work, that’s just what config you want

KingPr0o7OP•13mo ago

Hmm so it had no errors without the import from react from my other horrible attempt..

KingPr0o7OP•13mo ago

Could it be the React implementation?

Rhys•13mo ago

@King are you 100% sure you don't have any sort of network level ad block, VPN, or ad blocker on your browser? I see the request come in correctly but get blocked by my ad block

Rhys•13mo ago

Loads correctrly w/ ad block disabled

Rhys•13mo ago

@King do you see anything showing up in page speed insights now?

KingPr0o7OP•13mo ago

Hmm. I’ll check I do have a raspberry pi that blocks ads network wide, but that’s on a separate DNS. Wait now it works? I didn't do anything.

KingPr0o7OP•13mo ago

Can confirm that there is and was no adblockers of any sort.

Rhys•13mo ago

Do you see it showing up in Vercel?

KingPr0o7OP•13mo ago

Yeah for mobile at least

KingPr0o7OP•13mo ago

Top popup doesn't show anymore, so I guess it works? Okay now both show! I have no clue why it works now, and didn't do anything different from yesterday. Also have no clue to what message to mark as solution.

Rhys•13mo ago

Any of them work, I’d do one about ad blockers Or if you want to go the extra mile do a little summary of what you tried

Solution

KingPr0o7•13mo ago

import { injectSpeedInsights } from '@vercel/speed-insights';
 
injectSpeedInsights();

import { injectSpeedInsights } from '@vercel/speed-insights';
 
injectSpeedInsights();

Since Astro is styled as a MPA (Multi-Page Application) framework (as of Dec 2023) the equivalent to an App.jsx is your Layout.astro. Even though Astro says to put it in a main.ts I suggest putting it in the Layout.astro file. With the confusion out of the way, here is steps to solving this issue. STEPS: (Mostly from: https://vercel.com/docs/speed-insights/quickstart) 1. Enable Speed Insights 2. Install Vercel's Speed Insights: npm i @vercel/speed-insights 3. Add speedInsights to your astro.config.mjs NOT IN DOCS:

import { defineConfig } from 'astro/config';
import vercelStatic from '@astrojs/vercel/static';
 
export default defineConfig({
    output: 'static',
    adapter: vercelStatic({
        webAnalytics: {
            enabled: true,
        },
        speedInsights: {
            enabled: true,
        },
    }),
});

import { defineConfig } from 'astro/config';
import vercelStatic from '@astrojs/vercel/static';
 
export default defineConfig({
    output: 'static',
    adapter: vercelStatic({
        webAnalytics: {
            enabled: true,
        },
        speedInsights: {
            enabled: true,
        },
    }),
});

4. In a <script> tag in your Layout.astro put this code:

<script>
    import { injectSpeedInsights } from '@vercel/speed-insights';
    injectSpeedInsights({});
</script>

<script>
    import { injectSpeedInsights } from '@vercel/speed-insights';
    injectSpeedInsights({});
</script>

5. Deploy to production Now you might be asking, King wtf this code is different from their example. Yes I know, apparently injectSpeedInsights requires an argument? Who knows, to fix that just put an empty object. So far this is the solution that seems to work - good luck.

Gaming

Programming

Speed Insights for Astro