---
title: Performance
description: svelte-vitals の Performance ルール一覧。
---

{/* rules-index:start */}

ルートが遅くなる原因。画像、レンダリングを妨げるアセット、import、読み込みのウォーターフォールを見ます。

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

{/* rules-index:end */}

ルールの重大度を変えたり、無効にしたりする方法は [設定](/ja/guides/configuration) を参照してください。