mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-27 01:21:22 +00:00
Merge pull request #203 from bartvdbraak/feat/vercel-speed-insights
Refactor: Use @vercel/speed-insights for web vitals
This commit is contained in:
GitHub
commit
668efcd990
4 changed files with 12 additions and 123 deletions
|
|
@ -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}": [
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue