Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

目指せ、爆速サイト!Cloudinaryで始める画像最適化|Developers IO 202...

quiver
June 23, 2020

目指せ、爆速サイト!Cloudinaryで始める画像最適化|Developers IO 2020 Connect

サイトを魅力的なものにすべく、画像をふんだんに使いたい一方で、画像が重すぎてサイト表示が遅くなると、コンバージョン率が下がってしまうというジレンマがあります。

そんなときに役立つのが画像の最適化です。

画像フォーマット・画質などを最適化することで、画像サイズはかんたんに半分以下になります。

Cloudinaryを使った画像最適化方法について、話しました。

動画 : https://youtu.be/fuBJVL2JLRc
解説ブログ:https://dev.classmethod.jp/articles/make-the-web-faster-image-optimization-with-cloudinary/

quiver

June 23, 2020
Tweet

More Decks by quiver

Other Decks in Technology

Transcript

  1. 9 ページウェイトの75%は画像 Source : https://almanac.httparchive.org/en/2019/page-weight Figure 3/4 Percentile モバイル デスクトップ

    Total (KB) Image (KB) Total (KB) Image (KB) 90 6226 4746 6945 5220 75 3431 2270 3774 2434 50 1745 893 1934 983 25 800 266 924 319 10 318 59 397 78 “Unoptimized images are often the greatest contributor to page bloat.”
  2. 10 ページウェイトは増加中。画像が犯⼈ Source : https://almanac.httparchive.org/en/2019/page-weight Figure 3/4 Percentile モバイル デスクトップ

    Total (KB) Image (KB) Total (KB) Image (KB) 90 +376 +648 +1106 +1291 75 +304 +281 +795 +686 50 +179 +106 +434 +336 25 +110 +36 +237 +138 10 +72 +20 +120 +39 “Images are overwhelmingly driving this increase.”
  3. 13 画像フォーマットの最適化 • 旧世代 • JPEG/GIF/PNG • 新世代 • WebP/JPEG

    XR/JPEG 2000 • ※ブラウザ毎に対応フォーマットが異なる
  4. 44 構成の⽐較 最適化 改修コスト 運⽤コスト 運⽤負荷 最適化前 ☓ - 低

    低 シンプル版 ◦ 低/⾼ 中 低 エッジ版 ◦ 低 中 中
  5. 48 Webパフォーマンス全般の評価 • サービス • Google PageSpeed Insights • 汎⽤指標

    • 速度インデックスなど • 画像に特化した改善項⽬ • 画像フォーマット • 画質 • サイズ
  6. 52 画像に特化した最適化評価 • サービス • Cloudinary Website Speed Test •

    指標 • 画像数 • 合計画像サイズ • 圧縮後合計画像サイズ • 画像ごとの最適化ポイント
  7. 59 参考 • パフォーマンスが重要なのはなぜか | Web Fundamentals | Google Developers

    • 画像の最適化 | Web Fundamentals | Google Developers • Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ʼ19) – YouTube • The 2019 Web Almanac | HTTP Archive