diff --git a/package.json b/package.json index 88d42e7..ebb2702 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,7 @@ "tslib": "^2.5.2", "tsparticles": "^2.9.3", "typescript": "^5.0.4", - "vite": "^4.3.9", - "web-vitals": "^3.3.2" + "vite": "^4.3.9" }, "type": "module" } diff --git a/src/lib/vitals.js b/src/lib/vitals.js deleted file mode 100644 index c5c1a75..0000000 --- a/src/lib/vitals.js +++ /dev/null @@ -1,65 +0,0 @@ -import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals'; - -const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals'; - -function getConnectionSpeed() { - return 'connection' in navigator && - navigator['connection'] && - 'effectiveType' in navigator['connection'] - ? navigator['connection']['effectiveType'] - : ''; -} - -/** - * @param {import("web-vitals").Metric} metric - * @param {{ params: { [s: string]: any; } | ArrayLike; path: string; analyticsId: string; debug: boolean; }} options - */ -function sendToAnalytics(metric, options) { - const page = Object.entries(options.params).reduce( - (acc, [key, value]) => 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('[Analytics]', metric.name, JSON.stringify(body, null, 2)); - } - - const blob = new Blob([new URLSearchParams(body).toString()], { - // This content type is necessary for `sendBeacon` - type: 'application/x-www-form-urlencoded' - }); - if (navigator.sendBeacon) { - navigator.sendBeacon(vitalsUrl, blob); - } else - fetch(vitalsUrl, { - body: blob, - method: 'POST', - credentials: 'omit', - keepalive: true - }); -} - -/** - * @param {any} options - */ -export function webVitals(options) { - try { - getFID((metric) => sendToAnalytics(metric, options)); - getTTFB((metric) => sendToAnalytics(metric, options)); - getLCP((metric) => sendToAnalytics(metric, options)); - getCLS((metric) => sendToAnalytics(metric, options)); - getFCP((metric) => sendToAnalytics(metric, options)); - } catch (err) { - console.error('[Analytics]', err); - } -} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 69f6512..fbd6781 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,29 +3,17 @@ import '@skeletonlabs/skeleton/styles/skeleton.css'; import '../app.postcss'; // Import the Analytics package, and the SvelteKit dev variable. - import { browser, dev } from '$app/environment'; + import { dev } from '$app/environment'; import { inject } from '@vercel/analytics'; import Particles from 'svelte-particles'; import { loadFull } from 'tsparticles'; - import { webVitals } from '$lib/vitals'; import Atropos from 'atropos'; import 'atropos/css'; import { onMount } from 'svelte'; - import { page } from '$app/stores'; let div: HTMLDivElement; - let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID; - - $: if (browser && analyticsId) { - webVitals({ - path: $page.url.pathname, - params: $page.params, - analyticsId - }); - } - onMount(() => { // Initialize Atropos({