現状把握
ウェブに関する主な指標
モバイル
| 不良URL | XX件 |
| 改善が必要なURL | 0件 |
| 良好URL | 0件 |
LCPの問題：4秒超（モバイルXX件 XX秒
PC
| 不良URL | 0件 |
| 改善が必要なURL | XX件 |
| 良好URL | 0件 |
PageSpeed Insights
評価サンプル XXX
モバイル
| 初回 | Cocoon高速化実施後 | |
| 総合得点 | 24点 | 38点 |
| 初回 | Cocoon高速化実施後 | |
| First Contentful Paint(FCP) | 2.1s | 2.1s |
| 初回入力遅延(FID) | 32ms | 32ms |
| Largest Contentful Paint(LCP) | 4.3s | 4.3s |
| Cumulative Layout Shift(CLS) | 0.2 | 0.2 |
[ラボデータ]
| 初回 | Cocoon高速化実施後 | |
| First Contentful Paint | 3.5秒 | 2.7秒 |
| インタラクティブになるまでの時間 | 14.5秒 | 10.5秒 |
| 速度インデックス | 7.1秒 | 5.2秒 |
| 合計ブロック時間 | 1,160ミリ秒 | 980ミリ秒 |
| 最大コンテンツの描画 | 10.0秒 | 6.0秒 |
| 累積レイアウト変更 | 0 | 0 |
[改善できる項目]
| 初回 | Cocoon高速化実施後 | |
| 次世代フォーマットでの画像の配信 | 3.9s | 0.43s |
| レンダリングを妨げるリソースの除外 | 2.1s | 1.17s |
| 適切なサイズの画像 | 1.95s | 0.28s |
| 効率的な画像のフォーマット | 1.8s | 0.28s |
| 使用していないJavaScriptの削除 | 1.77s | 2.21s |
| オフスクリーン画像の遅延読み込み | 0.6s | （消失） |
| 使用していないCSSの削除 | 0.3s | （消失） |
| Reduce initial server responsive time | 0.01s | 0.14s |
試したこと
画像の圧縮（EWWW Image Optimizer）
WordPressのテーマ「Cocoon」作者のサイトでも高速化のために利用を推奨していたプラグイン「EWWW Image Optimizer」をインストールしサイト内の全画像の圧縮処理を実施した。
圧縮処理をするまえに、念の為、UpdraftPlusによるバックアップ処理を実行しデータはなにかあっても戻せるようダウンロードしておいた。
EWWWww Image Optimizerの全画像圧縮処理実施前の管理画面に表示された情報
最適化ステータス
| 圧縮 | リサイズ |
| １５％ | ２０％ |
| 画質に影響を与えずにファイルサイズを小さくします | より多くの節約のために画像を拡大縮小する |
一括圧縮
メディアー＞一括最適化から辿る
最適化対象：１３，８５１点
処理時間：３０分弱（最適化処理実施当初表示されていた見込み数値）
処理完了
削減結果 ー ９．０２MB（１３，８５１点）
Cocoon 高速化の設定
Cocoon 設定ー＞高速化をたどって設定する
ブラウザキャッシュの有効化
HTMLを縮小化する
CSSを縮小化する
JavScriptを縮小化する
Lazy Loadを有効にする
Google フォントの非同期読み込みを有効にする
にチェックを入れる
試してみた結果
モバイル版
| 初回 | Cocoon高速設定後 | |
| 総合得点 | 19点 | 25点 |
フィールドデータ
| 初回 | Cocoon高速実施後 | |
| First Contentful Paint(FCP) | 2.1s | 2.1s |
| 初回入力遅延(FID) | 29ms | 29ms |
| Largest Contentful Paint(LCP) | 6.6s | 6.6s |
| Cumulative Layout Shift(CLS) | 0.26 | 0.26 |
ラボデータ
| 初回 | Cocoon高速実施後 | |
| First Contentful Paint | 4.0秒 | 2.9秒 |
| インタラクティブになるまでの時間 | 15.9秒 | 14.5秒 |
| 速度インデックス | 8.0秒 | 6.4秒 |
| 合計ブロック時間 | 1,340ミリ秒 | 1,740ミリ秒 |
| 最大コンテンツの描画 | 22.3秒 | 11.3秒 |
| 累積レイアウト変更 | 0 | 0 |
改善できる項目
| 初回 | Cocoon高速実施後 | |
| 次世代フォーマットでの画像の配信 | 13.95s | 4.3s |
| 効率的な画像フォーマット | 4.5s | 0.15s |
| レンダリングを妨げるリソースの除外 | 2.72s | 1.17s |
| 適切なサイズの画像 | 1.5s | 1.95s |
| 使用していないJavaScriptの削除 | 1.5s | 1.5s |
| 使用していないCSSの削除 | 0.45s | （消失） |
| Reduce initial server response time | 0.34s | 0.48s |
| CSSの最小化 | 0.15s | （消失） |
メモ
Cocoon高速化実行後の結果に以下の診断結果が表示されていた。くわしく確認したほうがいいかもしれなさそうな内容。
過大なDOMサイズの回避 2,179件の要素
DOMサイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。
統計情報 Element 値
合計DOM要素数 2,179
DOMの最大深さ <a href=”#toc4″ tabindex=”0″> 15
子要素の上限数 <div class=”theContentWrap-ccc”>93
パソコン版
記録画像
これからあっぷ