WebPってどうなの?次世代フォーマットでの画像の配信に対応したらこうなった。

どうも、ときパパです。

グーグルのスピードテスト“PageSpeedInsights”の改善項目で、次世代フォーマットでの画像の配信って出ちゃいました。

グーグル先生からお達しによると「JPEG2000,JPEG XR,WebP」を使えばダウンロード時間やデータ使用料を抑えられますよと。

THE THOR(ザ・トール)は色んなSEO対策がされてますが、さらなるスピードアップに向けてやってみる事に。

対応は全く難しくなかったので是非お試しください。

PageSpeedInsights

まずは、グーグル先生によるテストから。

PageSpeedInsights”から自分のHPのURLを入力するとチェックできます。

こんな改善項目が出てきたらレッツトライ。

次世代フォーマット

まずは、次世代フォーマットと提示されている「JPEG2000,JPEG XR,WebP」とはなんぞやから。

なんと、それぞれ対応してるブラウザが違います。

Can I useというサイトで試してみました。英語なのでわかりにくいかもですが色の意味さえ押さえてやればOKです。

Supportedサポートしている
Partial support部分的にサポートしている
Not supportedサポートしていない
Support unknownサポート状況不明

JPEG2000

JPEG2000対応状況

見事に真っ赤ですね。ってかSafariしか対応してません。頑張れアップル!

JPEG XR

JPEG XR対応状況

こちらも見事に真っ赤です。IEとEdgeしか対応してません。頑張れマイクロソフト!

WebP

WebP対応状況

こちらは結構緑があります。Safariが対応していないのが残念ですね。

アップル社の意地を感じちゃいます。

けど、主要どころは対応してますので一番まともっぽいですね。

WebPとは?

WebPは、ウェッピーとよみます。

グーグルさんが開発しているみたいですね。

2010年9月3日に公表されて提供が開始されたそうです。

思ったより歴史はありました。ウェッピー。

EWWW Image Optimizer

画像圧縮でもおなじみの「EWWW Image Optimizer」を使用します。

関連記事

どうも、ときパパです。グーグル先生のPageSpeedInsightsというウェブページの読み込み時間を測定してくれるサイト。改善できる項目に適切なサイズの画像という文言が。画像が重いとサイトの表示速度が遅くなり、ユ[…]

追加写真のWebP(ウェッピー)を自動作成

プラグイン→EWWW Image Optimizer→設定から

  1. 上の項目からWebPを選ぶ
  2. JPG,PNGからWebPにチェック
  3. 変更を保存

これで、今後追加していく写真はオリジナルとWebPが自動的に保存されてます。

サポートブラウザのみウェッピーが提供されるので安心です。

既存の写真をWebP(ウェッピー)へ

お次は既存の写真を一括でWebPに変換します。

  1. メディア選択
  2. 一括最適化選択
  3. 右側にある最適化を強制にチェック
  4. WebPのみにチェック
  5. 最適化されていない画像をスキャンするをクリック

これで最適化される画像を探してくれます。

最後に最適化ボタンをクリックで、既存の写真も一括でWebPに変換されます。

リライトルールを挿入

最後にWebPのリライトルールを挿入します。

ちなみにリライトルール(RewriteRule)とは、URLを書き換えるための指示子です。

  1. 設定を選択
  2. EWWW image Optimizerを選択
  3. 画面一番下にあるリライトルールを挿入するを選択

これで、次世代フォーマットでの画像の配信が出来るようになりました。

最終確認

最後の確認です。

先ほどの【リライトルールを挿入する】の右側にある赤色のPNGマーク。こちらが緑色のWEBPマークに変わっていればOKです。

最終的にグーグル先生の評価は

もう一度、グーグル先生に評価してもらうと、1.2Sとのこと。

最初が1.8Sだったので0.6S減らすことができました。