とらやぎです。
先日知人から、「ブログの表示速度が1秒早くなるだけで、ストレスを感じる人が１６%も減る」ということを知り驚かされた
ので、とらやぎ日記の表示速度が上がるよう対策をしました。
今回は、その中で学んだ下記2点について紹介したいと思います。
- どうすればブログの表示速度が分かるのか
- 何が表示速度に影響するのか
３秒以上かかると４０％の人は読まない。
ちなみに表示に３秒以上かかるページは４０%もの人が見るのをやめてしまうそうです。
たった３秒でせっかく頑張って書いた記事を見てもらえないのは非常にもったいないですよね。
それに読むのにストレスを感じるのは、見てくれる人にも親切ではないですし。
どうすればブログの表示速度が分かるのか。
自分のサイトの速度は下記サイトにURLを打ち込めば分かります。50点/100点中のように１００点満点中○○点という形で表されます。
表示速度の変化
- モバイル：46点→56点
- パソコン：54点→64点
改善の結果、点数的にはモバイル表示とパソコン表示のそれぞれがプラス10点程アップしました。個人の感覚的には表示時間を約2秒ほど短縮できており、点数以上に快適さを感じております。
改善した内容
画像の圧縮
貼り付けている画像の容量が大きいと、読み込みに時間がかかるようです。なので片っ端から圧縮しました。
記事上のシェアボタン廃止
少なくとも、記事を表示した時に最初に見える部分は読み込みを速くしたいと思い、廃止しました。シェア数の読み込みに時間がかかるようです。
記事上のGoogleアドセンス広告廃止
こちらもシェアボタンと同様の理由で廃止です。アドセンス広告を廃止した時に点数が５点ほどアップしたのでスピードへの影響は大きいようです。
記事を開いた時の見た目もスッキリして見やすくなったかなと思います。
記事中のGoogleアドセンス広告廃止
記事中の広告はスピードにも影響しますが、どちらかと言うと読者に対する読みやすさの観点で廃止しました。
途中でいきなり広告が入ってきて、内容に集中できなくなるのを防ぐためです。
今回実施しなかった内容
PageSpeed Insightsこちらのサイトで解析を行うとブログに対する改善内容を提案してくれます。
提案された中で今回実施しなかった項目は下記です。
- ブラウザのキャッシュを活用する
- スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
- JavaScript を縮小する
- サーバーの応答時間を短縮する
- CSS を縮小する
なぜ実施しなかったかと言うと、、、やり方が分からなかったからです笑
このようになる事を考えると、師匠と呼べる人と出会ってやり方を学んだり、そもそもこんな事は重要ではない。もっと他にやることがある。みたいな助言を頂くのは大切なんだろうなあと思いますね。。。
まとめ
今までサイトの表示速度に関して何もケアしてこなかったので、結果的に結構重いサイトになっていました。
今回、画像の圧縮や広告などの配慮をしたおかげで少し改善することができたかなと思います。（画像の圧縮→貼り替え作業は結構大変でした。。。８０記事くらい溜まっていたので。）
今後は重い画像は圧縮してから貼るように気を付けつつ、表示速度以外にも、できるだけ読みやすくするにはどうしたら良いかを勉強していきたいと思います。
以上っ！