お金をふやそう

自由で楽しい人生を送るために、お金、時間、健康についてちょっとだけ真剣に考えるブログ

お手軽にできるブログの表示速度アップのためにやった方がいい8つのこと

スポンサーリンク

スポンサーリンク

f:id:akanesky:20151128152552j:plain

ブログに機能を追加したり、カスタマイズしたり、広告を貼り付けてるうちに、気づいたら、表示がなんか遅いなーってことないですか?
Google Adsenseの「アクティブビュー視認可能」の値が思った以上に低かったりするのも原因は、表示速度が遅いことも大きな要因の一つになっているかもしれません。

私もブログページの表示速度は、常に抱えている課題の一つです。

今回は、ブログ記事の速度向上のために、取り組んでみたことを紹介します。
私自身、運用を継続するのに、あまり手間がかかる対策は、取らないようにしています。
メンテナンス性も大事ですよね。
ですので、お手軽にできる改善方法のみを紹介します。

まずは表示速度を測ってみる

まずは、現状の速さを知るために表示速度を測ってみましょう。

どうやって表示速度を測るかですが、"GTmetrix"で測るのが便利です。
多くのブロガーは、このサイトを利用しているようです。
gtmetrix.com

URLをテキストボックスに入力して、"Analyze"ボタンを押すと、解析が始まり、結果を表示してくれます。
トップページと、代表的な記事ページを計測しておくといいでしょう。

f:id:akanesky:20151128140038p:plain

f:id:akanesky:20151128140743p:plain

ちなみに、私の場合、気づいたら、記事の表示に30秒近くかかってしまうようになってしまっていました。

使用していないコードを削除する

色々とブログに手を加えているうちに、今は使用していないスクリプトやCSSが残っていたりしていませんか?
そういうコードは、削除してしまいましょう。

javascriptを非同期読み込みにする

ブログに対して色々と凝ったことをしていると、多くのJavascriptを実行しているのではないでしょうか?
それらのうち、非同期化できるところは、非同期に設定してしまいましょう。

非同期の設定をしていない場合、Javascriptを読み込んだ順に実行し、その実行が終わるまで、ブラウザは次の処理を実行しません。
ラーメン屋に例えると、麺を茹でている間、ラーメン屋のおやじは、ずっと麺を茹で上がるのを待っていて、茹で上がってから、鉢を用意して、スープを入れたりするような方法をとっているようなものです。(余計わかりにくい)
可能であれば、麺を茹でている間に、鉢やスープの準備をしてほしいですよね。

つまり、一連のJavascriptを処理している間にも、並行して別のページ要素をダウンロードしたり、表示したり、別のプログラムを実行したりできると、ページを表示するためのすべての処理を速くすることができます。

でも、Javascriptもどこかのページから取ってきてまるごと使っているだけだし、そんなに難しいことはできないよ〰って方も安心してください。履いてますではなくて、簡単に実現できます。
<script src="・・・">に、"async"属性"か、"defer"属性を付加するだけです。

つまり、

<script src="http://hoge.com/foo.js" async>

<script src="http://hoge.com/foo.js" defer>

とするだけです。

HTML内に直接コードを書いている場合はつかえないので注意してください。
外部から別ファイルで読み込んでいるスクリプトだけ有効です。

"async"と"defer"の違いですが、

"async"は、スクリプトを即実行します。

"defer"は、一旦ページを表示し終えてから、実行を開始します。ただし、サーバからスクリプトをダウンロードしたりして実行の準備までは先に開始しておくので、何も指定しないよりも表示を速くできます。

"async"は実行順序は保証されておらず、これやって、その次にあれやってというようにスクリプト間に依存関係がある場合は、想定通りに動かないかもしれないので、注意してください。

"async"や"defer"を設定したら、いじったところがちゃんと動作しているか確認してくださいね。
例えば、広告などは、非同期に設定した後もちゃんと表示されているかどうか確認します。
Google Adsenseは、非同期のコードを入手できるので、後から設定する必要はありません。
Admaxは、設定すると、なぜか表示されなくなりました。まだ、表示されない原因はよくわかっていません。なので、"async"を設定していません。

表示が遅そうな広告を入れ替える

広告関係は、表示を遅くしている要因になっていることが多いです。
表示が遅そうな広告は、別の広告に入れ替えましょう。
商品を変更してもあまり意味はないですよ。
タイプを変更したり、別の広告サービスに乗り換えるという意味です。

楽天のモーションウィジェットは、結構表示速度の妨げになりますので、別のシンプルな広告に置き換えることで速度アップが期待できます。

後にまわせるスクリプトは後に移動する

ページの表示が終わってなくても、閲覧者はページを読み始めたり操作し始めたりできます。
ですので、先に処理しなくてもいいものは、できるだけ後に移動させましょう。
具体的には、例えば、フッター付近に、スクリプトのコードを移動させます。

ページの表示速度はあまり変わりませんが、ユーザの体感表示速度を上げることができます。

Googleの"PageSpeed Insights"でページをチェックする

Google先生が提供している"PageSpeed Insights"でページをチェックすると、ページの速度アップのための改善すべき部分と方法についてGoogle先生が教えてくれます。

PageSpeed Insights

多くの人は、Google先生から、いっぱい改善提案を受けたのではないでしょうか?
結構、無理難題も提案されると思います。
自分がいじれる範囲以外のファイルについては、大抵の場合は、手を打てないと思うので、諦めましょう。
せいぜい、ファイルの提供者に要望を出すくらいでしょうか。

イメージの圧縮も提案されると思います。
全部を実行するとものすごく手間がかかるので、表示回数が多そうなイメージに絞って圧縮や縮小を行うのが良いでしょう。

各ページ構成要素のサーバアクセスから表示までのタイムラインを確認する

"GTmetrix"の表示結果の"Waterfall"で表示の妨げになっている箇所がないか確認する

冒頭の方で、紹介したGTmetrixの表示結果に"Waterfall"と書かれたタブがあると思います。
それをクリックしてみましょう。

f:id:akanesky:20151128141204p:plain

このような画面で、処理に時間がかかっている要素や、次の処理をブロックしている要素、エラーとなっている要素などを確認できます。
問題がありそうな要素があれば、何らかの対処が必要です。
手を入れて解決できなさそうであれば、思い切って削除してしまうことも検討しましょう。

改善後の表示速度を測ってみる

対策の結果、実際に効果があったのか、もう一度、"GTmetrix"で表示速度を計測して、対策前と比較して確認してみましょう。
改悪になっていたり、あまり表示速度が上がっていなければ、別の対策を考える必要があります。

おわりに

ページの表示速度の向上は、アドセンスやアフィリエイトの収益に関わる課題です。
あまりに表示が遅いページは、ユーザが見ずに他に移動してしまうかもしれませんし、もしかしたら、Google先生にページの評価を下げられてしまうかもしれません。
ブログに何か手を加えたら、表示速度の確認やタイムラインで表示を妨害している要素が発生していないかを確認しましょう。