【WEBP完全攻略】サイト画像をWEBPに変換しただけでスコアが上がるか検証
みなさんこんにちは！WEBマーケティング大学、講師の木村正治（きむらまさはる）です。
突然ですがみんさんは以下のような悩みはありませんか？
- PageSpeedInsightでサイトの速度を分析したら、すこぶるスコアが低かった
- 最近徐々にサイトの順位が下がってきていて、何か手が打てないか探している
- WEB制作などで最近新しい情報がないか調べている
上記のような状況の方にぜひ紹介したいのが、今回お伝えするWEBP（ウェッピー）です。
最近流星のように現れたような技術ではなく、以前から「JPEG2000」「JPEG XR」と並んで認知はされていましたが、この半年ほどでやたらとGoogleさんが推しています。
ちょうどいいやと思い、僕が持っているサイトの1つで実験してみたので、その結果を紹介します。
もうJPGは古い？Google一押し「WEBP（ウェッピー）」とは
そもそもWEBP（ウェッピー）とはどんな技術なのか、良く分かっていないという方も多いと思います。
WEBPは2010年頃に仕様が発表されて以降、ずーーーーっとあまり陽の目を浴びてこなかった「次世代の画像フォーマット」です。
当時は対応しているブラウザがかなり限られていたため、WEBサイト制作の現場でも意識しているところは全然ありませんでしたが、この半年ぐらいで一気にGoogleさんが推してきていますので、紹介します！
JPGとWEBPの違いとは
先にお伝えした通り、JPGもWEBPもどちらも「画像のフォーマット」です。
例として、masaharukimura.jpgという画像があったとして、「.jpg」のところが画像のフォーマット（形式）ですね。
JPGとWEBPを比べると大きな違いは画像容量の軽さだと思います。以下画像の左がJPGフォーマット、右がWEBPフォーマットです。
個人的な所感では、JPGでもWEBPでもあまり見栄えは変わりませんが、容量を見ると一目瞭然。大きく6倍ほどの差が開く結果となっています。
画像のサイズからすればとても小さなレベルだと思いますが、これが1サイト分となるとかなり大きな容量のカットになるため、表示速度が大きく改善したのも頷けます。
WEBP（ウェッピー）には対応するべきか
結論からお伝えすると、2020年6月現在、WEBPにはなるべく「早めに対応しておいた方が良さそう」だなと個人的には思います。
ブラウザがWEBPに対応していないことで画像が表示されないかも。。。という懸念がありましたが、少なくとも現時点ではワードプレスサイトでプラグインで処理した感想から
サイトの表示速度は倍ほどアップしており、非対応のブラウザでもJPG画像を表示すれば解決するため、特にリスクは感じていません。
WEBP（ウェッピー）に対応するメリット・デメリット
WEBPに対応するメリットとしては、サイトの表示速度アップだと思います。
僕のサイトはこれによりサイトの表示速度がアップしたため、ユーザーエクスペリエンス（UX）と呼ばれる「ユーザーの利便性アップ」に繋がったと考えて良いなと感じています。
対応することにより生じるデメリットは、すべてのブラウザに対応しているワケではないため、画像が確実に表示されているかは不安、というところはあるかもしれません。
が、2020年6月の時点で以下のようにマイクロソフトEdge、Firefox、Googleクローム、Safari、iOS Safariなど主要なブラウザは押さえてきているようなので、あまりリスク視する必要はなくなってきたのかなと思います。
WEBP（ウェッピー）を導入した結果
実際にWEBPを導入した結果どの程度サイトの表示速度が改善したのか、Googleが提供しているクロームのアドオン「Lighthouse」を使ってスコアを見てビフォーアフターしてみた結果が以下の画像です。
左がサイト内の画像がJPGだった時にLighthouseでサイトのパフォーマンススコアを計測したもの。
右がサイト内の画像をすべてWEBPに変換した後にLighthouseでパフォーマンススコアを計測したものです。
Googleがやたらと推してくるので実験感覚でやってみましたが、前後比較で「+21」もスコアが変動するとは正直思っていませんでしたので、大きな収穫になりました。
こちらはまだ検証中ですが、実施から数日でSEOの順位も3位だったページが2位に上昇（しかしもともとは1位表示だった。。。）するなどしており、今後が楽しみなところではあります！
ちなみにですが、このブログも今回の記事を書きながらキャプチャを取ったりする過程でWEBPに対応してみたところ、上記みたいな爆速値になりました（笑）。
デザイン面に注力するあまり、サイトの表示速度やマークアップなど基礎的な部分が疎かになってしまいがちなので、できれば世の中の制作会社さんも意識しておいた方が良いと思います。
今後GoogleがSEOの指標にしているぐらいなので、対応できることでクライアントにはメリットがありますから！
なぜWEBPに対応したのか
今回僕がサイトの1つをWEBPに対応させてみようかと考えた理由は、「やたらとGoogleのLighthouseが推してくるから」です。
3年ほど前にGoogleの担当者さんがあちこち地方を遠征して、セミナーでYoutube動画広告の必要性や、Youtubeマーケティングの手法について解説しておられた時期があります。
だいたいGoogleが推してくるものってその後にトレンドとして流行するため、早いうちに導入しておくことで先陣を切って体験できればと考えて実行しました。
また、サイト内にある画像をWEBPではなくJPGのままにすることで、そのサイトを利用するユーザーからすると「いちいち画像が表示されるまでに待つ」という無駄な時間が生じます。
サイトでのユーザー体験（ユーザーエクスペリエンス）をあまり重視していないという姿勢も見えてしまうため、手っ取り早く対応できるところから対応した、という感じですね。
WEBP（ウェッピー）をワードプレスに導入する簡単な手順
続いてこの項目ではワードプレスのサイトをWEBPに対応させる際に、やるべき手順について解説します。
WEBPはまだまだ次世代の画像フォーマットだからか、具体的にやり方を紹介しているサイトが少なかったため、後続の方のために記しておきます。
僕の環境では
- PHPのバージョンを最新版までアップ
- ワードプレスプラグインを導入（「EWWW Image Optimizer」）
上記の2つを対応したことで、Lighthouseのスコアがアップしました。
PHPのバージョンアップについてですが、サイトやブログを開設した後にサーバーの管理画面に入ってバージョンアップまで定期的にチェックする人は少ないと思いますが、セキュリティリスクも解消しますのでやっておくほうが良いと思います。
最新版がたしか7.4～だったと思います。WEBP対応するなら、PHPのバージョンアップ（WEBサイトで使っているシステム部分のアップデート）は必須です。
手順は以下の通りです。
手順1.エックスサーバーの管理画面にログインし、対象ドメインの「PHP Ver.切替」ボタンをクリックする
手順2.PHPの現在のバージョンを確認し、旧バージョンの場合プルダウンからバージョンを最新版へ変更する
ざっくりと解説すると、上記のような手順で対応することで、WEBサイトの「システム部分が最新版」になり、最新の画像フォーマットに対応できるようになります。
ここまでの手順だけだと、WEBP画像はまだ使えません。次の工程が重要になってきます。
調べてみたところ色々とやり方があるのですが、僕はPHPやサーバーで使うコードへの専門知識まではありませんので「なるべく楽に」、プラグインで対応する方が良いかと思います。
ワードプレスのプラグインでは、「EWWW Image Optimizer」というプラグインがとても便利。
画質をなるべく劣化させないように圧縮し、サイトの表示速度を上げてくれる便利なツールの1つなのですが、そのツールがWEBPに対応していましたので使ってみました。
手順は以下です。
手順1.ワードプレスにログインし、プラグインメニューからEWWW Image Optimizerを検索
手順2.EWWW Image Optimizerをダウンロードし、有効化する
手順3.EWWW Image Optimizerがワードプレスにインストールされ、ちゃんと有効になっているのか確認、設定に進む
手順4.WEBPをどう処理するのか、EWWW Image Optimizerに初期設定を行う
手順5.EWWW Image Optimizerでサイトに登録している画像を一括でWEBPに変換するため「一括最適化ツール」を使う
手順6.最適化されていない画像がないかスキャンする
手順7.最適化されていない画像を検索し終わったら、一括で最適化をかける
手順8.EWWW Image OptimizerでWEBP化されていない画像をWEBPへ変換していく
手順9.変換が終わったらEWWW Image Optimizerの設定画面に戻り、サーバーへの設定に必要なコードをコピーする
手順10.サーバーの管理画面に戻り「.htaccess編集」をクリックする（ここからの作業はミスがないように要注意！）
手順11.「.htaccess」のコードが表示されたら、コピーしたコードを所定の位置に張り付ける。位置は下記画像と手順12を参照
手順12.「.htaccess」にコードを張り付けた見栄えが以下、間違えるとサイトが表示されないリスクがあるため、もともとあったコードは必ずどこかに保存しておく
手順13.実行するボタンをクリックし、変更を適用させる
手順14.ワードプレスの管理画面に戻り、EWWW Image Optimizerの設定画面を見る。下記のようになっていたら完了！
僕は色々と調べた結果、上記のように対応したら無事にWEBPに対応することが出来ました！
サーバーなど普段扱わない難しい部分も触るため、初心者の方だと設定で躓くと思います。
専門的な部分なのでもちろん料金は必要になると思いますが、サイトを制作した制作会社がいれば、そこに相談してみると良いでしょう。
僕でも対応はできますが、サイトによって構成は全然違うため、上記のように制作会社さんへ依頼した方が安全だと思います。
JPG画像をWEBPに変換するおすすめツール
上記の項目ではワードプレスのプラグイン「EWWW Image Optimizer」を使ってJPG画像をWEBPに変換する方法を紹介しました。
個人的にはこのやり方が一番効率が良さそうだったので、EWWW Image Optimizerを選んだのですが、その他の方法もあります。
ツールをダウンロードしてやっても良いのですが、わざわざダウンロードするなんて、クラウド時代になんか微妙なので（笑）、あえてブラウザから無料で使えるツールを紹介します。
どれを使ってもそんなに結果は変わらないと思いますが、一応網羅的に紹介しておきます。※すべて文字をクリックすればサイトに遷移します。
さいごに
以上、今回はGoogleが推奨して止まない最新の画像フォーマットWEBP（ウェッピー）に対応してみた結果、思っていたよりも良い改善結果が得られたので、情報をシェアしました。
木村正治のWEBマーケティング大学では、今回のようなWEBの最新情報や、お得なノウハウを配信しています。
YoutubeやTwitter、Noteなど様々な媒体で役に立つ情報を発信していますので、ぜひチェックしてみてください！
▼▼Youtubeチャンネル「木村正治のWEBマーケティング大学」は以下のリンクから▼▼
https://www.youtube.com/channel/UC6KFH9QvZf-Q7BevxsL6oDw
▼▼Twitter公式アカウントは以下のリンクから▼▼
https://twitter.com/KimuraMarketing
▼▼公式Noteは以下のリンクから▼▼
https://note.com/masaharukimura