メインコンテンツにスキップ
SvelteKitベストプラクティス

パフォーマンス

SvelteKitは、初期設定の状態で、アプリケーションのパフォーマンスを可能な限り向上させるための多くの作業を行います。

  • コード分割により、現在のページに必要なコードのみが読み込まれます。
  • アセットのプリロードにより、「ウォーターフォール」（ファイルが他のファイルを要求する連鎖）が防止されます。
  • ファイルハッシュにより、アセットを永続的にキャッシュできます。
  • リクエストの合体により、別々のサーバー`load`関数から取得されたデータが単一のHTTPリクエストにグループ化されます。
  • 並列読み込みにより、別々のユニバーサル`load`関数が同時にデータを取得します。
  • データのインライン化により、サーバーレンダリング中に`fetch`を使用して行われたリクエストを、新しいリクエストを発行せずにブラウザで再生できます。
  • 保守的な無効化により、`load`関数は必要な場合にのみ再実行されます。
  • 事前レンダリング（必要に応じてルートごとに設定可能）により、動的データのないページを瞬時に配信できます。
  • リンクプリロードにより、クライアントサイドナビゲーションに必要なデータとコード要件を事前に予測します。

それでも、（まだ）すべての速度低下の原因を排除することはできません。最大限のパフォーマンスを引き出すには、以下のヒントに注意してください。

問題の診断

GoogleのPageSpeed Insightsと、（より高度な分析のための）WebPageTestは、既にインターネットにデプロイされているサイトのパフォーマンス特性を理解するための優れた方法です。

ブラウザには、デプロイされているかローカルで実行されているかに関わらず、サイトを分析するための便利な開発者ツールも含まれています。

`dev`モードでローカルに実行されているサイトは、本番アプリとは異なる動作をするため、ビルド後にプレビューモードでパフォーマンステストを行う必要があります。

計測

ブラウザのネットワークタブでAPI呼び出しに時間がかかっていることがわかり、その理由を理解したい場合は、OpenTelemetryやServer-Timingヘッダーなどのツールを使用してバックエンドを計測することを検討してください。

アセットの最適化

画像

画像ファイルのサイズを削減することは、多くの場合、サイトのパフォーマンスに最も大きな影響を与える変更の1つです。Svelteは、画像ページで詳しく説明されている`@sveltejs/enhanced-img`パッケージを提供しており、これを容易にします。さらに、Lighthouseは、最悪の違反者を特定するのに役立ちます。

動画

ビデオファイルは非常に大きくなる可能性があるため、最適化されていることを確認するために特別な注意を払う必要があります。

  • Handbrakeなどのツールを使用してビデオを圧縮します。ビデオを`webm`や`.mp4`などのWebフレンドリーな形式に変換することを検討してください。
  • `preload="none"`を使用して、スクロールしないと見えない位置にあるビデオを遅延読み込みできます（ただし、これにより、ユーザーが再生を開始したときに再生速度が低下することに注意してください）。
  • FFmpegなどのツールを使用して、ミュートされたビデオからオーディオトラックを取り除きます。

フォント

SvelteKitは、ユーザーがページにアクセスしたときに重要な`.js`および`.css`ファイルを自動的にプリロードしますが、デフォルトではフォントをプリロードしません。これは、不要なファイル（CSSで参照されているが、現在のページでは実際に使用されていないフォントウェイトなど）がダウンロードされる可能性があるためです。とはいえ、フォントを正しくプリロードすると、サイトの体感速度に大きな違いが生じる可能性があります。`handle`フックでは、フォントを含む`preload`フィルターを使用して`resolve`を呼び出すことができます。

フォントファイルをサブセット化することで、フォントファイルのサイズを削減できます。

コードサイズの削減

Svelteバージョン

最新バージョンのSvelteを実行することをお勧めします。Svelte 5はSvelte 4よりも小さく高速で、Svelte 4はSvelte 3よりも小さく高速です。

パッケージ

`rollup-plugin-visualizer`は、どのパッケージがサイトのサイズに最も貢献しているかを特定するのに役立ちます。また、ビルド出力を手動で検査するか（Vite設定で`build: { minify: false }`を使用して出力を可読にすることができますが、アプリをデプロイする前に元に戻すことを忘れないでください）、ブラウザの開発ツールのネットワークタブを介してコードを削除する機会が見つかる場合があります。

外部スクリプト

ブラウザで実行されているサードパーティスクリプトの数を最小限に抑えるようにしてください。たとえば、JavaScriptベースの分析を使用する代わりに、Cloudflare、Netlify、Vercelなどの多くのプラットフォームでSvelteKitアダプターと共に提供されているサーバーサイドの実装を使用することを検討してください。

サードパーティのスクリプトをWebワーカーで実行するには（メインスレッドのブロッキングを回避するため）、PartytownのSvelteKit統合を使用します。

選択的読み込み

静的`import`宣言でインポートされたコードは、ページの残りの部分と自動的にバンドルされます。特定の条件が満たされた場合にのみ必要なコードがある場合は、動的`import(...)`フォームを使用してコンポーネントを選択的に遅延読み込みします。

リンクオプションを使用して、必要なコードとデータを事前に読み込むことで、クライアントサイドのナビゲーションを高速化できます。これは、新しいSvelteKitアプリを作成するときに、デフォルトで`<body>`要素に設定されます。

すぐに必要とされない読み込み速度の遅いデータの場合、`load`関数から返されるオブジェクトには、データ自体ではなくPromiseを含めることができます。サーバー`load`関数の場合、これにより、ナビゲーション（または初期ページの読み込み）後にデータがストリーミングされます。

パフォーマンスキラーの1つは、順番に行われる一連のリクエストである*ウォーターフォール*と呼ばれるものです。これはサーバーまたはブラウザで発生する可能性があります。

  • アセットのウォーターフォールは、HTMLがJSをリクエストし、JSがCSSをリクエストし、CSSが背景画像とWebフォントをリクエストするなど、ブラウザで発生する可能性があります。SvelteKitは、 `modulepreload`タグまたはヘッダーを追加することで、このクラスの問題を largely 解決しますが、開発ツールのネットワークタブを表示して、追加のリソースをプリロードする必要があるかどうかを確認する必要があります。Web フォントを使用する場合は、手動で処理する必要があるため、特に注意してください。
  • ユニバーサル`load`関数がAPI呼び出しを行って現在のユーザーを取得し、そのレスポンスの詳細を使用して保存済みアイテムのリストを取得し、*その*レスポンスを使用して各アイテムの詳細を取得する場合、ブラウザは複数の順次リクエストを行うことになります。これは、特にバックエンドから物理的に離れた場所にいるユーザーにとって、パフォーマンスに致命的な影響を及ぼします。可能な場合は、サーバー`load`関数を使用して、この問題を回避してください。
  • サーバー`load`関数もウォーターフォールから免疫がありません（レイテンシの高いラウンドトリップを伴うことはめったにないため、コストははるかに低くなります）。たとえば、データベースをクエリして現在のユーザーを取得し、そのデータを使用して保存済みアイテムのリストの2番目のクエリを作成する場合、通常はデータベース結合を使用して単一のクエリを発行する方がパフォーマンスが向上します。

ホスティング

レイテンシを最小限に抑えるために、フロントエンドはバックエンドと同じデータセンターに配置する必要があります。中央のバックエンドのないサイトの場合、多くのSvelteKitアダプターは*エッジ*へのデプロイをサポートしています。これは、近くのサーバーから各ユーザーのリクエストを処理することを意味します。これにより、読み込み時間を大幅に短縮できます。一部のアダプターは、ルートごとにデプロイを設定することもサポートしています。また、CDN（通常はエッジネットワーク）から画像を提供することも検討する必要があります。多くのSvelteKitアダプターのホストはこれを自動的に行います。

ホストがHTTP/2以降を使用していることを確認してください。Viteのコード分割により、キャッシュ性を向上させるために多数の小さなファイルが作成されます。これは優れたパフォーマンスをもたらしますが、HTTP/2でファイルを並列に読み込むことができることを前提としています。

参考資料

ほとんどの場合、高パフォーマンスのSvelteKitアプリを構築することは、高パフォーマンスのWebアプリを構築することと同じです。Core Web Vitalsなどの一般的なパフォーマンスリソースからの情報を、構築するWebエクスペリエンスに適用できるはずです。

GitHubでこのページを編集する

前へ 次へ
認証