誰でもできるウェブサイトのスピードUP術

ウェブサイトが遅くなる最大の原因

ウェブサイトを遅くする最大の原因は画像です。

必要以上のサイズや、画質の高いきれいすぎる画像を使っているウェブサイトは多いですが、その代わりに表示スピードが落ちてしまうと、あなたが予想する以上にネガティブな影響が出ます。

今回はそんなボトルネックとなっている画像の最適化をして、スピードを改善する方法を紹介します。

画像の保存形式

ウェブサイトの画像によく使われる保存形式には次の2つがあります。

JPG

風景画や人物など、写真の保存に使われるもっとも一般的な保存形式。色数の多い画像の保存に向いていて、圧縮する余地が大きい。

PNG

保存を繰り返しても画質が劣化せず（可逆圧縮）、

また透過処理が可能。アイコンやイラストの保存に適した保存形式。

圧縮してもサイズはあまり変わらない場合が多い。

画質を調整する

画像は通常、圧縮すればするほど画質が落ちていきますが、それを心配して圧縮しない画像を使うのは止めましょう。

多くのウェブサイトに無圧縮の超高画質画像は必要ないからです。

例えば、小さなロゴや見出しのアイコンに鮮明な画像は必要ないので、できる限り圧縮をしていきます。

こちらのウェブサイトでは、圧縮前と圧縮後の画質を目で確認しながら調整していくことができて便利です。

• https://squoosh.app

「画質の高い画像は重い」とはいえ、背景画像などのように、ページで大きく表示される画像は画質が一定程度高い必要があるので、画像を使う場所を考慮しながら適切な画質を選ぶようにしましょう。

サイズを調整する

例えば、1280 × 900pxのサイズの画像があったとします。

この画像を480 × 260pxのサイズで表示したい場合、次の2通りの方法があります。

• 画像編集ソフトを使う

• imgタグを使う

おすすめできないのは「imgタグを使う」です。

imgタグでサイズを調整しても、見た目の表示サイズが小さくなっているだけで、サーバーから送られてくる画像は元の大きい1280 × 900pxのままだからです。

なので、表示サイズが元のサイズよりも小さいことがわかっている場合には、上で紹介したsquooshなどのオンラインの画像編集サービスを使って、あらかじめサイズ調整した画像を使うようにしましょう。

imgタグでのサイズ調整がベターなケースもあり、それは様々なサイズのスクリーン表示に対応（レスポンシブ対応）する場合です。

画像をレスポンシブ対応させる場合、通常一つの大きなサイズの画像を使い、スクリーンサイズに合わせてimgタグで表示サイズを変えます。

レスポンシブ対応には「スクリーンサイズに合わせた画像を複数枚用意して、スクリーンサイズに合わせて切り替える」という方法もありますが、これには画像変換に手間がかかるデメリットがあります。

画像をテキスト表示に使わない

見出し文字やボタンの表示に画像を使っているのは、古いウェブサイトでよく見られます。

これはPhotoshopなどで作ったウェブデザインの下書きから直接切り出して、ウェブサイトに貼り付けているために起きます。

この方法には、CSSの知識がなくてもボタンをデザインできる、OSやブラウザが違っても同じ表示にできるというメリットがありますが、問題が3つあります。

1つ目は、文字やボタンがギザギザと不鮮明に表示され、ウェブサイトのデザインを大きく損なうことです。

スクリーンの画質が高くなかった数年前は、そこまでユーザーも気にとめていませんでしたが、パソコンとモバイル端末の高画質化が進んだ今では、ウェブサイト全体を安っぽく見せる原因になります。

2つ目は、画像を使っているため表示スピードが落ちることです。

画像の代わりにHTMLとCSSを使えば、綺麗に表示されるだけでなく、ウェブサイトの表示スピードも上がります。

3つ目は、SEOにまったく役立たないことです。

画像にいくら文字情報を書き込んでも重くなるだけでGoogleのクローラーは読み取れないので、SEOの足かせとなります。

画像最適化は簡単にできて効果も高い

今回はスピードを下げる最大の原因である画像と、その最適化について紹介しました。

画像の他にもスピード低下の原因として「フォント」がよく取り上げられるので、次の記事の改善方法を参考にしてみてください。