> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Speed Insights

Vercel Drains bieten Unterstützung für [Web Vitals](https://web.dev/articles/vitals) über den Speed Insights Drain. Diese Metriken können als Signale dafür dienen, ein hervorragendes Nutzererlebnis im Web bereitzustellen. Um Web Vitals in AppSignal zu empfangen, aktivieren Sie **Speed Insights**, fügen Sie das Paket `@vercel/speed-insights` zu Ihrem Projekt hinzu und erstellen Sie einen **Speed Insights drain**.

## 1. Speed Insights aktivieren

Klicken Sie auf der Seite Ihrer Organisation auf das Projekt, für das Sie Speed Insights aktivieren möchten. Klicken Sie dann auf den Tab **Speed Insights**, in dem Ihnen ein **Enable Speed Insights**-Dialog angezeigt wird.

<img src="https://mintcdn.com/appsignal-715f5a51/MS9b5WO71lSfD5jG/assets/images/screenshots/vercel/enable-speed-insights-dark.png?fit=max&auto=format&n=MS9b5WO71lSfD5jG&q=85&s=835ec66c5dffa8f5224be2f8119a20c6" alt="Screenshot des Dialogs „Enable Speed Insights&#x22; in der Vercel-Benutzeroberfläche" width="2452" height="1756" data-path="assets/images/screenshots/vercel/enable-speed-insights-dark.png" />

Klicken Sie auf **Purchase**, um **Speed Insights** zu aktivieren.

## 2. `@vercel/speed-insights` zu Ihrem Projekt hinzufügen

Fügen Sie das Paket `@vercel/speed-insights` zu Ihrem Projekt hinzu und binden Sie die Komponente `<SpeedInsights />` in Ihre App ein.

<CodeGroup>
  ```shell Shell theme={null}
  npm install @vercel/speed-insights
  ```
</CodeGroup>

Dadurch wird der Seite ein Skript hinzugefügt und mit der Erfassung von Web Vitals begonnen. Detailliertere Anweisungen finden Sie auf der [Vercel-Dokumentationsseite](https://vercel.com/docs/speed-insights/quickstart#add-the-speedinsights-component-to-your-app).

## 3. Speed Insights Drain konfigurieren

Navigieren Sie in einem Vercel-Projekt zur Seite **Settings > Drains** und klicken Sie auf **Add Drain**.

<img src="https://mintcdn.com/appsignal-715f5a51/MS9b5WO71lSfD5jG/assets/images/screenshots/vercel/add-speed-insights-drain-dark.png?fit=max&auto=format&n=MS9b5WO71lSfD5jG&q=85&s=e67860fa99557704c5e5fe4e63cac1db" alt="Screenshot des Schritts „Add Drain&#x22; in der Vercel-Benutzeroberfläche" width="1576" height="1028" data-path="assets/images/screenshots/vercel/add-speed-insights-drain-dark.png" />

Wählen Sie **Speed Insights** als Drain-Typ und klicken Sie auf **Next**.

<img src="https://mintcdn.com/appsignal-715f5a51/MS9b5WO71lSfD5jG/assets/images/screenshots/vercel/configure-speed-insights-drain-dark.png?fit=max&auto=format&n=MS9b5WO71lSfD5jG&q=85&s=802a92c5d790260104f8fb3cf94185d2" alt="Screenshot des Schritts „Add Drain&#x22; in der Vercel-Benutzeroberfläche" width="1568" height="1296" data-path="assets/images/screenshots/vercel/configure-speed-insights-drain-dark.png" />

Fügen Sie einen aussagekräftigen Namen für den Drain hinzu, z. B. „AppSignal speed insights drain". Die Option **Specific projects** sowie Ihr Projekt sollten im Abschnitt **Projects** vorausgewählt sein. Falls nicht, stellen Sie sicher, dass Sie nur das Projekt auswählen, für das Sie Speed Insights aktiviert haben. Klicken Sie auf **Next**.

<img src="https://mintcdn.com/appsignal-715f5a51/MS9b5WO71lSfD5jG/assets/images/screenshots/vercel/configure-speed-insights-drain-destination.png?fit=max&auto=format&n=MS9b5WO71lSfD5jG&q=85&s=668e2c01cb32414a7db2b7d27a5f122a" alt="Screenshot des Schritts „Configure drain&#x22; in der Vercel-Benutzeroberfläche" width="1572" height="1146" data-path="assets/images/screenshots/vercel/configure-speed-insights-drain-destination.png" />

Geben Sie als **destination** die folgende URL ein und ersetzen Sie `<api_key>` durch Ihren AppSignal-App-Level-Push-API-Schlüssel, den Sie in den [App-Einstellungen](https://appsignal.com/redirect-to/app?to=api_keys\&key_tab=app) finden:

<CodeGroup>
  ```plaintext Text theme={null}
  https://appsignal-endpoint.net/metrics/speed-insights?api_key=<api_key>
  ```
</CodeGroup>

<Note>
  Weitere Informationen zu **AppSignal-API-Schlüsseln** finden Sie im
  Abschnitt [Public Endpoint Authentication](https://docs.appsignal.com/api/public-endpoint.html#authentication)
  der AppSignal-API.
</Note>

Wenn Sie auf **Test** klicken, wird ein Test-Trace an AppSignal gesendet.

Klicken Sie auf **Create Drain**.

Bei erfolgreicher Einrichtung wird automatisch ein neues [Magic Dashboard](https://blog.appsignal.com/2019/03/27/magic-dashboards.html) mit Next.js Web Vitals für Sie erstellt.