Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NuxtJS + SSRで作ったGREE Tech Conference 2020
Search
gree_tech
PRO
September 18, 2020
Technology
0
500
NuxtJS + SSRで作ったGREE Tech Conference 2020
GREE Tech Conference 2020 で発表された資料です。
https://techcon.gree.jp/2020/session/ShortSession-2
gree_tech
PRO
September 18, 2020
Tweet
Share
More Decks by gree_tech
See All by gree_tech
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
630
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
640
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
630
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
630
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
670
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
640
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
630
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
630
コミュニケーションに鍵を見いだす、エンジニア1年目の経験談
gree_tech
PRO
0
140
Other Decks in Technology
See All in Technology
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
310
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.6k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
1
200
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
190
Flutterでキャッチしないエラーはどこに行く
taiju59
0
230
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
370
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
360
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
220
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Six Lessons from altMBA
skipperchong
28
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Statistics for Hackers
jakevdp
799
220k
Navigating Team Friction
lara
189
15k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Designing for Performance
lara
610
69k
Documentation Writing (for coders)
carmenintech
74
5k
Transcript
NuxtJS + SSRで作った GREE Tech Conference 2020 グリー株式会社 フロントエンドエンジニア 大野 佳
大野 佳(おおの かい) グリー株式会社 開発本部 UI開発チーム •Web制作会社でのフロントエンド開発を経て 2016年にグリー株式会社に入社 •社内のWebフロントエンド開発を主に担当 •
プロダクト、サービスの公式Webサイト • ゲームUI開発などのお手伝い 自己紹介 2
1.GREE Tech Conference 2020のご紹介 2.NuxtJSを選んだ理由 3.目指したこと 4.パフォーマンス改善施策 5.まとめ 目次 3
4 SSR
5 NuxtJSを選んだ理由 5
• JavaScriptフレームワークなら他にも色々 • React、Next.js、GatsbyJS、Svelte、etc... NuxtJSを選んだ理由 6
• Vue、NuxtJSの実績が多かった • 以前からNuxtJSでSSRが試してみたかった • SSRやパフォーマンス改善に注力したかった NuxtJSを選んだ理由 7
8 目指したこと 8
• 動的なOGP切り替え • 高いパフォーマンス 目指したこと 9
10 OGPとは 10
OGPとは 目指したこと 11 • 「Open Graph protocol」の略称 • SNSなどでURLをシェアした時に表示される タイトル、画像、概要などを指定するタグ情報
• JavaScript対応のクローラは動的な変更でも レンダリングしてくれる • Twitter、Facebookなど多くのSNSは非対応 • JavaScriptで切り替えても HTMLに静的に記述されたOGPのみ取得する OGPとは 目指したこと
12
13 動的なOGP切り替え 13
• 擬似的にOGPを切り替える方法として、静的なHTML での対応する方法もあるにはある 動的なOGP切り替え 目指したこと 14 Twitter Facebook Line Slack
etc... セッション ページ OGPのみの ページ リダイレクト Bot OGP取得
本来の用途と異なるリダイレクトを挟むリスク • 検索エンジンへの悪影響 • 表示速度低下によるユーザへの悪影響 動的なOGP切り替え 目指したこと 15
• SSRを行うことで動的な変更も認識されるように 動的なOGP切り替え 目指したこと 16
17 高いパフォーマンス 17
使用したパフォーマンスの計測ツール • Lighthouse(ラボデータ) • PageSpeed Insights (ラボ & フィールドデータ) •
Web Vitals(ラボデータ) 高パフォーマンス 目指したこと 18
• ラボデータ • 制御された環境で収集されるので、パフォーマンスの問題のデバッグに役立ちます。 ただし、実際のボトルネックを捕らえていないおそれがあります。 • フィールドデータ • フィールド データは実際のユーザー
エクスペリエンスをそのまま把握するのに役立 ちますが、使用できる指標セットが限られます。 高パフォーマンス 目指したこと 19 引用元:https://developers.google.com/speed/docs/insights/v5/about?hl=ja
• Web Vitals(Cumulative Layout Shift調査) • Googleの掲げているUX指標であるWeb Vitalsの一つである Cumulative Layout
Shiftの調査が行いやすい 高パフォーマンス 目指したこと 20
21 21 パフォーマンス改善
22 22 改善前の計測
Lighthouse(Desktop) パフォーマンス改善 23
Lighthouse(Mobile) パフォーマンス改善 24
Lighthouse(Mobile) パフォーマンス改善 25 • Webフォントのレンダリングブロックが顕著
Web Vitals パフォーマンス改善 26 • Layout Shiftの影響が大きいページ最下部で ロードして計測
27 27 改善施策
• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装 施策内容
パフォーマンス改善 28
• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装 施策内容
パフォーマンス改善 29
• PWAモジュールを実装して Service Worker(Workbox)でキャッシュ制御 施策内容 パフォーマンス改善 30
• 本サイトの背景には動画を使っている • Safariで動画をキャッシュから取得するために rangeRequestのプラグインを追加 施策内容 パフォーマンス改善 31 rangeRequestについてはnuxt/pwa公式に記載:https://pwa.nuxtjs.org/workbox/
• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装 施策内容
パフォーマンス改善 32
• nuxt-webfontloaderでレンダリングブロック対策 • 非同期でロードしてくれる 施策内容 パフォーマンス改善 33 通常の埋め込みコード
• PWAモジュールの実装 • Web Font Loaderでレンダリングブロック対策 • Layout Shiftが発生しない実装 施策内容
パフォーマンス改善 34
• iOS対策で行っていた、JavaScriptでコンテンツの高さを設定する ようなロジックを排除 • img要素にwidth、height属性を設定 • ブラウザがwidthとheight属性の値をもとに アスペクト比を計算し、画像のスペース確保する (2019年10月にWHATWGが標準化) 施策内容
パフォーマンス改善 35 標準化に関するIssue:Use width and height as intrinsic aspect ratio for img elements
ブラウザの対応状況 パフォーマンス改善 36
37 37 改善後の計測
Lighthouse(Desktop) パフォーマンス改善 38 Before After
Lighthouse(Mobile) パフォーマンス改善 39 Before After
Desktop PageSpeed Insights パフォーマンス改善 40 Mobile
Web Vitals パフォーマンス改善 41 Before After
42 42 まとめ
• 動的なOGP切り替え • 特別な設定の必要なく切り替えできた • フレームワークによってはPrerenderingが◎ • 高いパフォーマンス • SSRとPWAモジュールのおかげで高パフォーマンスが得られた
• JavaScriptが肥大化するならSSGも検討 まとめ 43
None