Vue.jsを全く触ったことないところから始めて、SPAのWebサービスを2ヶ月でリリースできたのだけど、同僚から「ちょっと表示が遅いですね」と言われた。それまではとにかく機能を動かすのとソースコードの見通しを悪くしないようにというのだけ気にしてて、パフォーマンスをあまり気にしていなかった。 で、少し気になって試しにGoogleのPageSpeed Insightsで計測してみたところ、なんとモバイルで26点だった。PCの方でも52点。 これはマズイと思い、いろいろ試行錯誤してモバイル72点、PCは98点まで改善したので、以下したことをまとめておく。 Google Fontsの読み込みの最適化 まずはこれ。Google Fontsはカッコイイけど、公式にあるCSSでの読み込みをするとめちゃくちゃ表示を遅くしてしまう。 AMP にも対応!Google Fonts を preload で先読み