近年ではインターネットも３Gから４Gになり、一度に大量のデータが送れるようになってきています。
しかし、多くのウェブサイトがユーザーが期待するよりも速くサイトを表示できていないことを知っているでしょうか？
するとどうでしょう。
いいコンテンツを作ったつもりなのに、サイト表示が遅いというだけで、見てもらえないなんてこともあるのです。
そこで本記事では、ウェブサイト速度最適化について学び、対策を施して、より高いユーザーエクスペリエンスを獲得できるような解説をしていきます。
ウェブサイト速度最適化するメリット
ウェブサイトが速く表示されるメリットは、主にユーザーエクスペリエンスに関係してきます。
例えば、
・表示速度が短いと直帰率が下がり、コンバージョン（CV）が上がる。
・表示速度がユーザーの満足度に影響する。
これらを詳しく見ていきましょう
表示速度と直帰率、CVの関係
まず、「直帰率」という言葉に馴染みがない方のために、定義を説明します。
「直帰率」とはユーザーがある１ページだけを見て、離脱してしまったことを表した数値です。
これが、高いほど、多くの人が、１ページだけ見て、他のページは見ずに去っていってしまったということになります。
その「直帰率」がページ表示速度と関係があるらしいのです。
ユーザーは5秒も待ってくれない
ここで、画面の表示時間と直帰率のデータを見てみましょう。
（データ参考：Think with google）
このデータは、ページの表示速度が１秒から何秒になったかで、直帰率が変化していくということを、表しています。
１秒から３秒になると32％増加するという具合です。
ここで、見て欲しいのが、表示速度が５秒、６秒の時です。
直帰率が約２倍になっています。
ここでわかるのは、５秒くらい経つと「見るのやめようかな」という人が、かなり増えていくということです。
逆にいうと、ウェブサイトの速度が速ければ速いほど、ユーザーが離れていく割合を少なくすることが、できるというわけです。
最初の５秒が肝心
上のデータで直帰率が、５秒ほど経ってしまうと大きな影響が出ることがわかりました。
しかし、それだけではありません。
ユーザーは、そのページを離れるただ離れるだけでなく、そこの商品を買ってくれる可能性も下がってくるのです。
このウェブサイトのデータによると 「Site Speed is (Still) Impacting Your Conversion Rate 」
コンバージョンは表示速度が1秒から５秒にかけて、急激に下降していき、そこから平坦になるということを示しています。
これから、何が言えるのかというと、表示速度が５秒を超えてくると、そこから先、コンバージョンがずっと悪いということです。
すなわち、ウェブサイト速度最適化を施し５秒以内に表示して、顧客を獲得しようということです。
ユーザーの満足度の影響
多くのユーザーは、私たちが思っている以上に、速いウェブサイトを求めています。
Googleによるとウェブページの平均表示時間は、15秒なのですが、上のデータを見てわかるのが、ユーザーは、それの３分の１も待てないというのがわかります。
私も、急いで、データを調べるときに、画像がたくさん貼ってあるページをクリックしてしまい、イライラした経験があるくらいです。
ここから考えると、表示速度が速いとユーザー満足度が高くなるのではなく、遅いとユーザー満足度が低くなるということが言えると思います。
ユーザー満足度が低いと、再びサイトに訪れてくれる可能性が低くなるので、ウェブサイト速度最適化は、重要な役割を担っていることが、わかります。
ウェブサイトの速度が遅くなる原因と対策
ウェブサイト速度最適化をするためには、色々な要素があります。
例えば、
・画像、動画の重さ
・無駄なCSSやJavaScript
・ウェブサイトの読み込み設定
しかし実際、原因もわからず、対策するのは、大変です。
そこで、チェックツールを使って、問題をわかりやすくしていきます。
1. ウェブサイト表示速度をチェック
まずは、自分のウェブサイトの速度をチェックしましょう。
「PageSpeed Insights」にいき、ページのURLを入力
Googleが提供しているサイトなので、安心して使ってください。
PageSpeed Insightsサイトにいくと「ウェブページのURLを入力」のボックスがあるので、入力して分析を押しましょう。
分析終了後、レポートをチェック
分析が終了すると以下のような点数が表示されると思います。
今回、私のブログは５秒ほど読み込みに時間がかかるというのがわかりました。
一番上の点数（今回は45）にも注目してください。
公式 「Chrome For Developer」 によると、
・0〜49：乏しい
・50〜89：改善箇所あり
・90-100：良い
らしいので、かなりの改善が必要だということがわかりました。
ほぼ文字しかないブログだったのですが、改善が必要とわかりかなり驚いています。
この下に行くと、改善点が見られます。
これを目安にして、改善していきましょう。
また読む:レスポンシブデザインとは？基本や作り方を見ていきます！
2. 使用してないCSSとJavaScriptの削減
これによりネットワークの通信量を削減できるようです。
自身のウェブサイトが１から作られているものであれば、使われていないJavaScriptを削除してみてください。
HTMLに詳しい方
ツールを使うと簡単にできるようです。例えば、ラッコツールズです。
このツールでコピペするだけで軽量化してくれるそうです。
HTMLに詳しくない方
ここは触らなくてもいいかもしれません。
ワードプレスなどには、不要なJavaScriptを削除してくれるプラグインも存在するのですが、何が必要、不必要か判断が大変です。
今回、私のブログはGoogleアドセンス（収益化のプログラム）だったため、収益化がなくなってしまっては困るので、触らずに置いておこうと思います。
3.適切な画像サイズを選択する
画像のサイズは、使うものによって様々です。
例えば、ブログ内の画像であれば、横幅が1000pxくらい。
ブログのサムネイルならば、1200x630px がお勧めされています。
さらに拡張子もたくさんあるので、解像度にあまり影響がないウェブサイトなら、圧縮率の高いものを選んでもいいかもしれません。
また、サイズと拡張子はそのままで、画像を圧縮してくれるサービスがあるので、それを利用しても構いません。
今回、私の場合、SEOにもベストと言われている画像サイズを使っているため、画像サイズは変更せずに、pngのイラストを圧縮だけしました。
500kBから100kBほどに圧縮してみました。
Optimizillaのツールで簡単に行うことができます。
これにより、First Contentful Paintが3.2から2.9に改善しました。
私のブログは画像がほとんどないため、改善幅は小さかったですが、たくさんの画像を扱っているサイトでは、もっと効果を発揮すると思います。
しかし、これだけでは、スコアは数ポイントしか、上がりませんでした。
もっと改善できることはないのか？
そう思ったとき、パフォーマンスを20点以上も上げた方法が存在しました。
また読む:SEO誰でもできるの？SEOの基礎知識からSEOエージェントの活用
4.ウェブサイトを先に全部読み込ませない
ウェブサイトは、最初に全部読み込まれる設定になっています。
そのため、重いコンテンツも全部読み込んでから、表示します。
そこで、画面外にあるものは、読み込まないような設定をして速く表示を完了させていこうと思います。
これは今回のウェブサイト速度最適化の一番のポイントになります。
私の場合は、実装はかなり簡単でした。
「Lazy Load」の導入
ワードプレスを使用している方は朗報です。
「Lazy Load」というプラグインが存在します。
これは導入するだけで、画面外の読み込みを遅延してくれます。
HTML用のLazy Load
ウェブサイトの開発者、もしくは、近くに開発者がいるのであれば、HTMLを自分で記述してLazy Loadを実装することができます。
コードに詳しい方は、paraluxを参照してみてください。
原因はGoogleアドセンスだった
ここでJavaScriptの話を思い出して欲しいのですが、私のブログでの不要なスクリプトは、GoogleアドセンスとGoogleタグマネージャーから来るものでした。
これをいじってしまうと、収益化できないからどうしようと思ったところ試したのが、この２つの読み込みを遅らせてみることでした。
Speed Indexも５秒以上から3.4秒まで短縮でき、かなりの効果を発揮しています。
サイト自体の評価を落としてしまうのは、ウェブサイト速度最適化する意味がないので、気をつけましょう。
Webサイト高速化を行うときは、原因を一つずつ潰していくこと
これは直接、ウェブサイト速度最適化そのものに、つながるわけではないですが、覚えておいて欲しいことがあります。
それは、まとめて改善策を適応しないことです。
例えば、今回は、画像の圧縮と遅延読み込みで改善しましたが、その時もまとめてやらずに、一つずつ効果を見ながら行いました。
なんでこうするのかというと、一つだけ元に戻した場合、どれくらい影響が出るかわかるようにするためです。
画像を元に戻したくなった場合
画像の圧縮はより手間がかかるので、やめようと思ったとします。
そのとき、数点しか影響がないのなら簡単に元に戻す判断ができます。
遅延読み込みの設定を戻したくなった場合
今回20点の上昇が見られました。しかし、他に影響が出たとします。
その場合、20点の上昇を取るのか？それとも他の影響を取るのか考えなくてはいけません。
しかし、一気に変更した場合、どう影響が出るか不明確なので、それを調べる手間が、よりかかってしまいます。
今回は、要因は少なかったので、良いかもしれませんが、たくさん画像を使っていたり、動画も埋め込んでいたりした場合もありえます。
そこで、後から、大変にならないように実験するときは、一つずつ試していきましょう。
まとめ
以上が、今回実際に行ってみたウェブサイト速度最適化になります。
誰もが簡単にできるものから、素人ではなかなか対処しづらいところがあるのがわかったと思います。
今回は、ウェブサイトの遅延読み込みが、かなり効果を発揮しました。
使用しているサービスによっては、かなり簡単にできるので、実際にウェブサイト速度最適化にチャレンジしてみてください。
しかし、もし判断に困る場合があれば、「webdesignnova」などのプロに頼ってもいいと思います。
よくある質問
1.「PageSpeed Insights」のスコアは100を目指さないといけませんか？
その必要はありません。
一番にやるべきなのは、コンテンツの中身が良いかどうかです。
今回のスコアはあくまで、速度によってのスコアなので、コンテンツ自身の点数はわかりません。
さらに、日本の大手ウェブサイトなども50未満の点数が出ます。（URLがあれば、誰でも調べることができます。）
なので、この点数に固執する必要は、ありません。
ただ、最初に述べたように、CVにも関係してきますので、ユーザーがどう思うかという意識は常に持っておいてください。
申し訳ございません。再度試みます。
2. カスタムコードで作成されていないCMSウェブサイト（例：Wordpress、Wix、Shopify）をどのように最適化しますか？
- WordPress：lightspeed cache、wp rocketなどのプラグインを使用して一般的に最適化することができます。
- Wix：Wix Rocket、Wix Speed Booster、Wix Turboといったツールを利用できます。
- Shopify：Booster Apps Speed Up、Shopify Speed Optimizer、PageSpeed Ninjaなどを使用することができます。
ただし、ウェブサイトの内容が複雑で、通常の最適化手段だけでは対応しきれない場合は、専門家によるサービスの利用を検討することをお勧めします。専門的な知識が求められる場面もありますので、適切な対応が必要となります。
3.直帰率やコンバージョンに表示速度はどのように影響しますか？
表示速度が遅いウェブサイトは、ユーザーがサイトをすぐに離れる「直帰率」を高める傾向があります。特に、表示速度が5秒以上かかると、直帰率は約2倍に増加します。また、表示速度が1秒から5秒に遅くなると、コンバージョン率が急激に低下します。このため、ウェブサイトの表示速度を最適化することで、ユーザーエクスペリエンスを向上させ、直帰率を減少させ、コンバージョン率を向上させることが期待されます
エディター
Eri Pinar による – ウェブ開発、マーケティング、オンライン、SEO。副著者 – Aoyama & Miura。
