wwwave'sTechblog |ウェイブのエンジニアブログ

株式会社ウェイブのエンジニアによるテックブログです。会社の話や Ruby、Vue.jsについてなど技術的な話をしていきたいと思います。

Coolmic webサイトパフォーマンス改善してみた 〜 FP 1秒への道 〜

f:id:sys_wwwave:20200331184540p:plain

はじめに

ウェイブのKSです!!
弊社運営サイト、Coolmic では、Webサイトパフォーマンス改善がミッションとなりました。
今回は、初回対応として、影響範囲が狭く、大きな成果が出る方法で対応を行いました。

事前知識

適切なwebサイトパフォーマンス改善を行うため、最低限必要な知識は以下かと思います。

レンダリングの仕組みについては、ぜひ、前回の記事も合わせてご覧ください🤗

目標

具体的なミッション内容は以下です。

  • ミッション:TopページのFPを1秒にする。

サイトアクセス時、画面が真っ白な時間がかなり長いため、FP改善が目標となりました。
要件としては、ファーストビューを早くし、読み込み中とユーザーに認識させることです。

現状把握

PageSpeed Insights

まずは、目標とのギャップの確認です。
3秒以上の改善が必要とわかりました。

点数 FP
f:id:sys_wwwave:20200331155241p:plain f:id:sys_wwwave:20200331155254p:plain

Chrome DevTools Performance

次に、どこに原因があるかの調査を行いました。
今回は、外部リソース(JS)のダウンロード、実行までが大半を占めていることが判明いたしました😓

f:id:sys_wwwave:20200331160035p:plain

外部リソースの正体

以下のように属性未指定で使用しているscriptタグでした。 HTML Parseをブロックしているため、main.jsの実行が完了するまで、画面が真っ白な状態になっておりました😨

<script src="//en-assets.coolmic.me/main.js"></script>

改善方法検討

要件を満たしつつ最適な改善を行うため、以下の案で対応を行いました。

  • main.jsを非同期ダウンロード、実行にする
  • ファーストビューのデザインはSSRにする

すべてVue.jsでCSRをしていたため、ファーストビューで必要なデザインはSSRで対応致しました。
具体的な対応イメージは以下となります。

f:id:sys_wwwave:20200331165530p:plain

改善結果

PageSpeed Insights

気になる点数は、一気に跳ね上がりました🙌
ただし、残念ながら一発では目標となる数値には届かず。。。
別途、改善が必要となります。

点数 FP
f:id:sys_wwwave:20200331163903p:plain f:id:sys_wwwave:20200331163915p:plain

Chrome DevTools Performance

無事に、目標通りの結果となっております。
main.jsの実行前に、FPのタイミングとなりました。

f:id:sys_wwwave:20200331164116p:plain

おわりに

初回対応としては、いい結果になったかと思います。
改善結果が数値として出てくるのは嬉しいですね。
ただ、ここからの改善がなかなかやっかいです💪

初回アクセス時の体感は早くなったかと思いますが、改善が必要な箇所はまだまだあります。
現在、サイト全体のSPA化移行も行なっているので、別途ご紹介できたらと思います😀

質問、大歓迎ですので、お気軽にコメントしていただけたらと思います!!!

トップに戻る