GREE Tech Conference 2020 で発表された資料です。 https://techcon.gree.jp/2020/session/ShortSession-2

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

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

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

4. 4
SSR

5. 5
NuxtJSを選んだ理由
5

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

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

8. 8
目指したこと
8

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

10. 10
OGPとは
10

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

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

13. 13
動的なOGP切り替え
13

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

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

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

17. 17
高いパフォーマンス
17

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

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

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

21. 2121
パフォーマンス改善

22. 2222
改善前の計測

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

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

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

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

27. 2727
改善施策

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

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

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

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

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

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

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

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

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

37. 3737
改善後の計測

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

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

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

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

42. 4242
まとめ

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