見出し画像

【表示速度改善】「PageSpeed Insights」のスコアを上げるためにWebPを使ってみた

たぬこ

こんにちは、たぬこ（@tanuko_neet）です。

先日、「PageSpeed Insightsのスコアを出来る限り上げてほしい」というお仕事を請けまして、初めて知ることがいろいろありましたので、備忘録がわりにnoteを書いています。

すでにご存知の方にとっては今更な内容だと思いますが、「WebPってなに？」という方に少しでも参考になれば嬉しいです。

▼ そもそも「PageSpeed Insights」とはなんぞや

サイトの表示速度を測定し、点数で出してくれるGoogleのツールです。

画像1

（見本としてYahoo!JAPANでやってみたら意外にモバイルが低かった。。PCは92点でした）

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

URLを入力してボタンを押すと、モバイル・PCそれぞれのスコアが出てきます。
左上でモバイルとPCを切り替えられます。

必ずしも高得点である必要はないと思いますが、ページの表示速度が遅いとユーザーが離れやすいので、低いよりは高いほうがいいです。

「表示が2秒遅れるだけで、ユーザーの直帰率が50%上がる」という事例もあるようです。

サイト表示が2秒遅いだけで直帰率は50％増加！　DeNA事例から学ぶWebの自動最適化手法／日本ラドウェア
https://webtan.impress.co.jp/e/2014/07/08/17757

また、ページの表示速度は検索順位にも一定の影響があると言われていますので、早いに越したことはありません。

▼ スコアを上げるためにやったこと

「PageSpeed Insights」の測定結果ページをスクロールすると、「改善できる項目」というものが出てきます。
これらを改善すれば表示速度が早くなるかもよ～、という項目です。

画像2

（画像はYahoo!JAPANで測定した結果、モバイルの「改善できる項目」です）

サイトによってこの項目の順位は異なるのですが、今回お仕事させてもらったサイトでは、

・次世代フォーマットでの画像の配信
・使用していないJavaScriptの削除

が優先度高く挙げられてました。

このうち「次世代フォーマットでの画像の配信」について、調べたこと・やってみたことを以下に書いていきます。

▼ 「次世代フォーマットでの画像の配信」とはなんぞや

測定結果ページの説明には、

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNGやJPEGより圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

と書いてあります。

画像13

よく分からないのでググってみたところ、

・JPEG 2000
・JPEG XR
・WebP

という画像フォーマットがあるそうです。

いつも使っているJPEGやPNGとはまた違う画像の種類で、これを使えばファイルサイズが25〜35%ほど軽くなるとのこと。
「画像をこれらの形式に変えたら、読み込み速度が早くなるかもよ」ってことみたいですね。

上記3つの次世代フォーマットがありますが、対応しているブラウザはそれぞれ異なっています。

・「JPEG 2000」の対応ブラウザ

画像4

・「JPEG XR」の対応ブラウザ

画像5

・「WebP」の対応ブラウザ

画像6


対応ブラウザの数を見ると、現状は「WebP（ウェッピー）」一択です。
SafariとIE11では表示されないので、ここは対策が必要になります。
（対策方法は後述します）

ちなみにSafariは、2020年秋ごろのアップデートでWebPに対応予定とのことです。

▼ サイトの画像をWebPに置き換えるには？

「サイトの画像をWebPに置き換えることで軽くなる」ということは分かりました。
次は肝心の作業内容です。

・だいたいの流れ

① JPEGやPNG画像をWebP形式に変換
② 変換したWebP画像をアップロード
③ タグの書き換え、及び未対応ブラウザ対策

・ 画像をWebPに変換するには

まずは、JPEGやPNG画像をWebP形式に変換する必要があります。

変換方法は、

①オンラインツールを使う
②Photoshopの機能拡張を入れる
③WordPressプラグイン「EWWW Image Optimizer」を使う

などがあります。

・すでにサイト上にある画像を変換するなら①
・Photoshopを使っていて、今後新しい画像を作る際は②
・WordPressサイトなら断然③

がいいんじゃないかと思います。

今回はWordPressサイトだったので、③の方法でやりました。
プラグインで一括変換できるので、他の方法より遥かに楽だと思います。

①②についてはこちらの記事が参考になりました。

PhotoshopCCをWebP画像の書き出し・保存に対応させる方法
https://jill-tone.com/webp_photoshop/

▼ WebPにするとどれくらい軽くなるのか

試しにTwitterのヘッダー画像をWebPに変換してみました。

画像14

元画像は1500×500px、304KBのPNGデータです。

こちらのオンラインツールを使用。

画像をWebPに一括変換
https://saruwakakun.com/tools/png-jpeg-to-webp/
※Chromeで使用できます


WebP変換後　52KB

252KBも軽くなりました！

お借りしてきたフリー素材のJPEG画像でもやってみます。

画像15

WebP変換前　568KB
WebP変換後　248KB

320KB軽くなっています。
画質も特に劣化しているようには見えませんでした。

「TinyPNG」といった圧縮ツールでもファイルサイズは軽くできるのですが、WebPのほうがよりサイズダウンする感じです。

▼ 未対応ブラウザ用の対策方法は大きく2つ

WebPは現在、SafariとIEに対応していないので、

・対応ブラウザではWebPを読み込む
・未対応ブラウザでは通常の画像（JPEG、PNG）を読み込む

という振り分けが必要になります。

振り分ける方法は大きく2つ、

・pictureタグによる振り分け
・htaccessによる振り分け

があります。

・pictureタグによる振り分け方法

「banner.png」という画像を振り分ける場合のコードは、以下のようになります。

<picture>
     <source type="image/webp" srcset="banner.png.webp">
     <img src="banner.png">
</picture>
※ WebPのファイル名は単純に「banner.webp」でもいいのですが、元画像に「banner.jpg」と「banner.png」の両方がある可能性を考え、区別できるよう「banner.png.webp」としています。

imgタグをpictureタグで囲み、その中にWebPを表示するためのsourceタグを追加します。
こうすることで、

・対応ブラウザでは「banner.png.webp」
・未対応ブラウザでは「banner.png」

が表示されるようになります。

IE11に対応する場合は、さらに「polyfill」というものを読み込まなければいけません。
（いちいち手のかかる子、IEちゃん…）

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CHTMLPictureElement"
></script>

・htaccessによる振り分け方法

pictureタグによる振り分けは一箇所ごとに編集する必要があり、画像の多いサイトではなかなか大変です。

htaccessによる振り分けなら、サイト全体の画像を一括でWebPに対応することができます。

※htaccessファイルを編集する際は必ずバックアップをとり、不具合が出た際に元の状態に戻せるようにしてください。

WebP画像を元画像と同じディレクトリに置き、ルートディレクトリにある「.htaccess」ファイルに以下のコードをコピペします。


※ htaccessはサーバーのコントロールパネル、もしくはFTPから編集できます。無ければ「.htaccess」ファイルを作ってコードをコピペし、ルートディレクトリにアップロードします。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

↓こちらの記事で紹介されているコードをお借りしています。

WebP対応をしたらサイトが軽くなったので、最も対応しやすい方法を解説します
https://irokoto.co.jp/blog/20200527/post-8

▼ WordPressサイトならプラグインで簡単にできる

WordPressサイトであれば、「EWWW Image Optimizer」というプラグインで簡単に対応できます。

・設定画面に表示されているhtaccessをコピペ
・ボタンを押して画像をWebPに一括変換

これだけでWebPへの変換から未対応ブラウザ対応までできるので、とても便利でした。

・「EWWW Image Optimizer」を使ったWebP対応の手順

①「プラグイン」→「新規追加」→EWWW Image Optimizer」をインストール→有効化
　※「EWWW Image Optimizer Cloud」と間違えないように注意

画像7

②「設定」→「EWWW Image Optimizer」→「ベーシック」→「メタデータを削除」にチェックが入っているか確認

画像8

③「設定」→「EWWW Image Optimizer」→「WebP」→「WebP変換」にチェックを入れる→「変更を保存」ボタンを押す

画像9

④表示されているコードをコピー
　※「リライトルールを挿入する」ボタンはクリックしない

画像10

⑤コピーしたコードを.htaccessファイルの上部にペーストして保存
　※.htaccessの編集はバックアップをとってから行う

⑤「メディア」→「一括最適化」→「スキャンする」ボタンを押す

画像11

⑥「設定」→「EWWW Image Optimizer」ページの右下に、緑色のWebPマークが出ていれば成功

画像12

▼ CSSの「background-image」は別途対策が必要

HTMLで使用している画像については上記の対応でいいのですが、CSSの「background-image」で背景画像をWebPに対応させるには、別途対策が必要です。

まずは「Modernizr」というJavaScriptをHTMLで読み込みます。

Modernizr
https://modernizr.com/
・「Add your detects」ボタンをクリック
・リストから「Webp」を選択し右上の「BUILD」ボタンをクリック
・「Build」の右にある「Download」をクリック
<script src="modernizr-custom.js"></script>

次に、CSSファイルで「background-image」の記述を振り分けます。

    /* WebP未対応ブラウザ */
   .no-webp .class-name {
     background-image: url("image.png");
   }
   /* WebP対応ブラウザ */
   .webp .class-name {
     background-image: url("image.png.webp");
   }

※「.class-name」の部分は任意のクラス名が入ります。

▼ WebPに対応できているかを確認する方法

作業が終わったら、きちんとWebPに変更できているかをブラウザで確認します。

キャッシュをクリアした後、Chromeデベロッパーツールの「Network」タブで、画像の「Type」が「webp」になっていればOKです。

画像15

ブラウザのキャッシュをクリアする方法はこちら↓

ブラウザのキャッシュをクリアする方法
https://helpx.adobe.com/jp/legacy/kb/222659.html

▼ WebPでスコアはどれくらい上がったのか

画像をWebPに変えたことで、「PageSpeed Insights」のスコアはどれくらい上がったかと言うと・・・

今回依頼を受けたサイトでは、4点アップ

という結果になりました。

ファイルサイズが軽くなるぶん、若干ですが読み込み速度は上がるようです。
大きな画像をふんだんに使ったサイトなら、もっと効果があるような気がします。

「たった4点かよ」と思われそうですが、塵も積もればというやつで、他の施策と合わせればさらに上げることができます。

▼ さいごに

WebP対応は、必ずしなければいけないものではありません。
画像の多いサイトなどで「重いなあ、遅いなあ」と気になったときに検討すればいいと思います。
（実際、今回依頼を受けるまでは気にしたこともありませんでした…）

「PageSpeed Insights」で高得点を出そうと思うと様々な施策が必要です。
WebP対応はその中のひとつに過ぎません。

サイトの表示速度がアップすれば、ユーザーさんもクライアントさんもニコニコでいいことばかりなので、今後もいろいろと試していきたいと思います。
（いい方法あったらぜひ教えてください…！）

最後までお読みいただきありがとうございました。

この記事が気に入ったらサポートをしてみませんか？