Performance
svelte-vitals の Performance ルール一覧。
ルートが遅くなる原因。画像、レンダリングを妨げるアセット、import、読み込みのウォーターフォールを見ます。
| ルール | 重大度 | 概要 |
|---|---|---|
performance/font-preload-crossorigin |
🟡 warning | crossorigin を指定しないと、preload したフォントは使われません。 |
performance/image-dimensions |
🟡 warning | <img> には width と height を明示します。 |
performance/lcp-image |
🟡 warning | LCP になりそうな最初の画像は、遅延読み込みにしないでください。 |
performance/load-waterfall |
🟡 warning | universal load で依存関係のある await が数珠つなぎになると、1 ホップごとにブラウザからのネットワーク往復が発生します。 |
performance/minify-disabled |
🟡 warning | vite.config に build.minify が残っていると、ミニファイされていない JS/CSS がそのまま本番に配信されます。 |
performance/preload-missing-as |
🟡 warning | <link rel=“preload”> には as 属性を指定します。 |
performance/render-blocking-script |
🟡 warning | head の <script src> で HTML の解析を止めないようにしましょう。 |
performance/heavy-import |
🔵 info | サイズが大きく、ツリーシェイクも効かないパッケージの import は避けましょう。 |
performance/iframe-loading |
🔵 info | 画面外の iframe は、スクリプト・フォント・メディアを含むサードパーティのドキュメント全体を先読みし、画面外の画像より高くつくのが普通です。loading=“lazy” で遅延できます。 |
performance/image-loading-hint |
🔵 info | <img> には loading 属性を明示します。 |
performance/namespace-import |
🔵 info | ツリーシェイクを効かせるため、import * as ではなく名前付き import を使いましょう。 |
performance/preconnect |
🔵 info | ページが使うサードパーティのオリジンには、あらかじめ preconnect しておきましょう。 |
performance/responsive-image |
🔵 info | 大きな画像には srcset を用意しましょう。 |
performance/sequential-awaits |
🔵 info | 互いの結果を使わない await の逐次実行は無駄です。同時に開始しましょう。 |
performance/state-raw |
🔵 info | 再代入しかしないオブジェクト・配列の $state には、一度も使わない深いリアクティビティのコストがかかり続けます。$state.raw ならプロキシを省けます。 |
ルールの重大度を変えたり、無効にしたりする方法は 設定 を参照してください。