SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アプリケーション開発の最新トレンド

画像最適化でウェブページを高速化しよう~「PageSpeed Insights」の活用と画像改善4つのポイント

  • X ポスト
  • このエントリーをはてなブックマークに追加

 ウェブサイトのユーザー体験向上には、ページ速度が重要な指標になっています。特に画像は、パフォーマンスに占める影響力が大きくなっています。本記事では、Googleが提供しているウェブサイトの解析ツール「PageSpeed Insights」の改善方法を参考に、画像最適化について解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 ウェブサイトにとって、ユーザー体験を向上させるにはページの速度が鍵となっています。例えば、ウェブサイト内にあるコンテンツの読み込み速度が長くなると閲覧者がそれを避けるべくサイトを離れていきます。誰しもが経験のあることだと思います。

 ページ速度の指標として、Googleが公開しているウェブ上のツール「PageSpeed Insights」が多く使われています。PageSpeed Insightsは、ウェブページのコンテンツを解析し、ページの読み込み時間の短縮方法を生成する、というものです。

 2021年5月よりGoogle PageSpeed Insightsのアルゴリズムが改訂され、これまでのウェブサイトの速度の計測に加え、ユーザーが感じるページ体験の要素が加わり、Google Chromeに組み込まれているサイト監査ツールのLighthouseによる評価と分析結果が表示されるようになりました。注目するポイントとして「スムーズにモバイル対応していること」「不満を感じることなく閲覧できること」「HTTPSが設定されていること」が今回の改訂において重要視されます。

 また、アルゴリズムの改訂に加え、GoogleのUX指標である「Core Web Vitals」が加わり、コンテンツの読み込み時間、ユーザーが初めに操作したときに生じる遅延、読み込み完了までのレイアウト移動が表示されるようになりました。

 今回はページスピード速度を上げるために最も効果的かつウェブサイトの多くの容量を占める「画像」についてお話していきたいと思います。この記事を読み終えた時にはページ速度を上げるためにどのように画像を改善すべきかがわかるようになります。

ウェブサイトにおける画像の改善方法

 画像の改善にはPageSpeed Insightsにある以下の4つのポイントがページスピードを改善するにあたり重要となります。また本記事の後半には、具体的な事例として、以下の4点を改善したカインズのサイトパフォーマンスのビフォー&アフターをお見せします。

  1. Properly Size Images:モバイル対応の適切な画像サイズの表示
  2. Serve images in next-gen formats:圧縮率の高いWebPやAVIFの拡張子
  3. Defer Offscreen Images:スクロールした時に表示される画面外の画像の遅延読み込み
  4. Efficiently Encode Images:効果的な画像の圧縮

 「Properly Size Images」とは、適切な画像サイズで展開することです。昨今はPC、スマートフォン、タブレットなどスクリーンサイズの異なるデバイスからウェブサイトにアクセスされます。モバイルから間違った解像度を読み込むと、小さすぎる画像やボヤけた画像が表示されるかもしれません。また不必要な大きな画像を読み込むと閲覧者のデータ通信量を費やし、余計に多くのコストがCDNの費用にかかってきます。

 画像最適化をする上で最も複雑で時間のかかるのが画像サイズの変更です。またスマートフォンやタブレットなどのデバイスからアクセスする際に、いくつもの違うサイズ、解像度の画像を用意する必要があります。

 2つ目の「Serve images in next-gen formats」とは一般的に使用されるPNGやJPEGではなくその名の通り次世代の拡張子を使うことで、Googleが推奨している方法です。次世代の拡張子とはWebPやAVIFと呼ばれるもので、従来のものよりも約50%以上のファイルサイズの圧縮が可能です(図1)。

図1 JPEGと比較した、WebP、AVIFのファイルサイズ圧縮率
図1 JPEGと比較した、WebP、AVIFのファイルサイズ圧縮率

 また次世代拡張子は初めてHDR(High Dynamic Range)カラーをサポートしており被写体の際立って明るい部分も白飛びすることなく、明るくリアルな映像を表示できる仕組みとなっています。NetflixでもAVIFを使用しておりスムーズで快適な画像表示を実現しているのでおすすめの拡張子です。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
画像のサイズとフォーマット改善の実例

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
アプリケーション開発の最新トレンド連載記事一覧

もっと読む

この記事の著者

金本 太一(カネモト タイチ)

 北米サンフランシスコ在住・Account Manager @imgix。これまでSaaS, Machine learning, APIの業種に就き、現在は米国と日本のお客様の画像周りの最適化をサポートしている。趣味はゴルフとアメリカでの日本食巡り。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15041 2021/11/05 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング