こんにちは　ハジメクリエイトでエンジニアとして日々、キーボードを叩いています、
miyachanです。

いきなりですが、皆さんは表示が遅いwebサイトどう思いますか？
待ちきれずにブラウザバックしてしまいますよね？ Googleの2017年の調査によるとモバイルサイトのページ読み込みに3秒以上かかる場合、53%のユーザーが離脱するそう。この数字はページの表示が遅いと内容を読まれることすらなく、約半数のユーザーが離脱してしまうことを表しています。 そこで、本記事では読み込み速度を改善するためにWebP（ウェッピー）という画像フォーマットに焦点を当てて紹介します。

WebPって？

WebP (ウェッピー)とは、GoogleがWebサイトの表示速度短縮を目的として開発したフォーマットのことで、
画像の圧縮効率が高く、画質を保ったまま軽量化することができます。
以前デメリットとして対応していないブラウザがいくつかありましたが、2022年6月にサポートを終了したIEを除くすべてのブラウザに対応していて、WebP形式はJPEGやPNGと比較してファイルサイズを削減し、さらにアニメーションもサポートする汎用的なフォーマットとなっています。

※WebPをサポートしているブラウザのチェック方法↓
caniuse.com

SEO的な観点から見たWebPのメリット

WebPはSEOの観点から見ても良いこと尽くめです。

1. 読み込み速度の向上 :
ウェブサイトの読み込み速度が速いと、検索エンジンのランキングに影響を与えることができます。Googleは、ページの読み込み速度がランキングに影響する要因の一つであることを示唆しているので、WebPを使用することで読み込み速度を向上させ、SEOの向上に貢献できます。

2. 滞在時間を増やす
読み込み速度が速くかつストレスなく閲覧ができるサイトであれば自ずと、滞在時間を増やすことができます。

3. モバイルファースト
Googleはモバイルファーストインデックスを採用し、モバイルバージョンのウェブサイトを基準にランキングを付けています。WebPのような軽量な画像形式は、モバイルデバイスの読み込み速度を向上させ、モバイルファーストのSEOに適しています。

※モバイルファーストインデックスの概要はこちら↓
モバイル ファースト インデックスの展開(Google)

4. クロール効率の向上
ウェブページの読み込み速度が速いと、クローラーがウェブサイトをより迅速にインデックス化できます。これは検索エンジンによるコンテンツの発見と評価を効率化でき、SEOに有益です。

WebPに変換する

画像圧縮を手軽に行うには、専用の画像圧縮ツールを活用しましょう。
機能は似たり寄ったりなので使いやすいものを使いましょう！

・Squoosh
・I LOVE IMG
・画像圧縮ツール あっしゅくま（´(ｪ)｀）

実際にSquooshで圧縮してみました。処理前と遜色なく440KBの削減に成功しました！

圧縮処理前(JPEG) 　536KB	圧縮処理後(WebP) ＼96KB／

まとめ

いかがでしたでしょうか。
他にもブラウザキャッシュの活用、不要なプラグインとスクリプトの削除、定期的にパフォーマンステストを実施する、など高速化に向けてできることは山ほどありますが、今回は画像のファイルサイズのことについて書いてみました。

表示のために読み込むファイルの中で、画像の素材が占める割合は大半を占めています。紹介した変換方法でファイルサイズを減らすことができれば、手軽に読み込みを改善できると思います。
次回は高速化手法その②として遅延読み込み、DOMのイベントについて書いてみたいと思います。

ここまでお読みいただきありがとうございました。それでは～