everdream

結局WebPでどれぐらいページが軽くなったのか

2019年03月08日


2019 03 08 16 24 03

先日の改修で対応ブラウザにはWebPの画像を配信するように設定しました。実際にどれほどの効果があったのか見てみたいと思います。

検証の条件

  • 使用するページはシャニマス: 強いSレアアイドル
  • Microsoft Edge(WebP対応)とIE11(WebP非対応)の開発者ツールを開き、ネットワークの項目を参照

    • 開発者ツールのUIがEdgeとIEで同じなので、比較しやすいはず
  • ページを上から下までひととおりスクロールする
  • EdgeはService Workerをバイパスするように設定
  • gatsby-config.jsのgatsby-remark-imagesまわりにこのような設定をしている
/* (前略) */
{
    resolve: `gatsby-remark-images`,
    options: {
        maxWidth: 800,
        quality: 90,
        linkImagesToOriginal: true,
        withWebp: true
},
/* (後略) */

結果

IE

2019 03 08 16 29 31

  • 13.06MB
  • 元画像はPNGなので、圧縮されたPNG画像が配信される

Edge

2019 03 08 16 30 33

  • 1.39MB
  • WebPの画像が配信されている
  • 元画像はイラストだが画像の劣化は認められない
  • スクリーンショットだとやっぱりわずかに劣化しているように見える

所感

  • 1/10にまでサイズが減っている。これはすごい
  • JPEGほど劣化も激しくない。
  • Gatsbyであれば少しの設定で導入できるので、是非導入するべき