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