Submit Search
Upload
NuxtJS + SSRで作ったGREE Tech Conference 2020
•
0 likes
•
841 views
gree_tech
Follow
GREE Tech Conference 2020 で発表された資料です。 https://techcon.gree.jp/2020/session/ShortSession-2
Read less
Read more
Engineering
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 44
Download now
Download to read offline
Recommended
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
gree_tech
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
ここが良かったDatadog
ここが良かったDatadog
tyamane
Recommended
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
gree_tech
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
ここが良かったDatadog
ここが良かったDatadog
tyamane
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
こわくない Git
こわくない Git
Kota Saito
インフラCICDの勘所
インフラCICDの勘所
Toru Makabe
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
Redmine にいろいろ埋め込んでみた
Redmine にいろいろ埋め込んでみた
Kohei Nakamura
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTT DATA Technology & Innovation
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
ペアプロするならgit-duetを使おう
ペアプロするならgit-duetを使おう
Shinya Nakajima
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
NTT DATA Technology & Innovation
超実践 Cloud Spanner 設計講座
超実践 Cloud Spanner 設計講座
Samir Hammoudi
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
Yusuke Suzuki
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
Kentaro Yoshida
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
DockerとPodmanの比較
DockerとPodmanの比較
Akihiro Suda
診断ツールの使い方(Owasp zapの場合)
診断ツールの使い方(Owasp zapの場合)
shingo inafuku
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate
Takanori Suzuki
.NET 7期待の新機能
.NET 7期待の新機能
TomomitsuKusaba
2017年度 AMG Solution 会社説明会資料
2017年度 AMG Solution 会社説明会資料
Tomoteru Sannomiya
More Related Content
What's hot
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
こわくない Git
こわくない Git
Kota Saito
インフラCICDの勘所
インフラCICDの勘所
Toru Makabe
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
Redmine にいろいろ埋め込んでみた
Redmine にいろいろ埋め込んでみた
Kohei Nakamura
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTT DATA Technology & Innovation
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
ペアプロするならgit-duetを使おう
ペアプロするならgit-duetを使おう
Shinya Nakajima
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
NTT DATA Technology & Innovation
超実践 Cloud Spanner 設計講座
超実践 Cloud Spanner 設計講座
Samir Hammoudi
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
Yusuke Suzuki
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
Kentaro Yoshida
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
DockerとPodmanの比較
DockerとPodmanの比較
Akihiro Suda
診断ツールの使い方(Owasp zapの場合)
診断ツールの使い方(Owasp zapの場合)
shingo inafuku
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate
Takanori Suzuki
What's hot
(20)
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
こわくない Git
こわくない Git
インフラCICDの勘所
インフラCICDの勘所
Rest ful api設計入門
Rest ful api設計入門
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Redmine にいろいろ埋め込んでみた
Redmine にいろいろ埋め込んでみた
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
Redisの特徴と活用方法について
Redisの特徴と活用方法について
ペアプロするならgit-duetを使おう
ペアプロするならgit-duetを使おう
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
超実践 Cloud Spanner 設計講座
超実践 Cloud Spanner 設計講座
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
DockerとPodmanの比較
DockerとPodmanの比較
診断ツールの使い方(Owasp zapの場合)
診断ツールの使い方(Owasp zapの場合)
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate
Similar to NuxtJS + SSRで作ったGREE Tech Conference 2020
.NET 7期待の新機能
.NET 7期待の新機能
TomomitsuKusaba
2017年度 AMG Solution 会社説明会資料
2017年度 AMG Solution 会社説明会資料
Tomoteru Sannomiya
楽天エンジニアライフ
楽天エンジニアライフ
Rakuten Group, Inc.
Microsoft MVPとは?コミュニティ活動のすすめ
Microsoft MVPとは?コミュニティ活動のすすめ
TomomitsuKusaba
インフラエンジニアに送る Visual Studio Code ~Azure 編~
インフラエンジニアに送る Visual Studio Code ~Azure 編~
Shinsuke Saito
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
Google Cloud Platform - Japan
私たちがGCPを使い始めた本当の理由
私たちがGCPを使い始めた本当の理由
gree_tech
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
MPN Japan
.NET 7におけるBlazorの新機能
.NET 7におけるBlazorの新機能
TomomitsuKusaba
STAC2022 ローコード開発におけるテストピラミッド考察
STAC2022 ローコード開発におけるテストピラミッド考察
Satoshi Sakashita
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
チーム開発で徐々にコード品質をあげていく取り組み
チーム開発で徐々にコード品質をあげていく取り組み
Yuta Matsumura
Developer's summit 2021 [19-D-5]なぜ今、ローコードなのか
Developer's summit 2021 [19-D-5]なぜ今、ローコードなのか
Tetsuo Ajima
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
PHPを使う理由
PHPを使う理由
Yohei Hamada
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Shotaro Suzuki
javascriptの基礎
javascriptの基礎
Masayuki Abe
Infragistics Ultimate 2018 Vol.2最新機能
Infragistics Ultimate 2018 Vol.2最新機能
インフラジスティックス・ジャパン株式会社
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Yuki Okada
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
Similar to NuxtJS + SSRで作ったGREE Tech Conference 2020
(20)
.NET 7期待の新機能
.NET 7期待の新機能
2017年度 AMG Solution 会社説明会資料
2017年度 AMG Solution 会社説明会資料
楽天エンジニアライフ
楽天エンジニアライフ
Microsoft MVPとは?コミュニティ活動のすすめ
Microsoft MVPとは?コミュニティ活動のすすめ
インフラエンジニアに送る Visual Studio Code ~Azure 編~
インフラエンジニアに送る Visual Studio Code ~Azure 編~
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
私たちがGCPを使い始めた本当の理由
私たちがGCPを使い始めた本当の理由
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
.NET 7におけるBlazorの新機能
.NET 7におけるBlazorの新機能
STAC2022 ローコード開発におけるテストピラミッド考察
STAC2022 ローコード開発におけるテストピラミッド考察
スマホにおけるWebGL入門
スマホにおけるWebGL入門
チーム開発で徐々にコード品質をあげていく取り組み
チーム開発で徐々にコード品質をあげていく取り組み
Developer's summit 2021 [19-D-5]なぜ今、ローコードなのか
Developer's summit 2021 [19-D-5]なぜ今、ローコードなのか
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
PHPを使う理由
PHPを使う理由
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
javascriptの基礎
javascriptの基礎
Infragistics Ultimate 2018 Vol.2最新機能
Infragistics Ultimate 2018 Vol.2最新機能
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
More from gree_tech
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
gree_tech
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
gree_tech
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
gree_tech
アプリ起動時間高速化 ~推測するな、計測せよ~
アプリ起動時間高速化 ~推測するな、計測せよ~
gree_tech
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
gree_tech
Cloud Spanner をより便利にする運用支援ツールの紹介
Cloud Spanner をより便利にする運用支援ツールの紹介
gree_tech
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
gree_tech
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
gree_tech
海外展開と負荷試験
海外展開と負荷試験
gree_tech
翻訳QAでのテスト自動化の取り組み
翻訳QAでのテスト自動化の取り組み
gree_tech
組み込み開発のテストとゲーム開発のテストの違い
組み込み開発のテストとゲーム開発のテストの違い
gree_tech
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
gree_tech
データエンジニアとアナリストチーム兼務になった件について
データエンジニアとアナリストチーム兼務になった件について
gree_tech
シェアドサービスとしてのデータテクノロジー
シェアドサービスとしてのデータテクノロジー
gree_tech
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
gree_tech
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
gree_tech
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
gree_tech
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
gree_tech
More from gree_tech
(20)
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
アプリ起動時間高速化 ~推測するな、計測せよ~
アプリ起動時間高速化 ~推測するな、計測せよ~
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
Cloud Spanner をより便利にする運用支援ツールの紹介
Cloud Spanner をより便利にする運用支援ツールの紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
海外展開と負荷試験
海外展開と負荷試験
翻訳QAでのテスト自動化の取り組み
翻訳QAでのテスト自動化の取り組み
組み込み開発のテストとゲーム開発のテストの違い
組み込み開発のテストとゲーム開発のテストの違い
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
データエンジニアとアナリストチーム兼務になった件について
データエンジニアとアナリストチーム兼務になった件について
シェアドサービスとしてのデータテクノロジー
シェアドサービスとしてのデータテクノロジー
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
NuxtJS + SSRで作ったGREE Tech Conference 2020
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
Download now