diff --git a/package.json b/package.json index 07412ad..09861fc 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "vite": "^5.0.11" }, "dependencies": { - "@vercel/analytics": "^1.1.1", + "@vercel/speed-insights": "^1.0.3", "bits-ui": "^0.14.0", "clsx": "^2.1.0", "lucide-svelte": "^0.309.0", @@ -46,8 +46,7 @@ "radix-icons-svelte": "^1.2.1", "svelte-wrap-balancer": "^0.0.4", "tailwind-merge": "^2.2.0", - "tailwind-variants": "^0.1.20", - "web-vitals": "^3.5.1" + "tailwind-variants": "^0.1.20" }, "lint-staged": { "*.{js,ts,svelte,css,scss,postcss,md,json}": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45cdd7f..9d8cd6c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,9 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: - '@vercel/analytics': - specifier: ^1.1.1 - version: 1.1.1 + '@vercel/speed-insights': + specifier: ^1.0.3 + version: 1.0.3 bits-ui: specifier: ^0.14.0 version: 0.14.0(svelte@4.2.8) @@ -32,9 +32,6 @@ dependencies: tailwind-variants: specifier: ^0.1.20 version: 0.1.20(tailwindcss@3.4.1) - web-vitals: - specifier: ^3.5.1 - version: 3.5.1 devDependencies: '@sveltejs/adapter-vercel': @@ -1082,12 +1079,6 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vercel/analytics@1.1.1: - resolution: {integrity: sha512-+NqgNmSabg3IFfxYhrWCfB/H+RCUOCR5ExRudNG2+pcRehq628DJB5e1u1xqwpLtn4pAYii4D98w7kofORAGQA==} - dependencies: - server-only: 0.0.1 - dev: false - /@vercel/nft@0.26.2: resolution: {integrity: sha512-bxe2iShmKZi7476xYamyKvhhKwQ6JPEtQ2FSq1AjMUH2buMd8LQMkdoHinTqZYc+1sMTh3G0ARdjzNvV1FEisA==} engines: {node: '>=16'} @@ -1110,6 +1101,11 @@ packages: - supports-color dev: true + /@vercel/speed-insights@1.0.3: + resolution: {integrity: sha512-bKIt0HDdF6hP2bJZyS+za3k6sKeAXNRLSIUbwVwvyvKdsHBWS6ILBvmD1wXHZZyTqjU1TP7dTE/F6lHM6rBdKA==} + requiresBuild: true + dev: false + /abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} dev: true @@ -2869,10 +2865,6 @@ packages: lru-cache: 6.0.0 dev: true - /server-only@0.0.1: - resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==} - dev: false - /set-blocking@2.0.0: resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} dev: true @@ -3417,10 +3409,6 @@ packages: vite: 5.0.11 dev: true - /web-vitals@3.5.1: - resolution: {integrity: sha512-xQ9lvIpfLxUj0eSmT79ZjRoU5wIRfIr7pNukL7ZE4EcWZSmfZQqOlhuAGfkVa3EFmzPHZhWhXfm2i5ys+THVPg==} - dev: false - /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} dev: true diff --git a/src/lib/vitals.ts b/src/lib/vitals.ts deleted file mode 100644 index 31f1494..0000000 --- a/src/lib/vitals.ts +++ /dev/null @@ -1,82 +0,0 @@ -import type { Metric } from 'web-vitals'; -import { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals'; - -const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals'; - -interface NavigatorWithConnection extends Navigator { - connection: { - effectiveType: string; - }; -} - -type Params = Record; - -function getConnectionSpeed() { - return 'connection' in navigator && - 'connection' && - 'effectiveType' in (navigator as NavigatorWithConnection).connection - ? (navigator as NavigatorWithConnection).connection.effectiveType - : ''; -} - -function sendToAnalytics( - metric: Metric, - options: { - params: Params; - path: string; - analyticsId: string; - debug: boolean; - } -) { - const page = (Object.entries(options.params) as [string, string][]).reduce( - (acc: string, [key, value]: [string, string]) => acc.replace(value, `[${key}]`), - options.path - ); - - const body = { - dsn: options.analyticsId, - id: metric.id, - page, - href: location.href, - event_name: metric.name, - value: metric.value.toString(), - speed: getConnectionSpeed() - }; - - if (options.debug) { - console.log('[Web Vitals]', metric.name, JSON.stringify(body, null, 2)); - } - - const searchParams = new URLSearchParams(body); - - const blob = new Blob([searchParams.toString()], { - type: 'application/x-www-form-urlencoded' - }); - if (navigator.sendBeacon) { - navigator.sendBeacon(vitalsUrl, blob); - } else { - fetch(vitalsUrl, { - body: blob, - method: 'POST', - credentials: 'omit', - keepalive: true - }); - } -} - -export function webVitals(options: { - params: Params; - path: string; - analyticsId: string; - debug: boolean; -}) { - try { - onFID((metric) => sendToAnalytics(metric, options)); - onTTFB((metric) => sendToAnalytics(metric, options)); - onLCP((metric) => sendToAnalytics(metric, options)); - onCLS((metric) => sendToAnalytics(metric, options)); - onFCP((metric) => sendToAnalytics(metric, options)); - } catch (err) { - console.error('[Web Vitals]', err); - } -} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 789a3e0..49cf27a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,24 +4,8 @@ import '../styles/globals.css'; import { ModeWatcher } from 'mode-watcher'; import { fly } from 'svelte/transition'; - import { inject } from '@vercel/analytics'; - import { webVitals } from '$lib/vitals'; - import { browser } from '$app/environment'; - import { page } from '$app/stores'; - - inject({ mode: dev ? 'development' : 'production' }); - - let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID; - - $: if (browser && analyticsId) { - webVitals({ - path: $page.url.pathname, - params: $page.params, - analyticsId, - debug: false - }); - } - + import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit'; + injectSpeedInsights(); export let data;