ページの表示速度とは？重要性と改善方法について解説
ページ表示速度とは？
WEBサイトやWEBページというのは、「アクセスを受ける→サーバーから必要な情報を持ってくる→表示する」という流れでユーザーに届けられています。
アクセスがあってから、WEBページが表示されるまでの速さのことを「表示速度」と言います。
表示速度の重要性
SEOに影響する
SEO対策とは、Googleの検索結果で上位表示を狙うための施策のことです。
Googleは2018年に公式ブログで、「ページの読み込み速度をモバイル検索のランキングの要素に使用する」ことを発表しています。
Googleのアナウンスの内容をまとめると、このような感じになります。特に遅いページは改善し、ある程度対策をしたページであれば、そこまでこだわる必要はなさそうですね。
さまざまなワードの上位記事を50個ほどPageSpeed Insightsで確認してみたところ、赤信号に当たる0-49も割と多かったですね。やはりコンテンツ的に優れているのが重要なのでしょう。
ユーザー体験に影響する
表示速度の改善が重要とされるのは、こちらの部分が大きいでしょう。
ブログやWEBサイトを訪れたユーザーが、一番最初に体験するのが表示速度です。言うならば、お店に入るまでにかかる時間。
ここで長時間待たされるのは、ユーザーにとって気持ちの良いものではありません。
特にWEBの世界では、ユーザーは時間がかかるようだとページを見る前にブラウザバックして帰ってしまいます（直帰率UP）。
またサイト内を回遊する際にも、個々の記事の表示速度が遅いと、その度ユーザーを待たせることになります。これでもユーザーが帰ってしまいますね（離脱率）。
入るのにものすごく時間がかかる上に、商品を探すのも一苦労だったりあらゆる場面で待たされたり、そんなストレスショップには二度と行きたくないですよね。
表示速度を改善しよう
上記の理由から、表示速度を改善することはユーザーの滞在時間を伸ばし、また来たくなる居心地の良さにも繋がるというわけです。
それでは、改善のために何をすれば良いのか見ていきましょう。
画像サイズを適切にする
デザインや資料として使う画像のサイズを見直してみましょう。
自分で撮影したものやサイトからダウンロードしてきた画像は、そのままではかなりサイズが大きいです。
画像サイズが大きいまま記事に使ってしまうと、それをサーバーから運ぶのにたくさん時間がかかってしまいます。これは表示速度の低下に繋がります。
画像はできる限り軽く、その上で綺麗な画像を使うのがベストでしょう。とはいえこれがなかなか難しいところです。
圧縮ソフトを利用しよう
画像サイズを小さくするために、「圧縮ソフト」を利用しましょう。
同じ大きさの画像でも、画像の圧縮を行うだけでサイズがかなり違ってきます。
オススメの圧縮ソフトについては、の記事でまとめています。
無料・有料の画像圧縮ツール9選：WEB制作やSEO対策に
ベストな大きさに調整しよう
たとえ圧縮しても、もとの画像が大きすぎると結局はデータサイズも大きくなってしまいます。
そのためにも、自分のサイトにぴったりな画像の大きさを知ってリサイズすると良いでしょう。
不要なCSSを削除する
WEBページを表示する際に、CSSファイルはすべて読み込まれています。
この時使っていないCSSのコードが残っていると、その分余計に時間が掛かってしまいます。
デザインを調整した時や、使うと思って用意したけど使っていないコードがあれば、こまめに削除しておくと良いWEBサイトに繋がります。
使っていないCSSを簡単に見つける方法については、こちらの記事が参考になります。
読み込むCSSファイルを変更する
大幅にデザインを変更した記事を制作する場合、その記事だけ別のCSSファイル作成し、それを読み込ませるということも可能です。
こうすると無駄なCSSを読み込まない分、表示速度が改善されます。
Autoptimizeを利用する
「Autoptimize」は、HTMLやCSSなどのデータを圧縮して小さくしてくれるプラグインです。
ダウンロードして有効化するだけなので、すぐにできる対策としては非常にオススメです。
画像の遅延読み込みを利用する
画像の遅延読み込みとは、最初にスクリーンに映し出されないページの後半の画像に関して、ユーザーがある程度スクロールしてから読み込むようにする処理のことです。
画像をたくさん使った記事でも、WEBページを表示する際にはじめの方の画像だけ読み込めば良いので、表示速度をある程度改善することができます。
スクロールしていくと画像がフワッと表示されるページは、この遅延読み込みを利用しています。
PageSpeed Insightsで計測する
PageSpeed Insightsは、特定のページの表示速度を計測してくれるサービスです。
現在の表示速度に関してモバイル・パソコンそれぞれの数値を確認することができます。上の数値が黄〜緑を目指すのが良いでしょう。
また改善策についても提示してくれます。秒数が大きい部分を改善していくのが良いかと思います。
Googleのアナウンスにもありましたが、完璧に早くするまでやらなくても良いと思います。できそうなところだけ改善しておくだけでも良いでしょう。
まとめ
WEBサイトにおけるページの表示速度の重要性と改善策について解説しました。
魅力的なコンテンツ作りも大切ですが、こういったユーザーの目に触れない部分のメンテナンス作業も大切なのですね。
