どうも、ときパパです。
グーグルのスピードテスト“PageSpeedInsights”の改善項目で、次世代フォーマットでの画像の配信って出ちゃいました。
グーグル先生からお達しによると「JPEG2000,JPEG XR,WebP」を使えばダウンロード時間やデータ使用料を抑えられますよと。
THE THOR（ザ・トール）は色んなＳＥＯ対策がされてますが、さらなるスピードアップに向けてやってみる事に。
対応は全く難しくなかったので是非お試しください。
PageSpeedInsights
まずは、グーグル先生によるテストから。
“PageSpeedInsights”から自分のHPのURLを入力するとチェックできます。
こんな改善項目が出てきたらレッツトライ。
次世代フォーマット
まずは、次世代フォーマットと提示されている「JPEG2000,JPEG XR,WebP」とはなんぞやから。
なんと、それぞれ対応してるブラウザが違います。
Can I useというサイトで試してみました。英語なのでわかりにくいかもですが色の意味さえ押さえてやればOKです。
| Supported | サポートしている |
| Partial support | 部分的にサポートしている |
| Not supported | サポートしていない |
| Support unknown | サポート状況不明 |
JPEG2000
見事に真っ赤ですね。ってかSafariしか対応してません。頑張れアップル！
JPEG XR
こちらも見事に真っ赤です。IEとEdgeしか対応してません。頑張れマイクロソフト！
WebP
こちらは結構緑があります。Safariが対応していないのが残念ですね。
アップル社の意地を感じちゃいます。
けど、主要どころは対応してますので一番まともっぽいですね。
WebPとは？
WebPは、ウェッピーとよみます。
グーグルさんが開発しているみたいですね。
２０１０年９月３日に公表されて提供が開始されたそうです。
思ったより歴史はありました。ウェッピー。
EWWW Image Optimizer
画像圧縮でもおなじみの「EWWW Image Optimizer」を使用します。
どうも、ときパパです。グーグル先生のPageSpeedInsightsというウェブページの読み込み時間を測定してくれるサイト。改善できる項目に適切なサイズの画像という文言が。画像が重いとサイトの表示速度が遅くなり、ユ[…]
追加写真のWebP(ウェッピー)を自動作成
プラグイン→EWWW Image Optimizer→設定から
- 上の項目からWebPを選ぶ
- JPG,PNGからWebPにチェック
- 変更を保存
これで、今後追加していく写真はオリジナルとWebPが自動的に保存されてます。
サポートブラウザのみウェッピーが提供されるので安心です。
既存の写真をWebP(ウェッピー)へ
お次は既存の写真を一括でWebPに変換します。
- メディア選択
- 一括最適化選択
- 右側にある最適化を強制にチェック
- WebPのみにチェック
- 最適化されていない画像をスキャンするをクリック
これで最適化される画像を探してくれます。
最後に最適化ボタンをクリックで、既存の写真も一括でWebPに変換されます。
リライトルールを挿入
最後にWebPのリライトルールを挿入します。
ちなみにリライトルール(RewriteRule)とは、URLを書き換えるための指示子です。
- 設定を選択
- EWWW image Optimizerを選択
- 画面一番下にあるリライトルールを挿入するを選択
これで、次世代フォーマットでの画像の配信が出来るようになりました。
最終確認
最後の確認です。
先ほどの【リライトルールを挿入する】の右側にある赤色のPNGマーク。こちらが緑色のWEBPマークに変わっていればOKです。
最終的にグーグル先生の評価は
もう一度、グーグル先生に評価してもらうと、１．２Sとのこと。
最初が１．８Sだったので０．６S減らすことができました。