MENU
  1. ホーム
  2. diary
  3. Litehouseの対処（静的サイト）

Litehouseの対処（静的サイト）

diary

Webサイトパフォーマンス改善チェックリスト

開発者ツールのパフォーマンス監査で表示される主要な警告の対処方法をまとめました。

目次

1. レンダリングをブロックしているリクエスト

判断基準

  • 1秒以上: 対処推奨
  • 3秒以上: 対処必須

対処方法

<!-- CSS: 非クリティカルなものは遅延読み込み -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

<!-- JS: defer/async属性で非同期化 -->
<script src="script.js" defer></script>
<script src="analytics.js" async></script>

<!-- フォント: 事前接続で高速化 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

2. 効率的なキャッシュ保存期間

判断基準

  • ローカル開発: 対処不要
  • 本番環境: 対処推奨（特に画像が多いサイト）

対処方法（.htaccess）

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

3. 強制リフロー（Forced Reflow）

判断基準

  • 50ms以下: 対処不要
  • 100ms以上: 対処推奨
  • 500ms以上: 対処必須
  • ライブラリ由来: 基本的に無視してOK

対処方法

// ❌ 悪い例
element.style.width = '100px';
const height = element.offsetHeight; // 強制リフロー
element.style.height = '100px';

// ✅ 良い例
const height = element.offsetHeight; // 先に取得
element.style.width = '100px';
element.style.height = '100px';

ポイント: DOM変更とレイアウト取得を分離する

4. LCP（Largest Contentful Paint）

判断基準

  • 2.5秒以下: Good
  • 2.5〜4秒: 改善の余地あり
  • 4秒以上: 改善必須

対処方法

<!-- メイン画像をプリロード -->
<link rel="preload" as="image" href="hero.webp">

<!-- 優先度を明示 -->
<img src="hero.webp" fetchpriority="high" loading="eager" alt="">

<!-- WebP形式で軽量化 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="">
</picture>

その他の対策:

  • サーバーレスポンス時間の改善
  • 画像サイズの最適化
  • 不要なCSSの削除

5. ネットワークの依存関係ツリー

判断基準

  • 深さ3以下: Good
  • 深さ5以上: 改善推奨

対処方法

<!-- ❌ 悪い例: チェーン読み込み -->
<script src="jquery.js"></script>
<script src="plugin.js"></script>
<script src="app.js"></script>

<!-- ✅ 良い例1: バンドル化 -->
<script src="bundle.min.js"></script>

<!-- ✅ 良い例2: 重要なものをプリロード -->
<link rel="preload" href="critical.js" as="script">

基本対策:

  • 不要なライブラリの削除
  • ファイルの結合・圧縮
  • CDNの活用

優先度まとめ

項目優先度対処タイミング
レンダリングブロック⭐⭐⭐3秒以上なら必須
LCP改善⭐⭐⭐4秒以上なら必須
ネットワーク依存⭐⭐深さ5以上で検討
キャッシュ期間⭐⭐本番環境で設定
強制リフロー⭐100ms以上で検討

計測ツール

定期的に計測し、スコア80以上を目標に改善していく。

diary

この記事が気に入ったら
フォローしてね！

関連記事

目次