僕はブログにはWordpressを使っていてテーマにはSTINGER3を利用していて、特にテーマのせいではないのですが、いつもページの表示が遅く感じて悩んでいました。
SEO的にもサイトの表示速度は速いほうが良いので、改善を試してみました。
宣伝【iPhone対応無料ゲーム】 斬-Xan- 戦国闘檄・無双伝
まずは現状の確認
改善前の僕のブログサイトの評価を恒例のGTmetrixで計測をしておきます。
計測結果は以下の通りです。
Googleの評価を表している
「Page Speed Grade:」 が Cランク
Yahooの評価を表している
「YSlow Grade:」 が Dランク
ページの表示速度を表している
「Page load time:」 は 5.26秒
という全く良い状態ではありませんでした。
どこかで見た情報ではページは4秒以内に表示が完了しないと、ユーザはどこか他のサイトに移動してしまうというのも見たことがあるので、それではいくら内部対策をしていてもページビューが伸びなくなります。
そこで何が問題になっているのかを確認します。
評価が表示されているページの中央ぐらいのところに、Timelineのタグがあります。そこをクリック。
そこには、どの処理がどれだけの時間がかかっているかを表示しています。
その中から時間がかかっているものを洗い出しをします。僕の場合は目に付いたのが以下の対策の３点になります。
１つ目の対策
１つ目は、トップページのヘッダー画像です。
下の画像の赤枠が、僕のブログのトップページのヘッダー画像の所要時間で、時間を見てみると、967msの時間がかかっています。
「ms」とは1000分の1秒を表しています。1000ms=1秒となりますね。
僕のブログのヘッダー画像はPNGファイルで、自分で作成して背景などは透明にしたのですが、JPGよりかは重たくなるみたいです。
ということで、こちらもよく利用するサイトですが、tinypng.comでPNGファイルを圧縮します。
実行結果はご覧のとおりですが、50.9KBあったファイルサイズが63パーセントも削減し、18.7 KBになりました。
２つ目の対策
２つ目はこちらもPNG画像ですが、画面右側に設置しているFeedlyで使用している画像です。
この画像も自分で加工して作ったのですが、ファイルサイズに問題があるのかもしれません。
表示するための時間も942msでした。
ということなので、tinypng.comで圧縮しておきます。このファイルに至っては55パーセントほど削減ができました。
３つ目の対策
３つ目は楽天のアフィリエイトの広告です。
これはいつも気になっていたのですが、サイトを開くたびに画面の右側で渦を巻いて少し時間が経ってから広告を表示していました。
渦を巻いているときはロードしている時だと思いますが、少し時間がかかりすぎです。
Timelineのトータルの時間を見ても635msなので少し気になる感じです。
そこで、楽天の広告はやめてAmazonの広告と差し替えました。
再計測をしてみる
これまでの３点の対策でどこまでサイトパフォーマンスが改善されたかを計測してみます。
計測結果は以下の通りです。
Googleの評価を表している
「Page Speed Grade:」 が Bランクへランクアップ！
Yahooの評価を表している
「YSlow Grade:」 が Cランクへランクアップ！
ページの表示速度を表している
「Page load time:」 は 4.58秒で何とか4秒台に！
全体的に状態が良くなりました！
まとめ
些細なことなのかもしれませんが、やっぱり画像はできるだけ圧縮をして容量を小さくする必要があります。
今はtinypng.comなど無料で使えるサービスが多いので積極的に使っていくことをお勧めします。
またアフィリエイトの広告はjavascriptを使用している物が多いですが、javascriptのプログラムは処理が重たくなる時が多いので利用するには注意が必要ですね。
それから、表示速度3秒台を目指してこれからも、まだまだ改善のしていかなくてはいけません。