分析ブログ運営に致命的な影響を出すかもしれない
モバイルでの表示速度
私のブログどうやら、めっちゃ遅いんです！
試しに入れた３＋１のプラグインで少しは改善できたので、紹介します。
”ページエクスペリエンスで改善が必要”と表示されている方、参考にご覧ください。
ブログ運営3か月目、始めてチェックしたPage Experience
チェックの仕方はグーグルサーチコンソール、Page Experienceから。
そもそも良好URL0％となっており、どゆこと？と思ったのですが
その下に失敗したURL123
これはヤバそう、と恐るおそるクリックすると
改良が必要 LCPの問題：2.5秒 超（モバイル）
「Largest Contentful Paint」の略、ユーザーがサイトに訪れた際にそのページに一番大きなコンテンツ（画像、動画、テキスト等）が表示されるまでの速度の事
どうやら”モバイルで表示されるのに2.5秒以上かかってるから、改善してくださいね”って事みたいです。
Page Speed Insightsでスピードチェック
実際にブログの表示速度をチェックするためPage Speed Insightsでスピードチェックできます。
参照:PageSpeed Insights – Google Developers
こちらに自分のサイトアドレスを入力してチェックすると
低っく！？
普段から、スピードの事なぞ気にせずブログを書いていた”つけ”がここにきて回って来たようです。
まず最初に、試したこと
私のサイトのテーマはJINで制作していたので、まずJINの公式のアドバイスを確認しました。
JIN公式からおすすめできるのは以下の６つの方法です。
①JINを最新版にアップデート
②FontAwesomeをOFFにする
③画像は圧縮してアップロード
④アニメーションをOFFにする
⑤標準フォントを利用する
⑥高速化プラグインを活用する
⑦Xアクセラレーターを活用する
参照:JINの高速化方法を全まとめ！表示速度が遅い時の対処法は？
①JINを最新版にアップデート
【外観】→【テーマ】→【テーマの詳細】から現在のバージョンが分かります
最新のバージョン情報はこちらで確認できます
参照:WordPressテーマ「JIN」のアップデート情報
②FontAwesomeをOFFにする
【外観】→【カスタマイズ】→【その他の設定】から【fontawesomeを読み込まない】にチェックを入れます
ちなみに、これをチェックしても変化なしでした。
スピードにあんまり大きな影響ないようです。
③画像は圧縮してアップロード
これからアップロードする画像に向けてですが、表示速度を上げるため、画像は圧縮、最適化してからアップロードする必要があります。
画像圧縮おすすめサイト
TinyPNG
画像最適化オンラインサービス、画像ファイルをドラッグアンドドロップするだけで、画像圧縮してくれます。
Optimizilla
同じく画像最適化オンラインサービス。
画質を保ったままに、JPEGやPNGイメージを最小サイズに圧縮してくれます。
④アニメーションをOFFにする、⑤標準フォントを利用する
④【外観】→【カスタマイズ】→【サイト基本設定】から【アニメーション機能】無効にチェックします。
⑤同じく【サイト基本設定】から【デフォルト（端末の標準フォント）】にチェックします。
これをする事で実際の数値は3ポイントぐらい上がりました
アニメーションは無くなると寂しいので、有効に戻しました。
⑥高速化プラグインを活用する
・Autoptimize
・EWWW Image Optimizer
・a3 Lazy Load
・Flying Scripts by WP Speed matters
これらは私がいろいろ試した結果、自分のブログには比較的効果のあった3＋1のプラグインです、次の項目から詳細をまとめています。
⑦Xアクセラレーターを活用する
ちなみに、こちらはXサーバーを使用している方のみのようです。
Xサーバーはサイトの高速化にも力をいれているようなので、早いサイトで運営したい方にはおすすめです。
Autoptimize
WordPressプラグイン／コードの最適化でサイトスピードを高速化
主な役割は、WordPressで使用している【HTML】【CSS】【JavaScript】といった各種ソースコードを「最適化」して、サイズを軽減させてくれます。
設定にて【JavaScript】【CSS】【HTML】それぞれのオプションを下のようにチェックをいれました。
こちらのプラグインは私のブログにあまり大きな影響が有りませんでしたが、多くのサイトで推していたので、採用することにしました。
ちなみに画像最適化と遅延読み込み＝Lazy Loadもこのプラグインには入っているのですが、画像最適化には次のプラグインの方が有効のようなので、そちらを使います。
EWWW Image Optimizer
WordPressにアップロードした画像を自動で「圧縮」する
「EWWW Image Optimizer」の主な役割は、すでにアップロードした画像の最適化をしてくれるようです。
最初の設定ではこのようにチェックしました。
画像一括圧縮できるようなので、まずやってみました。
【一括最適化】を押すとすでにサイト内にある画像を一括最適化してくれます。
結構時間がかかるので時間に余裕のある時に行ってください。
おっ？！ここにきて効果あり！
やはり画像が重いのが原因の一つのようです。
最後に画像を遅延読み込みに必要なプラグイン
a3 Lazy Load
画像の表示を遅らせるプラグイン
サイトに初めて訪問した際に、画像の表示を遅らせる事で、立ち上がりの速度を早くしてくれるようです。
設定は初期設定のまま使用しました
若干スピードアップ
画像表示遅延の機能は色々なプラグインで設定可能なので、すべて機能させると、それぞれが干渉してしまい逆に遅くなる可能性があります。
どれか一つのプラグインで設定する事をおすすめします。
3つのプラグインまとめと+１
これまでのプラグインとそれぞれの機能おさらい
| Autoptimize | プラグイン／コードの最適化 |
|---|---|
| EWWW Image Optimizer | 画像の最適化 |
| a3 Lazy Load | 画像表示の遅延 |
PageSpeed Insightsの分析結果を見ていると具体的な指摘を書いてくれています。
ここにある【使用していないJavaScriptの削減】が結構遅くなる要因になっていたので、これを最適化できるプラグインをみつけました。
Flying Scripts by WP Speed matters
直接指定したJavaScriptを読み飛ばすプラグイン
使い方はPageSpeed Insightsの分析結果で【使用していないJavaScriptの削減】をクリックすると問題のＵＲＬが表示されます。
そこに表示されている【/】以降の【.js】までの文字をコピーして【Flying Scripts】の設定画面に改行しながら1列ずつコピペしていきます。
これで【Save Changes】を押すと設定完了。
現時点プラグインでの対応はこれが限界でした。
このプラグインは、指定したJavaScriptを5秒遅らせる（秒数設定可能）です。1項目ごとに設定して自分のサイトに不具合がないかチェックしながら進めてください。サイト内が化ける可能性があるので、慎重に！
プラグインの見直し、削除
余計なプラグインや、使っていないプラグインがあればそれも表示速度を遅らせる原因になっているようです。
一度プラグイン全体の見直しも測ってみてください。
私は、使っていなかったこれらのプラグインを削除しました。
さいごに ふだんから読み込み時間を短くすることを意識する
ひと手間かけてこの画像も圧縮しました！
当たり前の事なのですが、ブログの記事の内容だけではなく、表示速度にも意識する。
ブログを読みに来てくれる方のストレスを少しでも軽減する事を意識しないと、本当の意味でのブログ運営が出来ているとは言えない事に気づきました。
画像もちゃんと圧縮して、記事の質を向上させよう
【ブログランキングに参加しています】
記事内容が参考になれば、応援よろしくお願いします
Photo by Matt ODell on Unsplash
Photo by Kelli McClintock on Unsplash
