現状把握
ウェブに関する主な指標
モバイル
不良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の全画像圧縮処理実施前の管理画面に表示された情報
最適化ステータス
圧縮 | リサイズ |
15% | 20% |
画質に影響を与えずにファイルサイズを小さくします | より多くの節約のために画像を拡大縮小する |
一括圧縮
メディアー>一括最適化から辿る
最適化対象:13,851点
処理時間:30分弱(最適化処理実施当初表示されていた見込み数値)
処理完了
削減結果 ー 9.02MB(13,851点)
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
パソコン版
記録画像
これからあっぷ