Svelte wrapper for Web Vitals

An Svelte wrapper that provides a simple way to enable Core Web Vitals metrics for the following platforms:

• Vercel - Speed Insights
• Others (coming soon)

Note

As of the moment, the svelte wrapper is still in development. The current version only supports Vercel - Speed Insights as default. The next version will support other platforms such as Google Analytics, Google Tag Manager, and more.

Prerequisites

An analytics integration is required to use this package. Currently, only Vercel - Speed Insights is supported.

Installation

npm i @rairulyle/svelte-web-vitals -D

Usage

1. import WebVitals to your root +layout.svelte file.

<script lang="ts">
	import WebVitals from '@rairulyle/svelte-web-vitals';
</script>

<WebVitals />

2. Define the Analytics ID via vite.config.ts file. As of the moment, only Vercel is supported.

export default defineConfig({
	// Other configs here...
	define: {
		'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
	}
});

Roadmap

• Vercel - Speed Insights
• Google Analytics
• Google Tag Manager
• Others