さるオヤジの何を今更

読者です 読者をやめる 読者になる 読者になる

さるオヤジの 何を今更

今更ながらいろいろと奮闘してます。その自己満足的な記録です。

サイトの速度を改善 提案から最適化までGoogleアナリティクスで完結出来る

f:id:fukubuggy:20170408163014p:plain
どうも、さるオヤジです。

今回は「サイトの速度改善について」です。

って言うと、何かものすごくデキる人みたいに聞こえるかもしれませんが、初心者に毛が生えたくらいの、さるでオヤジな私ですから、そんなに大層なことはできません(笑)。

ただ、私と同レベル位の人には参考になるのではと思い、今回はこのような記事に挑戦します。

表示が遅いとどうなる?

ところで皆さん、他の人のブログを訪問して、表示に時間かかるな~とか思ったことがあると思います。
そんな場合、表示されるまで待ちきれなくて戻ったり、閉じたりしてしまうこともありますよね?

自分のブログの表示時間が遅い場合も同様で、せっかく記事に興味を持って訪問してくれても、ページの表示が遅いと、やはり待ちきれなくて戻っちゃったり、閉じられたりしているんです。

自分のサイトの速度を把握して、それを改善する簡単な方法はないものか?

Googleアナリティクスを使いましょう。
www.google.com
ブログをやってる人は、大抵導入してると思いますが、機能がたくさんあり過ぎて、中々使いこなせないこのサービス。

私も早々に導入しましたが、リアルタイムの訪問者数(たまに1とか2なんてなってると嬉しい)をチェックするくらいで、他の機能については深入り出来ていません。
f:id:fukubuggy:20170408143058p:plain

まだ導入してない方は、Googleアカウントを持ってれば直ぐに導入できますから、ぜひ活用してください。
導入の方法がわからない場合は、検索すればわかりやすいサイトがたくさんありますのでそちらをご覧ください。

検証から提案

ここからが本題です。実際のアナリティクスの画面を使って説明します。

アナリティクスのレポ-ト画面の左下の方を「行動」「サイトの速度」「速度についての提案」とクリックします。
f:id:fukubuggy:20170408143336p:plain
するとこのような画面が出ます。この画面の右の方を見てみると、ページごとの平均読み込み時間とPagespeedスコア(100点満点)がわかります。

私のブログの場合このページは読み込みに平均36.06秒かかっていて、Pagespeedスコアは45点だとわかります。さっ36秒って・・・

次にPagescoreの提案の欄の青文字「合計6個」をクリックします。するとこんな画面が出てきます。

PCでは43点
f:id:fukubuggy:20170408144701p:plain

モバイルでも43点
f:id:fukubuggy:20170408145524p:plain

ページが表示されるので、どのページが読み込みが遅いのかを把握できます。

私の場合、読み込みに36秒もかかってる記事はこの記事でした。
www.saru-oyaji.xyz
確かに画像を多用しています。

改 善

では改善の方法です。
さっきの画面を下の方にスクロールすると、「このページ向けに最適化された・・」と書かれている部分の、青文字「画像、Javascript、cssリソース」をクリックします。
f:id:fukubuggy:20170408150239p:plain
そのまま「保存」「名前を付けて保存」で適当な場所に保存します。

保存した場所を開いて
f:id:fukubuggy:20170408150817p:plain
「Image」「すべて展開」とクリックすると

f:id:fukubuggy:20170408151021p:plain
この記事内に使っている画像が最適化されて出てきます。

あとは記事の編集画面で画像を差し替えればページの読み込み速度が改善されるはずです。

もう一度アナリティクスに戻って「レポートの更新」をクリックしてみると
f:id:fukubuggy:20170408152056p:plain
Pagespeedスコアが45から80点に上がってます。

PCでは45から79点
f:id:fukubuggy:20170408152354p:plain

モバイルでも45から65点へ上昇しました。
f:id:fukubuggy:20170408152416p:plain

今回は画像のみを差し替えましたが、Javascriptとかcssリソースを最適化するともっと改善されるかもしれません。
ただこの辺りになると私レベルではちょっと手に負えそうにありませんので、スルーしておきます(笑)。

一応開いては見たんですが、差し替えて元に戻せなくなりそうだったんで・・。

もっと勉強します。

最後に

という事で、Googleアナリティクスで完結できる速度の改善方法でしたがいかがだったでしょうか?

お気づきかとは思いますが実はこれ・・、最初から、画像圧縮して投稿すれば何のこたあない事です。

こんなフリーソフトや
compressor.io
こんなフリーソフトを使って、
tinypng.com
画像を事前に圧縮して投稿すればいいだけの話です。

ただ、私のように何の思慮もなく記事投稿した後に画像の圧縮をしたい場合、その画像を探すだけでも一苦労です。消しちゃってる事もありますし・・。

そんな場合は、このGoogleアナリティクスに頼るのもいいかもしれませんよ。

読み込みが遅いページの画像をピンポイントに最適化できますし、PV数が多い順に表示されますから、それも考慮しながら改善できます。

サイトの速度、気になったらぜひやってみてくださいね。

それでは~。

スポンサーリンク