ホームページの表示に時間がかかると、ページが表示される前にユーザーが離れてしまい、問い合わせや申し込みの機会を逃してしまいます。表示速度が遅くなる原因は画像の大きさや容量、Webフォント、サーバーなどさまざまですが、多くはホームページ制作の段階で対策できます。
この記事では、ホームページ制作で表示速度を上げる方法と注意点を解説し、当社が表示速度の確認で重視していることも紹介します。
ホームページの表示速度が遅いと起きる問題
ホームページの表示速度は、見た目だけでは問題に気づきにくいものの、ユーザーの行動や検索順位に影響します。ここでは、表示速度が遅いホームページで起きる主な問題を紹介します。
ページが表示される前にユーザーが離脱する
ユーザーはページを開いたあと、表示されるまでの数秒で待つかどうかを判断しています。画面が白いままの時間や、画像が少しずつ表示される時間が長いと、内容を見る前に戻るボタンを押して別のホームページへ移ってしまいます。検索結果から来たユーザーは、同じような情報を載せている他社のホームページをすぐに選べるので、待ち続ける理由がありません。
スマホで見るユーザーは、外出先の電波が弱い場所や移動中にホームページを開くことも多く、PCでは問題なく表示されるページでも表示に時間がかかる場合があります。どれだけ内容を充実させても、表示される前に離脱されてしまえばページは読まれません。
ホームページからの問い合わせや申し込みが減る
ホームページの表示速度が遅いと、トップページからサービスページ、問い合わせへと進む間にも、ページを移るたびに待ち時間が発生します。ページを移るたびに待たされると、ユーザーは途中で面倒になり、問い合わせの手前で離れてしまいます。ECサイトでは商品ページからカート、購入手続きと進むページが多く、表示速度の遅さがそのまま注文の減少につながります。
集客に予算を使っている場合は、その費用まで無駄になります。リスティング広告やSNS広告、チラシなどで費用をかけてホームページにユーザーを集めても、表示が遅くて問い合わせや申し込みにつながらなければ、かけた費用に見合う成果は得られません。
検索順位で不利になる
Googleはページの表示速度を含むユーザーの使いやすさを、検索順位を決める要素の1つとして扱っています。検索順位で最も重視されるのはページの内容なので、表示速度だけで検索順位が大きく変わるわけではありません。ただ、同じキーワードで内容が近いページが並んだ場合には、表示速度が遅いホームページが不利になります。
SEOのために原稿やページ数を充実させても、表示速度が遅いままでは、その努力が検索順位に反映されにくくなります。内容と表示速度の両方を整えておくことで、検索順位で他社と競えるホームページになります。
ホームページ制作で表示速度を上げる方法
ホームページの表示速度は、公開後に直すよりも、制作の段階で対策しておくほうが手間も費用もかかりません。ここでは、ホームページ制作で行う表示速度の対策を、画像からサーバーまで順に紹介します。
画像の大きさを表示サイズに合わせる
ホームページの表示速度を落とす原因で特に多いのが、表示される大きさに対して大きすぎる画像です。デジタルカメラやスマホで撮影した写真は、横幅が4,000ピクセルを超えることも珍しくありません。ページ上では横幅800ピクセルほどで表示する場所に、撮影したままの写真を使うと、ユーザーは見えない部分まで含めた大きなデータを読み込むことになります。
ホームページ制作では、画像を使う場所ごとに表示される大きさを確認し、その大きさに合わせて画像を縮小してから使います。高解像度の画面でもきれいに見えるよう表示サイズの2倍程度にすることはありますが、必要以上に大きな画像は使いません。メインビジュアルのように大きく表示する画像と、一覧に並べる小さな画像では、用意する大きさを変えます。
画像の容量を圧縮する
画像の大きさを表示サイズに合わせたあとは、画像の容量を圧縮します。同じ大きさの画像でも、圧縮のかけ方によって容量は大きく変わり、見た目にほとんど差がないまま容量を半分以下にできることもあります。
1ページに使う画像が多いほど、1枚ごとの容量の差がページ全体の表示速度に表れます。施工事例や商品一覧のように写真をたくさん並べるページでは、圧縮の有無で表示速度に大きな差が出ます。PageSpeed Insightsの診断結果を見れば、容量を減らせる画像がどれかを確認できます。
WebPなど容量の小さい画像形式を使う
ホームページの画像にはJPEGやPNGがよく使われていますが、WebPという画像形式を使うと、同じ見た目のまま容量をさらに小さくできます。WebPは今の主要なブラウザで表示できるので、ホームページに使っても見られないユーザーはほとんどいません。
WordPressで制作したホームページでは、アップロードした画像を自動でWebPに変換するプラグインを入れておくことができます。公開後にお客様が更新で画像を追加しても、画像形式を意識せずに容量の小さい画像が使われるので、更新を重ねても表示速度が落ちにくくなります。
画面に表示されるまで画像を読み込まない
ページを開いたときに、画面の下のほうにある画像まで一度に読み込むと、最初の表示に時間がかかります。そこで、ユーザーがスクロールして画像が画面に近づいたときに初めて読み込む遅延読み込みという方法を使います。最初に読み込む画像が減るので、ページを開いてから内容が見えるまでの時間が短くなります。
ただし、ページを開いてすぐに見えるメインビジュアルは、遅延読み込みにすると逆に表示が遅れます。画面の上に表示する画像はすぐに読み込み、下にある画像だけを遅延読み込みにするといった使い分けが必要です。
Webフォントの読み込みを最小限にする
Webフォントを使うと、ユーザーのパソコンやスマホに入っていないフォントでも、デザインどおりの文字でホームページを表示できます。一方で、日本語のフォントは漢字やひらがなを含むため文字数が多く、英語のフォントに比べてデータの容量がかなり大きくなります。
Webフォントの読み込みが終わるまで文字が表示されなかったり、表示されたあとに文字の形が切り替わったりすることもあります。
ホームページ制作では、Webフォントを見出しなどデザイン上こだわりたい部分に絞り、本文はパソコンやスマホにもともと入っているフォントで表示するといった使い方をします。Webフォントを使う場合でも、太さの種類を必要なものだけに減らすことで、読み込むデータを少なくできます。
CSSやJavaScriptを必要なものだけ読み込む
CSSはホームページの見た目を、JavaScriptは動きを作るためのファイルです。WordPressのテーマやプラグインには、使っていない機能のCSSやJavaScriptまで全ページで読み込むものがあり、気づかないうちにホームページの表示速度を落としています。たとえばスライダーやお問い合わせフォームのファイルを、それらを使っていないページでまで読み込んでいるケースです。
ホームページ制作では、それぞれのページで使う機能のファイルだけを読み込むように設定します。あわせて、ファイル内の不要な改行や空白を取り除いて容量を減らしたり、表示に急いで必要のないJavaScriptを後から読み込むようにしたりすることで、ページが表示されるまでの時間を短くできます。
キャッシュで2回目以降の表示を速くする
キャッシュとは、一度表示したページのデータを保存しておき、次に表示するときに使う仕組みです。ユーザーのブラウザに画像やCSSなどを保存しておけば、同じホームページの別のページを開いたときや、もう一度訪れたときに、すべてを読み込み直す必要がなくなります。
WordPressは、ページを開くたびにサーバーでページを組み立てて表示する仕組みなので、そのままではページの表示に時間がかかります。キャッシュのプラグインやサーバーのキャッシュ機能を使い、組み立て済みのページを保存しておけば、サーバーでの処理が減り表示速度が上がります。
処理性能の高いサーバーを選ぶ
画像やファイルをどれだけ軽くしても、ホームページを置いているサーバーの処理が遅ければ表示速度は上がりません。料金の安いサーバーの中には、同じサーバーを多くのホームページで共有しているため、アクセスが集中する時間帯に表示が遅くなるものもあります。
ホームページ制作では、高速なストレージを使っているか、新しいバージョンのPHPに対応しているか、サーバーにキャッシュ機能があるかなどを確認してサーバーを選びます。すでに契約しているサーバーを使う場合でも、PHPのバージョンを上げたりサーバーの設定を見直したりするだけで、表示速度が改善することがあります。
ホームページの表示速度を上げるときの注意点
ホームページの表示速度を上げる対策は、やり方を間違えると見た目や使いやすさを損ねたり、別の不具合を招いたりします。ここでは、表示速度の対策を行うときに気をつけたい注意点を紹介します。
画像の画質を落としすぎない
画像の容量は圧縮するほど小さくなりますが、圧縮しすぎると写真がぼやけたり、色の境目にノイズが出たりします。商品写真や施工事例の写真のように、細かい部分まで見せたい画像の画質が落ちると、サイト全体が安っぽく見え、会社や商品の印象まで下がってしまいます。
画像を圧縮するときは、容量の数字だけで判断せず、実際にパソコンとスマホで表示して見た目を確認します。背景に使う写真は多めに圧縮し、商品写真は画質を優先するといったように、画像の役割に合わせて圧縮の度合いを変えることで、表示速度と見た目の両方を保てます。
表示速度を優先して必要な情報や機能まで削らない
ホームページの表示速度だけを考えれば、画像や動き、機能を減らすほど速くなります。しかし、写真を減らしてサービスの魅力が伝わらなくなったり、ユーザーが使っていた絞り込み検索や地図をなくしたりしては、ホームページの役割を果たせません。
表示速度の対策は、ユーザーに必要な情報や機能を残したうえで、その読み込み方を工夫するものです。削るかどうか迷う要素があれば、まずは画像の圧縮や遅延読み込みなど、残したまま速くする方法を検討します。
高速化のプラグインを複数入れない
WordPressには、キャッシュやファイルの圧縮などを行う高速化のプラグインがいくつもあります。効果を高めようと複数の高速化のプラグインを入れると、同じ処理を二重に行ってしまい、レイアウトが崩れたり、問い合わせフォームが動かなくなったりすることがあります。かえって表示速度が落ちるケースもあります。
高速化のプラグインは1つに絞り、ホームページで使っている機能と問題なく動くかを確認してから設定します。プラグインの数自体が多いとWordPressの動作が重くなるので、高速化以外のプラグインも必要なものだけに絞ることが大切です。
更新後はキャッシュを削除して表示を確認する
キャッシュを使っているホームページでは、文章や画像を更新しても、保存されている古いページが表示され続けることがあります。更新したつもりでもユーザーには古い情報が表示されていて、営業時間や料金の変更が伝わっていなかったというトラブルにつながります。
ホームページを更新したあとは、プラグインやサーバーの管理画面からキャッシュを削除し、実際のページで更新内容が反映されているかを確認します。自分のブラウザに古いページが残っている場合もあるので、確認するときはスーパーリロードでページを読み込み直すと確実です。
当社のホームページ制作における表示速度の考え方
ホームページの表示速度は、PageSpeed Insightsで数値として計測するのが一般的です。当社でもホームページ制作の際にはPageSpeed Insightsで計測し、改善できる箇所がないかを確認しています。ただ、当社が最も優先しているのは点数ではなく、実際にユーザーがホームページを見たときの表示の速さです。
PageSpeed Insightsの点数は、決められた条件で計測した結果です。点数が高くても、実際の通信環境で見ると最初の画面が表示されるまでに待たされたり、画像が遅れて表示されたりすることがあります。反対に、点数がそれほど高くなくても、ユーザーが見たときにはストレスなく表示されるページもあります。
点数を上げることを目的にすると、ユーザーにとっての使いやすさとは関係のない調整に時間をかけてしまいかねません。
そこで当社では、PCではLANケーブルでつないだ環境とWi-Fiの環境の両方で、ホームページの表示速度を確認しています。スマホでは、携帯会社の回線とWi-Fiの両方で確認します。ユーザーがホームページを見る環境はさまざまなので、実際に近い環境で見て確かめることで、点数だけでは見えない表示速度の問題に気づけます。
特にECサイトは、スマホで商品を探して購入するユーザーが多くなる傾向があります。そのためECサイトの制作では、スマホでの表示速度の確認に力を入れ、商品一覧や商品ページ、購入手続きまでの流れがスマホでもスムーズに進むかを確かめています。
まとめ
ホームページの表示速度は、画像やWebフォント、キャッシュ、サーバーなど制作の段階で決まる部分が大きく、公開後に直すよりも作るときに対策しておくことが大切です。点数だけを追うのではなく、ユーザーが実際に見たときに速く表示されることを目指して対策を行いましょう。
当社では、ホームページ制作の際に画像の扱いからサーバー選びまで表示速度を考えて制作し、PCとスマホの実際の通信環境で表示を確認しています。今のホームページの表示が遅くてリニューアルを考えている方や、これからホームページ制作を依頼する会社を探している方は、お気軽にご相談ください。
御社の業種やホームページの目的をヒアリングしたうえで、表示速度まで含めて使いやすいホームページをご提案します。
