svelte-vitals

SvelteKit アプリのコードヘルスを、リリース前に。静的解析だけ、ブラウザ不要。SEO、Performance、Correctness、Security、Architecture、Accessibility の6カテゴリを診断します。

SvelteKit アプリのコードヘルスを、リリース前に。静的解析だけ、ブラウザ不要。

はじめに

svelte-vitals をSvelteKitプロジェクトにインストールして、すぐに実行できます。

~/my-sveltekit-app

端末で svelte-vitals を実行し、Health スコアがアニメーションして確定する様子の録画。

svelte-vitals 実行後、最終的な Health スコアとカテゴリ内訳が表示された端末のスクリーンショット。

svelte-vitals はソースコードを読みます。レイアウトチェーンをたどって各ルートの実効的な <head> を解決し、コンポーネント本体からは runes、{@html}、画像、ARIA を解析します。そのうえで SEO、Performance、Correctness、Security、Architecture、Accessibility の6カテゴリを、ルート単位でもサイト全体でもスコアリングし、基準を下回ればCIで止められます。Vite プラグインを入れれば、同じルールが、動的な値まで解決済みの「実際にビルドされた HTML」に対して走ります。