> ## 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

Os Drains do Vercel oferecem suporte para [Web Vitals](https://web.dev/articles/vitals) através do Speed Insights drain. Essas métricas podem servir como sinais para entregar uma ótima experiência de usuário na web. Para começar a receber Web Vitals no AppSignal, habilite **Speed Insights**, adicione o pacote `@vercel/speed-insights` ao seu projeto e crie um **Speed Insights drain**.

## 1. Habilite o Speed Insights

Na página da sua organização, clique no projeto para o qual você gostaria de habilitar o Speed Insights. Em seguida, clique na aba **Speed Insights**, onde será apresentado um diálogo **Enable Speed Insights**.

<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="Captura de tela do diálogo &#x22;Enable Speed Insights&#x22; na UI do Vercel" width="2452" height="1756" data-path="assets/images/screenshots/vercel/enable-speed-insights-dark.png" />

Clique em **Purchase** para habilitar o **Speed Insights**.

## 2. Adicione `@vercel/speed-insights` ao seu projeto

Adicione o pacote `@vercel/speed-insights` ao seu projeto e inclua o componente `<SpeedInsights />` no seu app.

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

Isso adicionará um script à página e começará a rastrear os Web Vitals. Para instruções mais detalhadas, acesse a [página de documentação do Vercel](https://vercel.com/docs/speed-insights/quickstart#add-the-speedinsights-component-to-your-app).

## 3. Configure o Speed Insights drain

Em um projeto do Vercel, navegue até a página **Settings > Drains** e clique em **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="Captura de tela da etapa &#x22;Add Drain&#x22; na UI do Vercel" width="1576" height="1028" data-path="assets/images/screenshots/vercel/add-speed-insights-drain-dark.png" />

Selecione **Speed Insights** como o tipo de drain e clique em **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="Captura de tela da etapa &#x22;Add Drain&#x22; na UI do Vercel" width="1568" height="1296" data-path="assets/images/screenshots/vercel/configure-speed-insights-drain-dark.png" />

Adicione um nome descritivo para o drain, como 'AppSignal speed insights drain'. A opção **Specific projects** junto com seu projeto deve estar pré-selecionada na seção **Projects**. Se não estiver, certifique-se de selecionar apenas o projeto para o qual você habilitou o Speed Insights. Clique em **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="Captura de tela da etapa &#x22;Configure drain&#x22; na UI do Vercel" width="1572" height="1146" data-path="assets/images/screenshots/vercel/configure-speed-insights-drain-destination.png" />

Para o **destination**, insira a URL a seguir substituindo `<api_key>` pela push API key de nível de app do AppSignal, que pode ser encontrada em [App settings](https://appsignal.com/redirect-to/app?to=api_keys\&key_tab=app):

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

<Note>
  Você pode encontrar mais informações sobre **AppSignal API keys** na [seção
  de autenticação do endpoint público da API do
  AppSignal](https://docs.appsignal.com/api/public-endpoint.html#authentication).
</Note>

Pressionar **Test** enviará um trace de teste ao AppSignal.

Clique em **Create Drain**.

Em uma configuração bem-sucedida, um novo [magic dashboard](https://blog.appsignal.com/2019/03/27/magic-dashboards.html) será criado para você com os Web Vitals do Next.js.