[PR]アフィリエイト広告を利用しています。
こんにちは。タロウ(taroblog85)です。
ブログの記事が増えてくると、パソコンやスマホで確認した時にブログの表示が遅いなと感じたことはありませんか？
自分のブログだと全て表示されるまで待つことはありますが他のブログだとすぐに閉じますよね？
万一、あなたのブログが表示速度が遅くほったらかしにしてしまうと機会損失がとても大きいです。
今回はPageSpeed Insightsを使って原因を調査しブログの状態を整える方法を公開しています。
この記事でわかること
- ブログの表示スピードが遅くて困っている方に原因の調べ方と改善策がわかります。
1.PageSpeed Insightとは
>> Google Speed Insightを使ってみる。
2.PageSpeed Insightsの使い方
2-1.検索窓に自分のブログのURLを入れる
今回はこのブログURL https://taroblog.work/を入れ【分析】ボタンを押します。
【PCの場合】
【スマホの場合】
PCの場合はスコアが「83」スマホの場合はスコアが「43」でした。
現状ではどちらも高い評価とは言えません。
それぞれスコアを下げている要因についてはこのように記してありました。
【PCの場合】
【スマホの場合】
PCとスマホの場合それぞれ仕様は異なりますが、
改善可能な項目としては、
改善可能な項目
・使用していないCSSを削除してください。
・適切なサイズの画像
が共通していました。
3.PageSpeed Insightでわかること
PageSpeed Insightsを用いることで、表示スピードが落ちる原因がわかりました。これから表示速度を遅くしている原因を一つづつ調べ以下に対策をまとめます。
3-1「レンダリングを妨げるリソースの除外」する。
「レンダリングを妨げるリソースの除外」とはブログなどのページを読込む際、JavascriptやCSSを読込む順番がJavascriptを先に読んでしまうために、表示に時間を要したりCSSのファイルが整理されていないことが考えられます。そのためこれらの読み込み順を正しく行い、CSSファイルが整理される対応をします。
3-2.AutoptimzeでJavascriptやCSSを縮小する
Javascriptの読み込み順を正し、CSSファイルを整理するために今回は"Autoptimize"というプラグインを使用します。
■プラグインを有効化したあと次の順で設定をしていきます。
このプラグインを使用後、スコアは下記のようになりました。
【PCの場合】
【スマホの場合】
【PC版】は「83」→「93」+10
【スマホ版】は「43」→「54」+11
と改善されました。
(adsbygoogle = window.adsbygoogle || []).push({});
3-3.「適切なサイズの画像」とは1MB以下
続いて、画像サイズも適切なサイズにします。
「適切なサイズの画像」とはパソコンで表示される場合、
スマホで表示される場合の適切なサイズや拡張子があります。
通常画像の場合1MBを超えると読込みが遅くなりますし、
拡張子がpngやgifの場合も表示が遅くなる原因になります。
3-4.EWWW image Optimizerで画像ファイルを最適化する
そこで、プラグインのEWWW Image Optimizerをインストールして、記事内で表示される画像だけでなく、メディアの中の画像ファイルのサイズも最適化してみました。
今回このブログに関する画像ファイルが1757個あり一括最適化を行いました。
その結果
【PC版】は 「93」→「95」+2
【スマホ】は「54」→「62」+6
となりました。
まとめ
今回はGoogle Speed Insightsを用いて表示スピードをチェックしました。このサービスを使うことで表示スピードが遅くなる原因が判明したので、
●プラグインAutoptimizeでJavaScriptやCSSを整える。
●プラグインEWWW Image Optimizerで画像サイズの最適化を行う。
の2点を行いました。
結果的に
PC版は「83」→「96」 +13
スマホ版「43」→「62」+19
と標準以上のスピードになりました。
※スマホ版は改善の余地がまだありますので引続きスピードアップに向けて調整中です。
原因がわかると次のヒントにつながってきますね！どんなに良記事を書いても表示が遅れて離脱率が高まればブログ全体の価値は大きく下がります。
結果的に集客が募れない記事だと収益も低くなります。
これも小さな積み重ねですがひとつずつ丁寧なブログ運営を心がけてアクセスが集まるブログを作っていきましょう。
【関連記事】
https://www.taroblog.work/affiliate-tool/
(adsbygoogle = window.adsbygoogle || []).push({});