まず、何が遅いのかを見る
写真の多いホームページでは、画像の転送量や読み込み順が表示速度に影響します。ただし、体感の遅さを画像だけの問題と決めつけるのは禁物です。サーバーの応答、外部のスクリプト、フォントなども確認する必要があります。
最初にPageSpeed Insightsなどで対象のURLを確認し、スマートフォンの実際の画面でも開きます。LCPはメインの内容が表示されるまでの時間を見る指標で、必ずしも写真が対象になるとは限りません。測定結果で対象の要素を確かめてから手を入れる方が、見当違いの修正を減らせます。
一度の点数だけを成果にせず、同じ条件で複数回測り、読み込み中に画像や文字の位置が動かないかも見ます。利用者の環境を集計したデータと、テスト環境の結果は別物です。アクセスが少ないサイトでは、実利用データが出ないこともあります。
表示サイズに合う画像を用意する
幅400pxほどで表示する写真に、幅4000pxの画像をそのまま渡すと、必要以上のデータを読み込む可能性があります。画面の解像度も考慮しながら、表示用途に合う画像を作ります。サムネイル用と、作品を詳しく見るための大きな画像は、同じサイズにする必要はありません。
- 写真はJPEGやWebPなどを比較し、画質を確認して選ぶ。
- 透過が必要な素材と、写真を同じ条件で圧縮しない。
- 文字入りのデザイン画像は、細い文字がつぶれていないかを見る。
- widthとheightを指定して、画像が届く前から表示領域を確保する。
形式を変えたら速くなる、と決めつけず、実際のファイル容量と見え方を比較します。作品の画像を過度に圧縮して文字が読めなくなると、ポートフォリオとしての役割を損ないます。
最初の画像を後回しにしない
画面の下にある画像にはloading=”lazy”を使うと、初回の読み込みを抑えられます。一方、ページを開いた瞬間に見える主役の画像まで遅延読み込みにすると、表示が遅れることがあります。
<!-- 画面の下にある画像の例 -->
<img src="project.webp"
width="1200" height="900"
loading="lazy" decoding="async"
alt="企業サイトのトップページ">最初に見える主要画像はlazyを付けず、必要に応じてfetchpriority=”high”で優先度を伝えます。すべての画像にhighを付けるのではなく、本当に優先する画像を絞ります。preloadも、測定で必要性が分かった場合に使います。
WordPressで実装するときの確認
メディアライブラリの画像を使う場合は、wp_get_attachment_image()などの標準機能を使うと、画像のサイズ情報やレスポンシブ画像の属性を扱いやすくなります。HTMLを手書きした画像や、テーマ内の素材は別に確認が必要です。
表示速度のプラグイン、テーマ、WordPress本体が、それぞれ画像の属性を変更することもあります。編集したファイルだけでなく、公開ページのHTMLでloading、srcset、sizesなどがどう出力されたかを確認します。
最後にキャッシュを更新し、スマートフォンで最初の表示とスクロール後の表示を確認します。画像の軽量化は、圧縮、適切なサイズ、読み込み順を組み合わせて考えるのが基本です。
参考資料
制作・リニューアルの対応範囲は、北九州のホームページ制作プランでご案内しています。