はじめに
ウェイブのKSです！！
弊社運営サイト、Coolmic では、Webサイトパフォーマンス改善がミッションとなりました。
今回は、初回対応として、影響範囲が狭く、大きな成果が出る方法で対応を行いました。
事前知識
適切なwebサイトパフォーマンス改善を行うため、最低限必要な知識は以下かと思います。
- User-centric Performance Metrics
- PageSpeed Insights
- ブラウザレンダリングの仕組み
- Chrome DevTools Performance の使い方
レンダリングの仕組みについては、ぜひ、前回の記事も合わせてご覧ください🤗
目標
具体的なミッション内容は以下です。
- ミッション：TopページのFPを1秒にする。
サイトアクセス時、画面が真っ白な時間がかなり長いため、FP改善が目標となりました。
要件としては、ファーストビューを早くし、読み込み中とユーザーに認識させることです。
現状把握
PageSpeed Insights
まずは、目標とのギャップの確認です。
3秒以上の改善が必要とわかりました。
| 点数 | FP |
|---|---|
 |
 |
Chrome DevTools Performance
次に、どこに原因があるかの調査を行いました。
今回は、外部リソース（JS）のダウンロード、実行までが大半を占めていることが判明いたしました😓
外部リソースの正体
以下のように属性未指定で使用しているscriptタグでした。 HTML Parseをブロックしているため、main.jsの実行が完了するまで、画面が真っ白な状態になっておりました😨
<script src="//en-assets.coolmic.me/main.js"></script>
改善方法検討
要件を満たしつつ最適な改善を行うため、以下の案で対応を行いました。
- main.jsを非同期ダウンロード、実行にする
- ファーストビューのデザインはSSRにする
すべてVue.jsでCSRをしていたため、ファーストビューで必要なデザインはSSRで対応致しました。
具体的な対応イメージは以下となります。
改善結果
PageSpeed Insights
気になる点数は、一気に跳ね上がりました🙌
ただし、残念ながら一発では目標となる数値には届かず。。。
別途、改善が必要となります。
| 点数 | FP |
|---|---|
 |
 |
Chrome DevTools Performance
無事に、目標通りの結果となっております。
main.jsの実行前に、FPのタイミングとなりました。
おわりに
初回対応としては、いい結果になったかと思います。
改善結果が数値として出てくるのは嬉しいですね。
ただ、ここからの改善がなかなかやっかいです💪
初回アクセス時の体感は早くなったかと思いますが、改善が必要な箇所はまだまだあります。
現在、サイト全体のSPA化移行も行なっているので、別途ご紹介できたらと思います😀
質問、大歓迎ですので、お気軽にコメントしていただけたらと思います！！！
