はじめに
OHEYAGOの開発をしている田渕です。
OHEYAGOではページの大部分をReactでレンダリングしているので、スマホなどで見た際のパフォーマンスが問題になりやすいです。
SEOにも悪影響がありますし、ユーザーからも「OHEYAGOが重い」という声をしばしば頂いていたので、2週間ほどかけて改善していきました。
その結果、PageSpeed Insightsの結果を30点台から70点台まで上げることに成功したので、共有します。
方針
PageSpeed Insightsの言う通りに一つずつ直していく。
youtubeの埋め込みを遅延読み込みにする
topページのyoutubeの埋め込みがかなり重いと言われているので、遅延読み込みにします。
といっても、あまり凝ったことはやっていません。
もともと動画が埋め込まれていた場所に画像を配置し、その画像を押すとモーダルが開き、そこで初めてyoutubeのiframeが描画される、という実装を行いました。
画像をresponsiveにする
スマホからのアクセスとPCからのアクセスで同じ画像を使っていたため、pictureタグを用いてレスポンシブ画像に切り替えました。
静的ファイルのサイズを出来る限り小さくする
詳細は、以前記事にした通りです。
トップページで読み込まれるJavaScriptのサイズを30％近く削減できました。
結果
見ての通り点数が36点から71点まで向上しました！
おわりに
まだ不十分ですが、一定の効果は出せました。社内からも、OHEYAGOが速くなったという声をいくつも頂きました。
今後も定期的に測定、改善のサイクルを回していきたいです。
とはいえ、まだ100点にはほど遠いので、またスコアの向上などに成功したら、記事にしていきたいと思います。
