Tweet
Tweet

Slide 1

Slide 1 text

⽬指せ、爆速サイト︕ Classmethod (Europe) GmbH GitHub @quiver Cloudinaryで始める画像最適化 George Yoshida

Slide 2

Slide 2 text

2 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ

Slide 3

Slide 3 text

3 なぜ画像を最適化するのか︖ 速さは正義

Slide 4

Slide 4 text

4 速さは正義:Pinterest 表⽰の待ち時間を 40% 削減 ↓ 検索エンジンのトラフィックと サインアップ数が 15% 増加 Source : "パフォーマンスが重要なのはなぜか | Web Fundamentals"

Slide 5

Slide 5 text

5 速さは正義:BBC 読み込みが1秒増える ↓ ユーザーが10%減少 Source : "パフォーマンスが重要なのはなぜか | Web Fundamentals"

Slide 6

Slide 6 text

6 速さは正義 Webサービスの成功には Webパフォーマンスが不可⽋

Slide 7

Slide 7 text

7 Webパフォーマンスを改善するには︖ • 配信するリソース • リソースを送信する⽅法 • 送信するデータ量

Slide 8

Slide 8 text

8 送信データ量を削減できていますか︖ • JavaScript/CSSアセット • Minify圧縮 • テキストデータ • gzip圧縮 • 画像 • 最適化できていますか?

Slide 9

Slide 9 text

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.”

Slide 10

Slide 10 text

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.”

Slide 11

Slide 11 text

11 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ

Slide 12

Slide 12 text

12 画像を最適化するには︖ • 画像フォーマット • 画質 • 画像サイズ

Slide 13

Slide 13 text

13 画像フォーマットの最適化 • 旧世代 • JPEG/GIF/PNG • 新世代 • WebP/JPEG XR/JPEG 2000 • ※ブラウザ毎に対応フォーマットが異なる

Slide 14

Slide 14 text

14 次世代フォーマットの圧縮率 WebP PNG WebP JPEG Source https://developers.google.com/speed/webp/ 100 KB 100 KB 74 KB 66〜75 KB

Slide 15

Slide 15 text

15 WebP対応ブラウザ Source : https://caniuse.com/#feat=webp

Slide 16

Slide 16 text

16 JPEG XR対応ブラウザ Source : https://caniuse.com/#feat=jpegxr

Slide 17

Slide 17 text

17 JPEG 2000対応ブラウザ Source : https://caniuse.com/#feat=jpeg2000

Slide 18

Slide 18 text

18 次世代画像フォーマット • ⻑所 • JPEG/GIF/PNGよりも圧縮率が良い • 短所 • ブラウザの互換性が無い

Slide 19

Slide 19 text

19 画質の最適化 • スマートフォンのカメラは⾼性能 • ウェブ閲覧には過剰な⾼品質 • ウェブに合わせて最適化

Slide 20

Slide 20 text

20 画像サイズの最適化 • 画像サイズと表⽰サイズの不⼀致 800 x 800

Slide 21

Slide 21 text

21 画像の最適化は芸術でもあり科学でもある 画像の最適化は芸術でもあり科学でもあります。つまり、 個々の画像を最も適切に圧縮する⽅法について明⽩な正 解がないという点では芸術であり、画像のサイズを⼤幅 に削減できる⾮常に⾼度な技術やアルゴリズムがたくさ んあるという点では科学なのです。 画像に合った最適 な設定を⾒つけるには、フォーマット機能、エンコード データのコンテンツ、画質、ピクセル数など、多くの観 点で⼊念な分析が必要です。 By Ilya Grigorik Source : “画像の最適化 | Web Fundamentals”

Slide 22

Slide 22 text

22 画像最適化にはたくさんのリソースが必要

Slide 23

Slide 23 text

23 動画配信はどうなる?

Slide 24

Slide 24 text

24 画像・動画配信は専⽤SaaSにお任せ︕

Slide 25

Slide 25 text

25 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ

Slide 26

Slide 26 text

26 Cloudinaryとは︖ ダイナミックメディアプラットフォーム

Slide 27

Slide 27 text

27 画像フォーマットの⾃動変換

Slide 28

Slide 28 text

28 ⾃動クロッピング

Slide 29

Slide 29 text

29 URLでメディアリソースを操作(upload)

Slide 30

Slide 30 text

30 URLでメディアリソースを操作(upload)

Slide 31

Slide 31 text

31 URLでメディアリソースを操作(fetch)

Slide 32

Slide 32 text

32 URLでメディアリソースを操作(動画)

Slide 33

Slide 33 text

33 Cloudinaryまとめ • ダイナミックメディアプラットフォーム • 管理・加⼯・配信がワンストップ • 加⼯はAIが⾃動化。専⾨知識不要 • URLでリソースを操作 • 画像も動画も同じインターフェース

Slide 34

Slide 34 text

34 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ

Slide 35

Slide 35 text

35 Cloudinaryと連携してみよう • シンプル版 • CloudinaryをSaaSとしてフル活⽤ • エッジ版 • アプリケーション改修不要 • エッジがCloudinary連携を吸収

Slide 36

Slide 36 text

36 画像最適化前のシステム • ⻑所 • CDNを利⽤して通信を最適化 • 短所 • 画像を最適化していない

Slide 37

Slide 37 text

37 シンプル版︓SaaSをフル活⽤ • ユースケース • 新規システムの画像配信を最適化 • リプレースに合わせて画像配信を最適化

Slide 38

Slide 38 text

38 シンプル版︓SaaSをフル活⽤ • ⻑所 • 画像処理から配信までSaaSをフル活⽤ • 短所 • アプリケーションをSaaSの仕様に合わせる

Slide 39

Slide 39 text

39 シンプル版︓リクエストの流れ https://S3-Host/food.jpg https://res.cloudinary.com /demo/image/fetch /f_auto,q_auto,w_180,h_180 /https://S3-Host/food.jpg Content-Type: image/webp Content-Length: 6KB Height : 180 px Width : 180 px Content-Type: image/jpeg Content-Length: 820KB height : 800 px width : 800 px

Slide 40

Slide 40 text

40 エッジ版︓Cloudinaryをアドオン • ユースケース • アプリケーションを改修したくない • 静的出⼒サイト

Slide 41

Slide 41 text

41 エッジ版︓Cloudinaryをアドオン • ⻑所 • 導⼊前後でURLが同じ • アプリケーション改修不要 • 短所 • エッジ・コンピューティングの実装・運⽤が必要

Slide 42

Slide 42 text

42 エッジ版︓リクエストの流れ https://Host/food.jpg https://S3-Host/food.jpg https://Cloudinary-Host /demo/image/fetch/q_auto /https://S3-Host/food.jpg Lambda@EdgeでURL変更 https://Host /demo/image/fetch/q_auto /https://S3-Host/food.jpg

Slide 43

Slide 43 text

43 構成の⽐較 最適化前 シンプル エッジ

Slide 44

Slide 44 text

44 構成の⽐較 最適化 改修コスト 運⽤コスト 運⽤負荷 最適化前 ☓ - 低 低 シンプル版 ○ 低/⾼ 中 低 エッジ版 ○ 低 中 中

Slide 45

Slide 45 text

45 どっちを選ぶ︖ 新規 システム︖ 画像・動画を 最適化したい YES シンプル エッジ NO NO 改修 できる︖ YES

Slide 46

Slide 46 text

46 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ

Slide 47

Slide 47 text

47 画像最適化を評価してみよう • 画像最適化の検討時・適⽤後に利⽤ • ウェブパフォーマンス全般の評価ツール • Google PageSpeed Insights • 画像に特化した評価ツール • Cloudinary Website Speed Test

Slide 48

Slide 48 text

48 Webパフォーマンス全般の評価 • サービス • Google PageSpeed Insights • 汎⽤指標 • 速度インデックスなど • 画像に特化した改善項⽬ • 画像フォーマット • 画質 • サイズ

Slide 49

Slide 49 text

49 Google PageSpeed Insightsの使い⽅ https://developers.google.com/speed/pagespeed/insights/

Slide 50

Slide 50 text

50 Google PageSpeed Insightsの画像評価

Slide 51

Slide 51 text

51 Google PageSpeed Insightsの画像評価 →h_1,w_1 →f_auto →q_auto

Slide 52

Slide 52 text

52 画像に特化した最適化評価 • サービス • Cloudinary Website Speed Test • 指標 • 画像数 • 合計画像サイズ • 圧縮後合計画像サイズ • 画像ごとの最適化ポイント

Slide 53

Slide 53 text

53 Cloudinary Website Speed Testの使い⽅ https://webspeedtest.cloudinary.com

Slide 54

Slide 54 text

54 Website Speed Testの全体評価

Slide 55

Slide 55 text

55 Website Speed Testの個別評価 f_auto h_1,w_1 q_auto

Slide 56

Slide 56 text

56 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ

Slide 57

Slide 57 text

57 まとめ • 画像・動画の利⽤が増加中 • 効果的・効率的な配信が⼤事 • メディア配信SaaSのCloudinaryで解決︕ • まずは画像最適化を評価してみよう︕

Slide 58

Slide 58 text

58 画像・動画を最適化してみたい︕ https://classmethod.jp/partner/cloudinary/

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content