スマホを見ていてページの表示が遅いなーと感じることがあって、「自分のサイトはどうだろう？」とふと気になったので調べてみました。普通にストレスなく見られていたので問題ないと思っていたんですが、ものすごく遅かったです。ページの表示が遅いと良いことはないので、できる限り改善していきたいと思います。
ページの表示が遅い悪影響
まずページが開かないと、せっかく見に来た訪問者が見るのをやめて帰ってしまいます。具体的には2017年にGoogleが、以下のような分析結果を公表しています。
最近の分析結果によると、モバイルのランディング ページが完全に読み込まれるまでの平均時間は 22 秒です。しかし、読み込みに 3 秒以上かかるページからは 53% のモバイルサイト訪問者が離れています。
そして、読み込みが遅いとGoogleにも嫌われます。つまり検索順位が上がらないということです。せっかくブログを書いてもサイト自体が重ければ読んでもらうチャンスを逃す結果になります。
サイトの表示が遅い悪影響まとめ
- ページを開く前に約半数の人が離脱
- Googleの検索順位が上がらない
- アクセスが伸びない
自分のサイトの表示速度をチェック
まずは、自分のサイトの表示がどの程度の表示速度なのかチェックします。チェックに使用したのはGoogleが提供しているこちらのツール。
評価は100点満点で3段階に分かれます。
【 速い：100～90 平均：89～50 遅い：49～0 】
私のサイトの点数は？まずはトップページからチェック。
パソコン表示が「47」、モバイル表示が「39」でした。遅いですね。でも改善すれば平均くらいにはできそうです。
次に記事ページをチェックしてみます。
パソコン表示は「54」と平均点でした。モバイル表示は「26」とかなり低い結果に…。遅すぎてびっくりです。せめて平均点までは改善したいところ。
いろいろと改善してみる
調べていて簡単にできそうなものをピックアップ。時間がかかりそうな、jQueryをいじったり代用したりは今回はしませんでした。できれば改善効果が高いようです。
①画像の軽量化（サイト全体）
まずは、画像の軽量化から。基本的に画像は軽く変換をしてからアップしていたので、問題ないだろうと思っていましたが全然ダメでした。ダメだった点は、せっかく変換しても品質が100％でサイズが重め。品質80％でも遜色ないので、この品質で差し替え。
次に画像の保存形式でPNGが何枚かあったのでJPEGに変換しました。PNGは重いので、JPEGかGIFが良いそうです。また、変更履歴を画像ファイルに残していたので容量が大きくなっていました。
- 品質100％→80％
- 保存形式はJPEG or GIF
- 変更履歴を保持しない
②はてなのヘッダー削除（モバイル）
モバイル版で、はてなブログのヘッダーが表示されていたので削除しました。このヘッダーの読み込みが遅かったので、改善効果が高いと思います。
消し方は下記の設定場所にCSSを追加で消えます。
「デザイン」→「スマートフォン」→「フッター」→「ページ下」
/* ヘッダー表示なし */
#globalheader-container {
display:none;
}
/* ヘッダーなしの余白調整 */
#container {
padding-top:0px;
}
③不要なJavaScript・CSSを削除（サイト全体）
この作業をするときはバックアップ必須です！間違って消しても戻せるようにしておきましょう。
外部から読み込んでいるJavaScriptやCSSを極力なくしていきます。また、不要なCSSの記述を削除していきます。今までは気にしていなかったので、「いいなー」と思ったカスタマイズを増やしてきた結果、CSSはかなりの記述量になっていました。これを地道に断捨離。CSSを読み込まず、直接HTMLで記述するのも効果的だそうです。
④トップぺージからはてなスターの削除（PC）
トップページに表示されているはてなスターを削除しました。はてなスターは重いので、スターが複数あるトップページでは表示速度がかなり遅くなっていました。記事ページから押せるのでトップページにはいらないと判断しました。
消し方はこちら。
「デザイン」→「カスタマイズ」→「デザインCSS」
/*トップページのはてなスター非表示*/
.page-index .hatena-star-add-button {
display: none;
}
.page-index .hatena-star-user {
display: none;
}
.page-index .hatena-star-star {
display: none;
}
.page-index .hatena-star-inner-count {
display: none;
}
.page-index .hatena-star-star-container {
display: none;
}
⑤ヘッダーを画像からテキストへ（モバイル）
モバイルページのヘッダーに画像を使用していましたが、サイト開設時にとりあえず作ったものだったのでテキストベースに変更しました。ちゃんとした画像がある場合は、そのままで問題ないと思います。
対策後の速度は？
まずはトップページから。パソコン表示が「47」→「63」、モバイル表示が「39」→「47」。
パソコン表示は16アップと大幅に改善！平均速度に上がりました。が、問題はモバイル表示。8アップしましたが、わずかに平均に届きませんでした…。
次に記事ページ。パソコン表示が「54」→「63」、モバイル表示が「26」→「35」。
どちらも9アップ。パソコン表示はまた63とトップページと同じ平均速度に。モバイルは改善しましたが、まだまだ遅いですね。自分のスマホで見るとかなり早く表示されるので問題ないと思ったのですが…。ちなみに、この点数はムラがあるので計測するタイミングによって上下します。パソコン表示だと60前後といったところです。
他に気になった改善点
iframeを極力なくす
記事の中にさらにページを表示させるiframe。はてなブログでは「読者ボタン」と「ブログカード」で使用されています。ブログカードは↑過去記事とかリンクで使用するやつですね。ブログカードは個人的に好きなデザインなので、あまり気にしたくないなーと思いました。読者ボタンは気に入ったデザインがあったら考えていこうかと。
アナリティクスやアドセンスも重い
Googleが提供しているアナリティクスやアドセンスが実は重かったりします。特にアドセンスの広告で動画だとかなり重いですね。ただ、この2つは外せないのでどうしようもないです。
やっぱり重い「はてなスター」は悩む
はてなスターは読んでくれた人の反応が、スターというわかりやすい形で見えます。これはブログを書いていてモチベーションアップに繋がるので、私としては残していきたいと考えています。ただ、ページがあまりにも遅いとそもそも見てもらえないので悩みの種ではあります。
結局、速度が上がらないので計測サイトを変えてみた
なんとかモバイルの表示速度を上げたかったんですが、これ以上は改善できませんでした。なので、同じGoogleが提供しているモバイルサイトに特化したチェックサイトに変更。再チェックしてみました。
モバイルサイトの読み込み速度とパフォーマンスをテストする - Google
トップページは読み込み時間4秒。推定離脱率は10％とのことでした。やはり、ちょっと遅めです。でもこれまでの点数からすると、それほど悪くない数値。
次に記事ページ。なんと、読み込み時間3秒で推定離脱率は「低」！
この結果を見て、問題ないんじゃないかと思ったのでひとまず今回の改善は終了しようと思います。最初に比べれば、だいぶマシになったと思います。
