Nuxtで作ったBlogサイトを高速化しようと頑張った話

Blogサイトを高速化しようと頑張った話です。

Transcript

1. Nuxt と FirebaseでBlogサイトを 作って高速化を頑張った話 2019.10.05 名古屋初心者LT大会 #1 手島裕司
2. 自己紹介 顔写真 39歳　未経験プログラマ 手島裕司 / Yuji Teshima つまりアマチュアです。 ・三重県四日市市生まれ →広告代理店セー ルス→住宅設備メーカーの施工管理 →プロ グラミング面白いな→Webエンジニアなりた い→仕事辞める→9ヶ月間色々Webの勉強 する職業訓練行く(Javaが多め)→一人で好き なように勉強する(今ココ)
3. 話す内容 ・Nuxt.js でBlogサイト作りました。 ・LightHouseでPerformanseがグリーンにならない。 ・原因の推測 ・色々試してみる ・結果発表 ・まとめ
4. Blog作りました https://nuxt-deploy-test-teshima.appspot.com https://github.com/yujiteshima/nuxt_blog_LT
5. アーキテクチャ 初期表示はSSR 初期表示以降はSPA、且 つ必要なデータは、直接 APIを叩く GraphCMS 普段のBlogのコンテンツ 管理は GraphCMSで管 理する。 初期画面表示の為 にCloudFunctionから GraphCMSへデータを 取りに行く
6. LightHouseしてみる
7. はじめに思いついたのが、Firebaseと GraphCMSのリージョンについて GraphCMSはAsiaEast(Tokyo) FirebaseFunctions & FirebaseHosting はUScentral 世界一周してるかも。
8. パフォーマンス改善の為にやった事、流れ ・Google Font無くす ・FontAwesomeを使っているものだけにする ・GraphCMSのリージョンをUSEastに変える ・GraphCMSからのJsonデータをFirebaseStorageに キャッシュする ・StorageのデータをGoogle Cloud Storageに直接見 に行く ・Vue-Apolloを使わなくてよくなる。 ・Imageを遅延読み込みする ・CMSで管理されている、画像データの保存先が USEastへ行ってしまった事に気づく。 ・デプロイ先をGCPの東京リージョンに変更する ・PWA対応する。
9. 時間のかかる所はストレージに キャッシュしておく GraphCMS コンテンツ管理はCMS 画像データもCMS Blog cli で refresh commandoを叩く 無料版では変更をフッ クしてリクエストを飛ば したりできない。
10. 現在のアーキテクチャ GraphCMS Blogのコンテンツ管 理は今まで通り。 画像の管理は GraphCMSの DB(AWS Tokyo) Blog cli で refresh commandoを叩く Json Data gcpに直接見に 行く(JsonData) GAE(Tokyo)で SSR
11. 結果
12. このBlogサイトで次にやってみたい事 ・BootStrap-vueが重い、JSを含まないBulma等のフレームワークに置き換えたい。 ・もう少しコンテンツを増やして、データ駆動でページデザインを変える試みをしてみたい。 ・CMS側を自分で作りたい。変更を保存したのイベントで、ストレージを書き換えたい。
13. まとめ ・ファイルサイズを減らすとFIOには効果的。 ・キャッシュすると早くなる。 ・キャッシュすると、フロントエンドサーバーで APIを叩きにいく処理を減らす事が出来る。 ・さらにGraphQLクライアントなどを全てバックエンドにもっていけばその分ファイルサイズ が軽く出来る。 ・ファイルサイズの圧縮の事ばかり考えていたら、ファイルサイズの重い物を使いたくなく なった。 ・BootStrap-vueが重い、次はBootStrap-vueをBulmaに置き換えたい
14. ご静聴ありがとうございました 初心者LT大会開催して頂いてありがとうございました。 39歳2ヶ月未経験ですが、話聞いていただける方、募集中です。