こんにちは!コミュニケーションプロダクツ事業部(以下:CP)の鶴田です。

普段はSEOファシリテーション・ツール【seoLOUNGE】の開発や、お客様のサイトのSEO対策を目的としたコーディング指南、制作に関わるコーディング業務全般などを行っております。

今回は、そんなコーディングプランナーの私がWebサイトの表示速度に関するお話をさせていただきます。

スピードアップデートについて

早速ですが皆さんは「スピードアップデート」をご存知でしょうか?

スピードアップデートとは?

2018年7月にGoogleのモバイル検索での順位を決める評価の一つとして表示速度(読み込み速度)が追加されました。これによって、モバイルページの表示が極端に遅いと検索順位を決める上でマイナス評価を受けるようになったのです。

参考:ページの読み込み速度をモバイル検索のランキング要素に使用します (Googleウェブマスター向け公式ブログ)

といいつつも、、、
実際に影響があるのは「表示速度が極めて遅く、ユーザーの利用の妨げになるページのみ」であり、多少遅いと感じる程度の表示速度であれば特に影響はないでしょう。
※読み込みに「○秒以上かかったら」のような明確な基準があるわけでもございません。

スピードアップデートによるランキング変動は皆無という結果も多く聞きます。
そもそも表示速度自体が検索順位を決める上での重要度がそこまで高くなかったことも、今回のスピードアップデートによる影響が少なかった要因とも考えられます。

ですが、これはあくまでGoogleが検索順位を決めるときのことであり、ユーザーのことを考えれば、Webサイトの表示が速いに越したことはないのです。

そこで、ここからはWEBサイトの表示速度を上げるためのTipsをご紹介させていただきます。

1.表示速度と改善点の確認

まずは皆さんが運営されているサイトがどの程度の表示速度で、表示が遅い場合にはどこを直さなければならないかを確認しなくてはなりません。

このチェックには、Googleが無料で提供しているチェックツール「PageSpeed Insights」や「Lighthouse」を使いましょう。

PageSpeed Insightsでは「ページの速度(実際の表示速度)」と「最適化スコア(表示速度に対する改善具合)」がモバイルとパソコンのそれぞれで確認できます。
そして、CSS・HTML・JavaScriptを縮小する、サーバーの応答時間を短縮する、ブラウザのキャッシュを活用する、など最適化に必要な改善案を提示してくれるのです。
ここで検出された項目を修正していきましょう。

PageSpeed Insightsの公式ヘルプにてすべての項目が解説されているのでそちらも併せてご確認ください。
参考:PageSpeed Insightsのルール

PageSpeed Insightsとは

ちなみにGoogleのトップページ、https://google.co.jpをPageSpeed Insightsにかけると、ページの速度はモバイルとパソコンでともに最高レベルのFastです。最適化スコアも100点に近い点数が出ます。さすがGoogle先生!

Lighthouseはwebサイトの読み込み速度やSEOの対策状況をスコア化する、Chromeの拡張ツールです。

その他にも表示速度のチェックツールは数多く存在しますが、用途と目的にあわせてそれぞれ使い分けしていくことをおすすめします。ひとつのツールに頼らず複数のツールを組み合わせることで、抜け漏れのないチェックと改善を行っていきましょう。

2.優先すべきは画像の最適化

改善項目の中でも一番修正に対するインパクトがあるのが「画像の最適化」です。画像を修正するだけでPageSpeed Insightsのスコアが2~30上がることも多くございます。

画像最適化におけるポイントは「表示されるサイズと同じサイズの画像を使う」、「画像を圧縮する」の2つです。

読み込み速度において、ファイルの容量というのは重要な要素です。容量の大きいファイルが多ければ多いほど表示速度は遅くなりますし、ファイルをどんどん軽くしていけば、その分表示速度も上がっていきます。
画像の容量は、縦横のサイズ(ピクセル)と画素数によって変動します。単純に画像のサイズが大きく画素数が多いほど容量は上がりますので、適切な状態で画像を用意することが求められます。

ポイントのひとつである「表示されるサイズと同じサイズの画像を使う」というのは、100pxで表示させるなら最初から100pxの画像を用意しましょう、ということです。
大きい画像をCSS等で表示を調整するのではなく、最初から表示させたい大きさの画像を用意することで、画像の容量を抑えます。

もうひとつの「画像を圧縮する」というのは簡単に説明すると人の目にはギリギリ判断つかないようなレベルまで画像を粗くすることで画像のファイルサイズを小さくするということです。

画素数が多いとそれだけきめ細かくなるため、画像が綺麗に見えます。ただ、いくら画素数が高いと言っても人間の目には限界があります。
ちょっとくらい粗くしたところで判別できません。

実際に画像を圧縮した例を用意しました。左に圧縮前、右に圧縮後の画像を並べたものです。

画像の圧縮比較

ご覧の通り、違いがほとんどないことがわかりますね。
ちなみにサイズを変更せずに1.13MBから106KBに圧縮できました。ファイルの容量が100分の1になり、見た目がほとんど変わらないなら、これほどお得なことはありません。

画像圧縮ツールには、オンライン上で作業できるものからインストールして使用するものまで数多くございます。適宜用途にあわせて活用してみてはいかがでしょうか。

もちろん、画像によるユーザーへの訴求が重要なサイトの場合はこの限りではありません。きれいな画像を提供することがユーザー体験上重要であれば、そちらを優先すべきです。

3.改善における注意点

表示速度の改善では、サーバーの設定や制御に関連するファイルを編集することが多くあります。それによって表示速度が改善できる反面、意図しない場面でサイトが表示できなくなってしまったり、特定のシステムで不具合が生じてしまったりするケースがございます。

特にWordPressのような汎用CMSをお使いの場合、表示速度が改善できるプラグインが多く出回っています。ですが、システムとうまく噛み合わず、正しい表示がされなかったり、逆に表示速度が遅くなったりしてしまうことも。

上記のようなアクシデントを防ぐためにも、本番と同じ環境で動作確認を入念に行った上で、なにか問題が発生した際にサイトを元に戻せる状態にしておくことを忘れないようにしてください。

SEOよりもユーザー体験のために

繰り返しになりますが、2018年7月のスピードアップデートで評価が下がるのは、本当に遅いページのみであり、その影響はごくわずかです。

ですが、モバイルにおける表示速度はユーザー体験や離脱率に大きく直結します。
実際にGoogleの発表で、モバイルユーザーの53%がページの表示に3秒以上かかると離脱してしまうというデータも出ています。
参考: Find out how you stack up to new industry benchmarks for mobile page speed

なかなか表示速度の改善まで手が回らないという方も多いと思います。
ですが、ユーザー体験の向上に表示速度アップはマストの項目です。

まずは重要なページやアクセスの多いページだけでも改修していくことをおすすめします。
ユーザーにとってさらに使いやすいページを追求していけることは間違いありません。