bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-28 07:19:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: use @vercel/speed-insights for web vitals

Browse source
This commit is contained in:
Bart van der Braak 2024-01-16 03:50:32 +01:00
parent 09fc87af81
commit 8e37873b65
4 changed files with 12 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/lib/vitals.ts
View file

@ -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<string, string>;
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);
}
}

20
src/routes/+layout.svelte
View file

@ -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;
</script>