PageSpeed Insightsの結果を30点台から70点台まで上げるまでにやったこと

はじめに

OHEYAGOの開発をしている田渕です。

OHEYAGOではページの大部分をReactでレンダリングしているので、スマホなどで見た際のパフォーマンスが問題になりやすいです。
SEOにも悪影響がありますし、ユーザーからも「OHEYAGOが重い」という声をしばしば頂いていたので、2週間ほどかけて改善していきました。

その結果、PageSpeed Insightsの結果を30点台から70点台まで上げることに成功したので、共有します。

方針

PageSpeed Insightsの言う通りに一つずつ直していく。

youtubeの埋め込みを遅延読み込みにする

topページのyoutubeの埋め込みがかなり重いと言われているので、遅延読み込みにします。

といっても、あまり凝ったことはやっていません。
もともと動画が埋め込まれていた場所に画像を配置し、その画像を押すとモーダルが開き、そこで初めてyoutubeのiframeが描画される、という実装を行いました。

f:id:ktabuchi:20200102233953p:plain
一見動画の埋め込みだが、ただの画像
f:id:ktabuchi:20200102234018p:plain
画像を押したときに初めて描画される

画像をresponsiveにする

スマホからのアクセスとPCからのアクセスで同じ画像を使っていたため、pictureタグを用いてレスポンシブ画像に切り替えました。

静的ファイルのサイズを出来る限り小さくする

詳細は、以前記事にした通りです。

トップページで読み込まれるJavaScriptのサイズを30%近く削減できました。

結果

f:id:ktabuchi:20200102234427p:plain
2019/12/04時点でのPageSpeed Insightsの結果
f:id:ktabuchi:20200102233059p:plain
2019/12/19時点でのPageSpeed Insightsの結果

見ての通り点数が36点から71点まで向上しました!

おわりに

まだ不十分ですが、一定の効果は出せました。社内からも、OHEYAGOが速くなったという声をいくつも頂きました。
今後も定期的に測定、改善のサイクルを回していきたいです。

とはいえ、まだ100点にはほど遠いので、またスコアの向上などに成功したら、記事にしていきたいと思います。