Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Nuxtで作ったBlogサイトを高速化しようと頑張った話
Yuji Teshima
October 05, 2019
Programming
0
380
Nuxtで作ったBlogサイトを高速化しようと頑張った話
Blogサイトを高速化しようと頑張った話です。
Yuji Teshima
October 05, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Android Compose Component - mapping.
taehwandev
0
140
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
240
Node.jsデザインパターンを読んで
mmmommm
0
2.8k
Independently together: better developer experience & App performance
bcinarli
0
180
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
Jetpack Composeでの画面遷移
iwata_n
0
190
Get Ready for Jakarta EE 10
ivargrimstad
0
2.6k
[DevTrends - Jun/2022] Arquitetura baseada em eventos
camilacampos
0
150
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
120
IE Graduation Certificate
jxck
6
4.8k
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
250
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Building Adaptive Systems
keathley
25
1.1k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Practical Orchestrator
shlominoach
178
8.6k
A Philosophy of Restraint
colly
192
15k
Docker and Python
trallard
27
1.6k
Code Reviewing Like a Champion
maltzj
506
37k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Become a Pro
speakerdeck
PRO
3
840
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Transcript
Nuxt と FirebaseでBlogサイトを 作って高速化を頑張った話 2019.10.05 名古屋初心者LT大会 #1 手島裕司
自己紹介 顔写真 39歳 未経験プログラマ 手島裕司 / Yuji Teshima つまりアマチュアです。 ・三重県四日市市生まれ →広告代理店セー
ルス→住宅設備メーカーの施工管理 →プロ グラミング面白いな→Webエンジニアなりた い→仕事辞める→9ヶ月間色々Webの勉強 する職業訓練行く(Javaが多め)→一人で好き なように勉強する(今ココ)
話す内容 ・Nuxt.js でBlogサイト作りました。 ・LightHouseでPerformanseがグリーンにならない。 ・原因の推測 ・色々試してみる ・結果発表 ・まとめ
Blog作りました https://nuxt-deploy-test-teshima.appspot.com https://github.com/yujiteshima/nuxt_blog_LT
アーキテクチャ 初期表示はSSR 初期表示以降はSPA、且 つ必要なデータは、直接 APIを叩く GraphCMS 普段のBlogのコンテンツ 管理は GraphCMSで管 理する。
初期画面表示の為 にCloudFunctionから GraphCMSへデータを 取りに行く
LightHouseしてみる
はじめに思いついたのが、Firebaseと GraphCMSのリージョンについて GraphCMSはAsiaEast(Tokyo) FirebaseFunctions & FirebaseHosting はUScentral 世界一周してるかも。
パフォーマンス改善の為にやった事、流れ ・Google Font無くす ・FontAwesomeを使っているものだけにする ・GraphCMSのリージョンをUSEastに変える ・GraphCMSからのJsonデータをFirebaseStorageに キャッシュする ・StorageのデータをGoogle Cloud Storageに直接見
に行く ・Vue-Apolloを使わなくてよくなる。 ・Imageを遅延読み込みする ・CMSで管理されている、画像データの保存先が USEastへ行ってしまった事に気づく。 ・デプロイ先をGCPの東京リージョンに変更する ・PWA対応する。
時間のかかる所はストレージに キャッシュしておく GraphCMS コンテンツ管理はCMS 画像データもCMS Blog cli で refresh commandoを叩く
無料版では変更をフッ クしてリクエストを飛ば したりできない。
現在のアーキテクチャ GraphCMS Blogのコンテンツ管 理は今まで通り。 画像の管理は GraphCMSの DB(AWS Tokyo) Blog cli
で refresh commandoを叩く Json Data gcpに直接見に 行く(JsonData) GAE(Tokyo)で SSR
結果
このBlogサイトで次にやってみたい事 ・BootStrap-vueが重い、JSを含まないBulma等のフレームワークに置き換えたい。 ・もう少しコンテンツを増やして、データ駆動でページデザインを変える試みをしてみたい。 ・CMS側を自分で作りたい。変更を保存したのイベントで、ストレージを書き換えたい。
まとめ ・ファイルサイズを減らすとFIOには効果的。 ・キャッシュすると早くなる。 ・キャッシュすると、フロントエンドサーバーで APIを叩きにいく処理を減らす事が出来る。 ・さらにGraphQLクライアントなどを全てバックエンドにもっていけばその分ファイルサイズ が軽く出来る。 ・ファイルサイズの圧縮の事ばかり考えていたら、ファイルサイズの重い物を使いたくなく なった。 ・BootStrap-vueが重い、次はBootStrap-vueをBulmaに置き換えたい
ご静聴ありがとうございました 初心者LT大会開催して頂いてありがとうございました。 39歳2ヶ月未経験ですが、話聞いていただける方、募集中です。