現状把握
ウェブに関する主な指標
モバイル
不良URL | 80件 |
改善が必要なURL | 0件 |
良好URL | 0件 |
LCPの問題:4秒超(モバイル)80件 4.3秒
PC
不良URL | 0件 |
改善が必要なURL | 80件 |
良好URL | 0件 |
PageSpeed Insights
評価サンプル https://ouchi-gaishoku.cafe-tatsujin.com/mac-takuhai.html
モバイル
初回 | 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 |
試したこと
アドセンスの広告を削除した
※ 効果の真偽は不明(実施後にPageSpeed Insightsを何度か実行したところ数値に揺らぎがあったため)
評価サンプル https://ouchi-gaishoku.cafe-tatsujin.com/mac-takuhai.html
のページはアクセスが比較的多いことから、通常の広告に加えて別途アドセンスコード(種別:記事内広告)を11件貼っていた。
これらをすべて削除した結果広告の数が、16件→5件に減少した。
実施前 | 実施後 |
自動広告 ON リンクユニット1件 関連ユニット 1件 レスポンシブ 2件 記事内広告 1件 記事内広告 11件 | 自動広告 ON リンクユニット1件 関連ユニット 1件 レスポンシブ 2件 記事内広告 1件 |
その結果、PageSpeed Insightsのスコアが24点から31点になった(7点アップ)
ラボデータの数値が以下のように改善された。
項目 | 実施前 | 実施後 |
---|---|---|
First Contentful Paint | 3.5秒 | 3.5秒 |
インタラクティブになるまでの時間 | 14.5秒 | 12.6秒 |
速度インデックス | 7.1秒 | 6.6秒 |
合計ブロック時間 | 1160ミリ秒 | 740ミリ秒 |
最大コンテンツの描画 | 10.0秒 | 10.1秒 |
累積レイアウト変更 | 0 | 0 |
画像の圧縮(EWWW Image Optimizer)
WordPressのテーマ「Cocoon」作者のサイトでも高速化のために利用を推奨していたプラグイン「EWWW Image Optimizer」をインストールしサイト内の全画像の圧縮処理を実施した。
圧縮処理をするまえに、念の為、UpdraftPlusによるバックアップ処理を実行しデータはなにかあっても戻せるようダウンロードしておいた。
EWWWww Image Optimizerの全画像圧縮処理実施前の管理画面に表示された情報
最適化ステータス
圧縮 | リサイズ |
20% | 20% |
画質に影響を与えずにファイルサイズを小さくします | より多くの節約のために画像を拡大縮小する |
一括圧縮
メディアー>一括最適化から辿る
最適化対象:4,910点
処理時間:50分弱(最適化処理実施当初表示されていた見込み数値)
Cocoon 高速化の設定
Cocoon 設定ー>高速化をたどって設定する
ブラウザキャッシュの有効化
HTMLを縮小化する
CSSを縮小化する
JavScriptを縮小化する
Lazy Loadを有効にする
Google フォントの非同期読み込みを有効にする
にチェックを入れる
記録画像
(1)2020年6月14日 昼間