NuxtJS + SSRで作ったGREE Tech Conference 2020

by gree_tech

Slide 1

Slide 1 text

NuxtJS + SSRで作った GREE Tech Conference 2020 グリー株式会社　フロントエンドエンジニア　大野佳

Slide 2

Slide 2 text

大野佳（おおのかい）グリー株式会社開発本部 UI開発チーム •Web制作会社でのフロントエンド開発を経て 2016年にグリー株式会社に入社 •社内のWebフロントエンド開発を主に担当 • プロダクト、サービスの公式Webサイト • ゲームUI開発などのお手伝い自己紹介 2

Slide 3

Slide 3 text

1.GREE Tech Conference 2020のご紹介 2.NuxtJSを選んだ理由 3.目指したこと 4.パフォーマンス改善施策 5.まとめ目次 3

Slide 4

Slide 4 text

4 SSR

Slide 5

Slide 5 text

5 NuxtJSを選んだ理由 5

Slide 6

Slide 6 text

• JavaScriptフレームワークなら他にも色々 • React、Next.js、GatsbyJS、Svelte、etc... NuxtJSを選んだ理由 6

Slide 7

Slide 7 text

• Vue、NuxtJSの実績が多かった • 以前からNuxtJSでSSRが試してみたかった • SSRやパフォーマンス改善に注力したかった NuxtJSを選んだ理由 7

Slide 8

Slide 8 text

8 目指したこと 8

Slide 9

Slide 9 text

• 動的なOGP切り替え • 高いパフォーマンス目指したこと 9

Slide 10

Slide 10 text

10 OGPとは 10

Slide 11

Slide 11 text

OGPとは目指したこと 11 • 「Open Graph protocol」の略称 • SNSなどでURLをシェアした時に表示されるタイトル、画像、概要などを指定するタグ情報

Slide 12

Slide 12 text

• JavaScript対応のクローラは動的な変更でもレンダリングしてくれる • Twitter、Facebookなど多くのSNSは非対応 • JavaScriptで切り替えても HTMLに静的に記述されたOGPのみ取得する OGPとは目指したこと 12

Slide 13

Slide 13 text

13 動的なOGP切り替え 13

Slide 14

Slide 14 text

• 擬似的にOGPを切り替える方法として、静的なHTML での対応する方法もあるにはある動的なOGP切り替え目指したこと 14 Twitter Facebook Line Slack etc... セッションページ OGPのみのページリダイレクト Bot OGP取得

Slide 15

Slide 15 text

本来の用途と異なるリダイレクトを挟むリスク • 検索エンジンへの悪影響 • 表示速度低下によるユーザへの悪影響動的なOGP切り替え目指したこと 15

Slide 16

Slide 16 text

• SSRを行うことで動的な変更も認識されるように動的なOGP切り替え目指したこと 16

Slide 17

Slide 17 text

17 高いパフォーマンス 17

Slide 18

Slide 18 text

使用したパフォーマンスの計測ツール • Lighthouse（ラボデータ） • PageSpeed Insights （ラボ & フィールドデータ） • Web Vitals（ラボデータ）高パフォーマンス目指したこと 18

Slide 19

Slide 19 text

• ラボデータ • 制御された環境で収集されるので、パフォーマンスの問題のデバッグに役立ちます。ただし、実際のボトルネックを捕らえていないおそれがあります。 • フィールドデータ • フィールドデータは実際のユーザーエクスペリエンスをそのまま把握するのに役立ちますが、使用できる指標セットが限られます。高パフォーマンス目指したこと 19 引用元：https://developers.google.com/speed/docs/insights/v5/about?hl=ja

Slide 20

Slide 20 text

• Web Vitals（Cumulative Layout Shift調査） • Googleの掲げているUX指標であるWeb Vitalsの一つである Cumulative Layout Shiftの調査が行いやすい高パフォーマンス目指したこと 20

Slide 21

Slide 21 text

21 21 パフォーマンス改善

Slide 22

Slide 22 text

22 22 改善前の計測

Slide 23

Slide 23 text

Lighthouse（Desktop）パフォーマンス改善 23

Slide 24

Slide 24 text

Lighthouse（Mobile）パフォーマンス改善 24

Slide 25

Slide 25 text

Lighthouse（Mobile）パフォーマンス改善 25 • Webフォントのレンダリングブロックが顕著

Slide 26

Slide 26 text

Web Vitals パフォーマンス改善 26 • Layout Shiftの影響が大きいページ最下部でロードして計測

Slide 27

Slide 27 text

27 27 改善施策

Slide 28

Slide 28 text

• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装施策内容パフォーマンス改善 28

Slide 29

Slide 29 text

• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装施策内容パフォーマンス改善 29

Slide 30

Slide 30 text

• PWAモジュールを実装して Service Worker（Workbox）でキャッシュ制御施策内容パフォーマンス改善 30

Slide 31

Slide 31 text

• 本サイトの背景には動画を使っている • Safariで動画をキャッシュから取得するために rangeRequestのプラグインを追加施策内容パフォーマンス改善 31 rangeRequestについてはnuxt/pwa公式に記載：https://pwa.nuxtjs.org/workbox/

Slide 32

Slide 32 text

• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装施策内容パフォーマンス改善 32

Slide 33

Slide 33 text

• nuxt-webfontloaderでレンダリングブロック対策 • 非同期でロードしてくれる施策内容パフォーマンス改善 33 通常の埋め込みコード

Slide 34

Slide 34 text

• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装施策内容パフォーマンス改善 34

Slide 35

Slide 35 text

• iOS対策で行っていた、JavaScriptでコンテンツの高さを設定するようなロジックを排除 • img要素にwidth、height属性を設定 • ブラウザがwidthとheight属性の値をもとにアスペクト比を計算し、画像のスペース確保する（2019年10月にWHATWGが標準化）施策内容パフォーマンス改善 35 標準化に関するIssue：Use width and height as intrinsic aspect ratio for img elements

Slide 36

Slide 36 text

ブラウザの対応状況パフォーマンス改善 36

Slide 37

Slide 37 text

37 37 改善後の計測

Slide 38

Slide 38 text

Lighthouse（Desktop）パフォーマンス改善 38 Before After

Slide 39

Slide 39 text

Lighthouse（Mobile）パフォーマンス改善 39 Before After

Slide 40

Slide 40 text

Desktop PageSpeed Insights パフォーマンス改善 40 Mobile

Slide 41

Slide 41 text

Web Vitals パフォーマンス改善 41 Before After

Slide 42

Slide 42 text

42 42 まとめ

Slide 43

Slide 43 text

• 動的なOGP切り替え • 特別な設定の必要なく切り替えできた • フレームワークによってはPrerenderingが◎ • 高いパフォーマンス • SSRとPWAモジュールのおかげで高パフォーマンスが得られた • JavaScriptが肥大化するならSSGも検討まとめ 43

Slide 44

Slide 44 text

No content