この記事は スターフェスティバル スターフェスティバル Advent Calendar 2022の19日目の記事です。
最初に
こんにちは！
ミーティングで最初に元気よく挨拶すると元気な挨拶が返ってくるという事に気づきました。元気なこんにちは！は気持ちが良いです。
という事で、こんにちは！スターフェスティバル株式会社でお弁当・ケータリングを中心とした「食」の総合デリバリーモールのごちクルを担当しています。こんぺいです！
昨日は、いつも元気に挨拶してくれるあひるさんの素敵な2年間の軌跡がでした。
あっという間の2年間ですが、Joinしてくれて色々あったけど楽しかったなぁと感慨深くなりました。これからもよろしくお願いします。
今日はその記事にもあったごちクルというプロダクトのCore Web Vitals(以下CWV)の話になります。
Core Web Vitals とは
Googleが提唱するWebページのパフォーマンスの3つ指標を指します。
詳しくはウェブに関する主な指標レポートに書いてありますが、一言で言うのであれば
- LCP (Largest Contentful Paint) 最大のコンテンツ要素が表示されるまでの時間
- FID (First Input Delay) ユーザーの最初の操作からブラウザが反応する時間
- CLS (Cumulative Layout Shift) レイアウトのズレの大きさ
の3つの指標のことを指します。
ごちクルについて
ごちクルはバックエンドはPHP(Laravel)とVue.jsで作られています。
お弁当やケータリングなどの食のECサイトとして、約10年以上前にできたプロダクトです。その当時はCakePHPとjQueryで作成されており、3年半ほど前にデザインのリニューアルでLaravel + Vue.jsにリプレイスしました。
リニューアル時点ではCWVは無かった指標であり、当たり前ですが考えられた設計ができていません。
CWVが発表された当時、なんとか悪くない数字を目指してあまり大きな改良をしなかった為、ほとんどのページがギリギリ良いという評価にとどまる状況でした。
と言うのも、10年以上続いているプロダクトというのは、難解なビジネスロジックが含まれていたり、コードからは背景が読めなかったり、一時的な処理がずっと残っていたりするもので、仕様を変更するにはステークホルダーが不明で変更していいのか判断がつかないものも多かったです。
また、対応するのもスケジュール的にも大幅な改善は難しく、クリティカルな部分だけの修正を行ないました。
CWV対応
まずは分析
何が問題なのかをはっきりさせる事をやりました。
Google Search Console(以下GSC)から悪いURLがわかっているので、そのURLを確認しました。
それだけだとどのスコアが悪いというのがわからないのでPageSpeed Insights(以下PSI)で細かい事を見ていきます。
各ページでの問題として、画像や要素の幅や高さが指定されていない箇所があったり、画像自体が重かったりした所があるのがこれでわかります。
各ページ対応
共通の課題と各ページ固有の課題に分けて対応です。
まずとっかかりがやりやすい各ページ固有の課題の対応です。
実際やってみて、効果測定をやりながらするのがいいよねという風に考えて、すぐ出来そうな所から対応・テスト・リリースというリファクタリングを短期間で繰り返して行く作戦をとりました。
エンジニア以外にも画像ではjpgファイルをwebpファイルに置き換えるなどの対応でデザイナーにも協力をお願いしたりと色々を巻きこみ、着実に成果が出てきました。
とはいえ、抜本的な改善が必要だという事になり各ページの対応もやりながら、共通の課題の対応を行います。
共通課題
目に見えてヤバい所は全ページで読み込んでいたJSのサイズです。
全てのJSが巨大な1ファイルになっており、これがほぼ全てのページで読み込まれています。
これがLCPに大きな影響与えています。
シンプルに考えて、必要なものを必要な所で読み込むようにするのが良いので、JSを分割するようにしました。
ファイル数は増えましたがかなりの効果があり、数字がだいぶ良くなっていきました。
このJS分割はかなり効果的で、JSが読み込まれるスピードが上がったので表示速度が上がり、サイト全体の表示速度が体感できるレベルで上がりました。
まさかの課題が発生
そういう対応を行なって数字が良化していたのですが、なぜか急激に数字が悪くなっていきました。
それも、今まで問題がなかったページが急に、です。
このページは検索ページで、クエリパラメータで指定されたデータを出しているのでページ数が膨大にあり、全体ページ数における割合も高く、みるみる内にスコアが悪くなっています。
原因
思い当たる節が全くなく、影響範囲を考えたらやった事はJS分割くらい。
しかし、なぜ今になって急に出てきたのか・・・。
結局原因は特定できなかったのですが、仮説として、「JS分割前は表示が遅すぎて解析されていなのではないか」という事になりました。
どういうことかと言いますとこのような図のようなイメージです。
仮説を裏付けるように、Chromeのdeveloperモードでスロットリングを低速 3Gで確認すると前の状態だとほとんど表示されません。
JS分割で読み込みが早くなったから、不良ページにカウントされてしまったようです。
対応
こちらはすぐさま修正し対応しましたが、CWVの数字が反映されるのに1〜2週間かかるようで、2週間かけて数字が悪くなっていき、また2週間かけて段々良くなって行ったので結果として1ヶ月くらい悪い状態が続きました。下記図の緑のラインが良好ページです。
まとめ
CWVの対応をする事でサイトの表示速度を改善できたのは良かったです。
ただ、次から次へと課題が生まれ結構大変だったので、常日頃からパフォーマンスを気にして開発していく必要があると思いました。
こちらの対応には、株式会社シンシア様・株式会社ラスファクトリー様に協力いただきました。
普段開発に追われ分析や対応が出来ないのですが、ラボ型開発で全般的に手伝っていただき助かりました。
歴史あるプロダクトに理解があり、泥臭い作業をお願いしたにも関わらず笑顔で迅速に対応していただけたので感謝しかないです。
本当にありがとうございました！
採用について
弊社では一緒に開発する仲間を絶賛募集中です！
ごちクルのように歴史のあるプロダクトを触る機会も新しいプロダクトを触る機会もどちらもあるので飽きる事のない楽しい日々が過ごせます！
まずはカジュアルにお話しなどいかがでしょうか？
少しでも気になった方がいれば、気軽にご相談・ご応募お待ちしております！
Discussion