サイトの表示速度はユーザーの離脱率に直結するため大変重要です。読み込みの遅いサイトを待ちきれず閉じてしまった経験のある方もいらっしゃるのではないでしょうか。
コンテンツが素晴らしいサイトでも重ければ見てもらえないということですね。
サイトの表示速度を上げるための手法はいくつもありますが、今回は画像の読み込みにフォーカスしてみたいと思います。

画像の遅延読み込み

ほとんどのWebサイトで画像の占める割合は非常に大きいです。ページの読み込み時にすべての画像を読み込んでいては膨大な時間がかかってしまいます。画像の遅延読み込みとは、スクロールに応じて画像を必要なタイミングで読み込むといった対応です。
対応方法としては、以下の方法があります。

1.loading=”lazy”属性を付与する方法
Chrome、Edge、OperaおよびFirefoxでサポートされています。但し、現時点（2021年12月）ではloading=”lazy”は Safari は未対応、Firefoxはimageのみ対応です。(loading=“lazy”属性をサポートしていないブラウザに記述した場合、無視されるだけで特に悪影響はありません。)
最初に表示されるファーストビューにある画像に対しては設定しないようにします。スクロールしなければ見えない範囲に配置されている画像にのみloading=”lazy”を記述するようにします。

2.JavaScriptで制御する方法
loading属性がサポートされていないブラウザではlazysizesという遅延読み込みのライブラリを使って遅延読み込みを行うことができます。Browser-level image lazy-loading for the web で紹介されています。

画像の圧縮

画像を圧縮して容量を減らすことで表示速度を上げることができます。
知らないうちに容量の大きな写真をアップロードしてしまうこともあるので、なるべく画像はそのまま使うのではなく、圧縮して使うようにしましょう。ここではWordPressのプラグインと無料ツールをご紹介します。

1.WordPressのプラグインEWWW Image Optimizerを使う
画像をスキャンして最適化していない画像をピックアップし一括で圧縮することができます。
導入してアップロードしたタイミングで自動的に圧縮してくれるので導入しておくと良いでしょう。

2.無料の画像圧縮ツールTinyPNGを使う
手作業になるので少々手間はかかりますが、EWWW Image Optimizerより圧縮率が高く無料で使えるツールです。
画像をドラッグ＆ドロップするだけなので簡単に使えます。

まとめ

表示の遅いサイトはユーザーに読んでもらえる可能性が低くなってしまうため、表示速度の改善はGoogleのSEOの側面からも重要な対応となってきます。

今回ご紹介した以外にも色々な方法がありますが、まずはすぐにできるところから取り組んできましょう。