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
Nuxtで作ったBlogサイトを高速化しようと頑張った話
Search
Yuji Teshima
October 05, 2019
Programming
0
800
Nuxtで作ったBlogサイトを高速化しようと頑張った話
Blogサイトを高速化しようと頑張った話です。
Yuji Teshima
October 05, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
1.7k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
660
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.1k
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
10k
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
980
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
プロンプトエンジニアリング入門
tomokusaba
2
970
object-oriented-conference-2024
fuwasegu
6
1.4k
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.2k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Building Applications with DynamoDB
mza
88
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Producing Creativity
orderedlist
PRO
335
39k
A Philosophy of Restraint
colly
195
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
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ヶ月未経験ですが、話聞いていただける方、募集中です。