今こそ対応を!画像読み込みを高速化するために必要なこと
- 投稿日:2023.01.12
- 風俗SEO
2022年は過去30年の中でも大きくSEOで大きな動きがあった年だったのではないかと思います。アップデートひとつとっても、コアアルゴリズムアップデートだけでなく、Helpful Contents Updateが新たに登場したり、リンクスパムアップデートが活発になったりと、大きな動きがありました。
ユーザーにとって有益なコンテンツを届けることや、スパムリンクなどを行わないなど、基本的なSEO対策がより重要である、ということをGoogleに再度通知されたような年でした。
2023年になった今、こういった基本的なことができていなかった場合はもちろん対策をする必要があります。
しかしここまでの基本的な対策ができているのであれば、今後は「よりユーザーが使いやすいサイト環境を整えてあげる」ということが必要になることでしょう。
今回はその対策のひとつ「画像の読み込み」に関してお話していきます。
遅延読み込みによる「loading=”lazy”」
遅延読み込みとは、WEBサイトに表示する画像を一気に読み込まずに必要な分だけを読み込ませ、不要な分は都度読み込ませていくという技術です。
これによって、不要な画像の読み込みを後回しにすることで画像CSSやJavaScriptなどのファイル読み込みを先に行うことができ、表示速度を速くすることができるのです。
実装の方法はすごく簡単。
<img>要素にloading=”lazy”属性を用いるだけです。
ただし、loading=”lazy”属性を使うには<img>要素にきちんとwidth属性とheight属性が記述することが必要です。
width属性とheight属性がない場合、ブラウザが画像を完全に読み込み終わるまで領域のサイズを計算できないため、レイアウトシフト(CLS)のスコア低下の原因になります。
画像の最適化
Page Speed Insightsなどでスコアを確認した時に「効率的な画像フォーマット」という項目が表示される場合は、画像ファイルのサイズ圧縮を行いましょう。
これの改善方法もそれほど難しいものではありません。
例として以下の改善方法があります。
- Photoshopから画像を書き出すときの画質設定を落とす
- 画像圧縮サービスを利用する
- (Wordpressの場合)画像圧縮プラグインを埋め込む
これらの方法の中でどの方法が適しているかはサイトによって異なります。
たとえば3つ目の方法はWordpressにのみ適している方法です。
自分のサイトがどの改善方法を実施するのが適切なのか、しっかり把握して改善しましょう。
まとめ
今回は画像の読み込みだけに焦点を絞って、課題点と改善方法をご紹介しました。
しかし、各サイトの使い勝手を良くしていくには画像だけではなく、フォントサイズや構成、画像の配置(動画の配置)、そしてサーバーなどさまざまな要因を改善する必要があります。
自分のサイトが他のサイトよりも優れているのかどうか、使いやすいかどうか、客観的に見て何を優先して改善すべきか考えていきましょう。
RELATED ARTICLE
関連記事
LATEST ARTICLE
最新記事