結局WebPでどれぐらいページが軽くなったのか
2019年03月08日
先日の改修で対応ブラウザには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
- 13.06MB
- 元画像はPNGなので、圧縮されたPNG画像が配信される
Edge
- 1.39MB
- WebPの画像が配信されている
- 元画像はイラストだが画像の劣化は認められない
- スクリーンショットだとやっぱりわずかに劣化しているように見える
所感
- 1/10にまでサイズが減っている。これはすごい
- JPEGほど劣化も激しくない。
- Gatsbyであれば少しの設定で導入できるので、是非導入するべき