表示速度を改善しよう

会社のHPやネットショップの運営をしている人は、HPに来てくれたお客さんに、最高のもてなしをしなくてはなりません。
HPに来てくれて、疑問が解決できた・欲しいものが買えた、そう思ってもらえるようにすることで、あなたのビジネスの成果につながります。

しかしもし、ページの読み込みが遅かったら、あなたのHPに来たお客さんはどう思うでしょうか。
なかなか開かないな、開いてもなかなか表示されないな、そう思われてしまうと、疑問を解決したり、欲しいものを買ったりというゴールから遠ざかってしまいます。
あなた自身もそのような経験があるでしょう。

集客が上手く行ってせっかくHPに来てくれたのに、表示が遅くて帰られてしまうのは、あまりにももったいないことです。

Googleの調査によると、ページの読み込み時間が1秒から3秒に増えると、直帰、つまりそのまま帰ってしまう確率が32％も増えてしまうとのことです。
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/page-load-time-statistics/

そこで今回は、あなたのHPの表示速度を改善するための方法についてご説明します。

ホームページの読み込みスピードを改善するための、最も手軽な方法。
それは、画像の読み込みを改善することです。
ページの読み込みスピードを改善するためには他にも色々とありますが、実際のところは画像の読み込みを改善することが、最も手軽で効果的です。

特に
1. 画像を軽くする
2. 画面外の画像を読み込まない
は非常に有効ですので、必ず行ってください。

画像の容量を減らすには、2つのアプローチがあります。

2022年時点で、一般的なスマホの横幅は400px前後です。
またPC環境でもコンテンツ領域の横幅は、広くても1000pxほど。
それを踏まえると画像の横幅は、大きくても800pxほどが適切かと思います。

大きな画像を読み込んで小さく表示するのでは、読み込みスピードは変わらず意味がありません。
読み込む画像自体を小さくしましょう。

png画像は縦横サイズを小さくすることで、またjpg画像は縦横サイズを小さくする他に圧縮率を高めることでも、容量を減らせます。
1枚あたりの目安としては経験上、150KB以内ほどが望ましいと、弊社では考えています。
ただしメインビジュアルなど強くアピールしたい画像では、300KB以上の場合もあります。

画像はほとんどの場合で、jpgかpngがベストの選択肢です。
しかしこの2つは向き不向きがあるので、特徴をしっかり理解しましょう。

選ぶ基準はズバリ、色数の多さです。
写真のような色数が多い画像は、jpgが適しています。
こちらの別府の写真をご覧ください。
例えば青にも、雲の白っぽい青から濃い青のグラデーション、標識の青、asahiの青、奥の山の青などたくさんの青があります。
赤や黄色も同様で、このように写真は一般的にjpgが適しています。
一方で図解の資料やグラフなど、色数が少なくパキッとした画像はpngにすると良いでしょう。

逆に色数の多い写真をpngにすると、ファイルサイズが大きくなりがちです。
また色数の少ない画像をjpgにすると、画像がぼやけて見づらくなったりもします。

ページは縦に長いので、画面の外にある画像を、最初から読み込む必要は必ずしもありません。
お客さんがページの途中で他のページに遷移することは良くあるので、表示されないエリアの画像を読み込むと無駄になってしまいます。
その部分までスクロールした時に画像を読み込めば、それで事足ります。

この、表示されたエリアの画像を読み込む技術のことを、LazyLoad（レイジーロード）、日本語では画像の遅延読み込みと言います。
WordPressでは、LazyLoadが簡単に実装できます。
HPの制作会社さんに相談して、ぜひ検討してください。

動画の扱いについても、ひとことだけご説明します。
最近はメインビジュアルに大きな動画を入れているケースも、多く見受けられます。
確かに大きな動画でインパクトがあります。

しかし「それは静止画よりも動画の方が適しているか？動画の方が伝えやすい事だろうか？」を必ず検討し、もし静止画で済むのであれば必ず静止画にしてください。
実際のところ、静止画よりも動画の方が良いケースはあまり多くありません。

インパクトがあると書きましたが、ユーザーにとって「おっ、なんか動いてるな」以上の感想はありません。
スマホからだと通信量を消費し、いわゆる「ギガを食う」割には意味が無く、ユーザーには優しくありません。

HPの表示速度を改善するためには、画像の読み込みスピードを改善するのが最も効果的です。
まずは、画像の縦横サイズを小さくすることが大切です。
そしてjpg/pngが正しく使われているかを見直し、画像の特徴によって適切なフォーマットを使い分けましょう。