Svelte入門：SvelteKitでのパフォーマンス -Vol.3-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでのパフォーマンスについて解説しています。

背景
アセットの最適化
おわりに

背景

SvelteKitでのパフォーマンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

アセットの最適化

画像

画像ファイルのサイズを削減することは、多くの場合、サイトのパフォーマンスに対して最も影響力のある変更の1つとなります。Svelteは、これを容易にするための`@sveltejs/enhanced-img`パッケージを提供しており、その詳細は画像ページに記載されています。また、Lighthouseは最も問題のある画像を特定するのに役立ちます。

画像最適化の重要性

サイトパフォーマンスへの大きな影響
ページ読み込み時間の改善
帯域幅使用量の削減

Svelteの提供するツール

@sveltejs/enhanced-img パッケージ
- 自動画像最適化
- レスポンシブ画像の処理
- 最適なフォーマット選択

Lighthouseによる分析

パフォーマンス影響度の測定
問題のある画像の特定
最適化推奨事項の提供

実務的な画像最適化のベストプラクティス：

フォーマットの最適化

適切なフォーマットの選択
- JPEG: 写真や複雑な画像
- PNG: 透過が必要な画像
- WebP: モダンブラウザ向け
- AVIF: 次世代フォーマット

サイズと品質の最適化

   <!-- 例：enhanced-imgの使用 -->
   <script>
   import { enhance } from '@sveltejs/enhanced-img';
   </script>

   <img
     src="/path/to/image.jpg"
     use:enhance
     width="800"
     height="600"
     alt="説明"
   />

レスポンシブ画像の実装

   <!-- 異なるビューポートサイズに対応 -->
   <img
     srcset="/images/small.jpg 300w,
             /images/medium.jpg 600w,
             /images/large.jpg 900w"
     sizes="(max-width: 600px) 300px,
            (max-width: 900px) 600px,
            900px"
     src="/images/fallback.jpg"
     alt="説明"
   />

画像の遅延読み込み

   <!-- 遅延読み込みの実装 -->
   <img
     loading="lazy"
     src="/path/to/image.jpg"
     alt="説明"
   />

最適化のチェックリスト：

事前確認

画像の実際の使用サイズ
必要な画質レベル
ターゲットデバイス

最適化手順

適切なフォーマットの選択
サイズの最適化
圧縮レベルの調整
レスポンシブ対応

パフォーマンス確認

Lighthouseでのスコア確認
読み込み時間の測定
モバイルでのテスト

継続的な監視

新規画像の確認
定期的な最適化チェック
パフォーマンス指標の監視

これらの最適化を適切に実施することで、サイトの読み込み速度を大幅に改善し、ユーザー体験を向上させることができます。

ビデオ

ビデオファイルは非常に大きくなる可能性があるため、最適化を確実に行うために特別な注意を払う必要があります：

* Handbrakeなどのツールでビデオを圧縮します。ビデオをWebフレンドリーなフォーマット（`.webm`や`.mp4`など）に変換することを検討してください。
* ファーストビュー外にあるビデオは`preload=”none”`で遅延読み込みができます（ただし、ユーザーが実際に再生を開始する際は再生が遅くなることに注意してください）。
* FFmpegのようなツールを使用して、ミュート状態のビデオから音声トラックを削除します。

圧縮とフォーマット変換

推奨ツール：Handbrake
- オープンソース
- 多様なフォーマットに対応
- 高度な圧縮設定が可能
推奨フォーマット
- .webm
- オープンソース
- 高圧縮率
- モダンブラウザ対応
- .mp4
- 広い互換性
- 適度な圧縮率
- 標準的な選択肢

遅延読み込みの実装

   <!-- ビデオの遅延読み込み実装例 -->
   <video 
     preload="none"
     width="640" 
     height="360"
     poster="/path/to/thumbnail.jpg">
     <source src="/path/to/video.webm" type="video/webm">
     <source src="/path/to/video.mp4" type="video/mp4">
   </video>

音声トラック削除

FFmpegの使用例

   # 音声トラックを削除するコマンド例
   ffmpeg -i input.mp4 -c:v copy -an output.mp4

実践的な最適化戦略：

ビデオ準備のワークフロー

   # 最適化の手順例

   # 1. WebM形式への変換
   ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 1M output.webm

   # 2. MP4へのフォールバック作成
   ffmpeg -i input.mp4 -c:v libx264 -crf 23 output.mp4

   # 3. 必要に応じて音声の削除
   ffmpeg -i output.mp4 -c:v copy -an output_muted.mp4

実装のベストプラクティス

   <!-- 最適化されたビデオの実装例 -->
   <video 
     preload="none"
     playsinline
     muted
     controls
     poster="/path/to/thumbnail.jpg"
     width="640" 
     height="360">
     <source src="/path/to/video.webm" type="video/webm">
     <source src="/path/to/video.mp4" type="video/mp4">
     <p>お使いのブラウザはビデオタグをサポートしていません。</p>
   </video>

パフォーマンス考慮事項

サイズと品質のバランス
- 用途に応じた適切な解像度
- 適切なビットレート設定
- 圧縮レベルの調整
帯域幅の最適化
- アダプティブビットレートの検討
- CDNの活用
- キャッシュ戦略の実装

ユーザー体験の最適化

サムネイル画像の提供
プログレッシブ読み込み
再生コントロールのカスタマイズ

チェックリスト：

前準備

元ファイルの品質確認
必要な解像度の決定
ターゲットデバイスの特定

最適化プロセス

フォーマット変換
圧縮設定
音声トラック処理
サムネイル作成

実装確認

複数ブラウザでのテスト
モバイル対応確認
帯域幅使用量チェック
再生パフォーマンス確認

これらの最適化を適切に実施することで、ビデオコンテンツを効率的に配信しながら、良好なユーザー体験を提供することができます。

フォント

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

フォントのサブセット化により、フォントファイルのサイズを削減できます。

SvelteKitのプリロード動作

自動プリロード
- JSファイル
- CSSファイル
フォントは除外（デフォルト）

フォントプリロードの実装例

// hooks.server.js
export async function handle({ event, resolve }) {
  return await resolve(event, {
    preload: ({ type, path }) => {
      // 特定のフォントファイルをプリロード
      return type === 'font' && (
        path.includes('Inter-Regular.woff2') ||
        path.includes('Inter-Bold.woff2')
      );
    }
  });
}

フォントサブセット化の実装

// subsetting-example.js
const fontkit = require('fontkit');
const fs = require('fs');

// フォントのサブセット化の例
async function subsetFont(inputPath, outputPath, characters) {
  const font = fontkit.openSync(inputPath);
  const subset = font.createSubset();
  characters.forEach(char => subset.includeGlyph(font.glyphForCodePoint(char.charCodeAt(0))));
  fs.writeFileSync(outputPath, subset.encode());
}

実践的な最適化戦略：

フォントローディングの最適化

   <!-- font-display の使用例 -->
   <style>
   @font-face {
     font-family: 'CustomFont';
     src: url('/fonts/CustomFont.woff2') format('woff2');
     font-display: swap;
     font-weight: 400;
   }
   </style>

プリロード設定の最適化

   <!-- 重要なフォントのプリロード -->
   <link 
     rel="preload" 
     href="/fonts/critical-font.woff2" 
     as="font" 
     type="font/woff2" 
     crossorigin
   >

フォントの最適化テクニック

変数フォントの活用

   /* 変数フォントの使用例 */
   @font-face {
     font-family: 'VariableFont';
     src: url('/fonts/variable.woff2') format('woff2-variations');
     font-weight: 100 900;
   }

サブセット化の実装

   // 必要な文字セットのみを含むフォントの作成
   const essentialCharacters = new Set([
     // よく使用される文字
     'a', 'b', 'c', // ...
     // 数字
     '0', '1', '2', // ...
     // 記号
     '.', ',', '!', // ...
   ]);

最適化のチェックリスト：

フォント選択

必要な文字セットの特定
使用するウェイトの選定
フォーマットの選択（WOFF2推奨）

実装方法

プリロード戦略の決定
font-displayの設定
フォールバックフォントの指定

パフォーマンス最適化

サブセット化の実施
ファイルサイズの最適化
読み込み順序の最適化

テストと確認

表示速度の測定
FOUTの確認
クロスブラウザテスト

ベストプラクティス：

重要なフォントの特定

ヘッドラインフォント
本文フォント
アイコンフォント

最適化手順

   // 最適化の手順例
   1. フォントファイルの分析
   2. 使用文字の特定
   3. サブセット化の実行
   4. 適切なプリロード設定
   5. パフォーマンステスト

パフォーマンスモニタリング

読み込み時間の測定
リソース使用量の確認
ユーザー体験の評価

これらの最適化を適切に実施することで、フォントの読み込みを最適化し、ページの表示速度を向上させることができます。

おわりに

今日は、 SvelteKitでのパフォーマンスについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)