この記事はAteam Brides Inc. Advent Calendar 2019 3日目の記事です。
はじめに
新卒2年目エンジニアの@fussy113です！
半年ほど前から、今年の1月にローンチされたRailsで作られたWebサービスのサイト改善、新規機能の開発を行なっています。
7月ごろの話になるのですが、サイト改善の一環で、CDNを利用した速度改善を行いました。
その話を例にエンジニアからのサービス改善の提案の仕方を紹介していきたいと思います。
この記事のターゲット
- 提案がなかなか通らず悩んでいるかた
- これから速度改善を考えているエンジニア
進め方の一つ参考になればと思います。
実装までに進めたこと
重要なのは大項目の3つをしっかり行うことです。
- 課題の要因分析
- 何が課題なのかをきちんと把握すべし
- 課題の解決方法の模索
- できる方法はできる限り洗い出すべし
- PMへの提案
- GOサインを貰うための調査はきちんと行うべし
課題の要因分析
いざ課題の要因分析をするぞ！となった時、どうしますか？
とりあえず当たりをつけて、猪突猛進にその解決に勤しむ、、、というのは少々危険性が高く感じます。
ページスピードを例に上げると、ページが遅いという課題には多くのボトルネックとなりうる箇所が存在します。
- フロントエンド
- 画像のサイズが大きいこと
- minifyしていない
- バックエンド
- ロジック部分の計算量が大変なことになっている
- SQLの問題
並べていくとまだあると思います。その中で本当は何が要因となって課題が生じているのかを調査をすることは大切です。
その理由は主に2つあると考えています。
- どこを改善することがインパクトとして大きいのかを把握する
-
着手したとこ、全然ボトルネックじゃなかったよ...は防ぐべきです。
-
- 複数ボトルネックを見つけた場合、優先度をつけて先々を見込むことができる。
調べる方法としては、ページスピード改善ならRailsのGemやChromeの開発者コンソールなどがありますね。
私は他のエンジニアの手を借りつつ調査を進め、サイズが大きい画像ファイルが表示されていることが主な改善ポイントであることを突き止めました。
課題の解決方法の模索
課題解決案を出すにあたって、会社のリードエンジニアにも手を借りながら、以下を実践しました。
- とりあえず工数、費用は考えず解決のためにできる方法を列挙するだけ列挙する(発散)
- 列挙したものを工数、費用、メリット、デメリットをまとめ、最適な方法を絞り込む(収束)
2で挙げている、最適な方法は、サービスの規模や状況によって異なると思っています。
私の場合、それぞれを下記をいったんは考えました。
- できる方法
- S3に上がっている画像のサイズが大きいのでアップロード時にリサイズをかける方法
- CDNを使って画像をキャッシングして取得する方法
- ページで画像を取得時に画像サイズにリサイズをかける方法
- S3の画像アップロード時にリサイズをかけ、かつCDNを併用する方法(1 + 2)
- 元の大きな画像をリサイズしCDNを使ってキャッシングする方法(2 + 3)
そのうち、既にアップロードされている画像を別途リサイズする工数などを考えた結果、2、3、5の方法に絞り込み、大きな手間がかからず最大のインパクトがありそうな5の案で考えました。
次に、CDNサービスとして何を利用するか、費用に関して考えました。FastlyやAkamaiなど多くのサービスがある中で、Cloudfrontを利用することに決めました。選定した理由としては、下記です。
- 比較的新規のサービスでありまだまだ規模が小さいこと
- 比較的安価であること
- もともとAWSを利用しているため、運用コストが最小に収まるのではないか。
少ない工数で最大のインパクトを出す、現状のサービスに合わせることを考え、どのように実装するかを検討していくことが大切と考えます。
提案するための材料を集めること
実装方法まで決まってしまえばあとは実装進めてく。。。では無く、もちろんプロジェクトの責任者に対して承認をとっていきます。
提案の際、GOサインを貰うために、判断をしてもらうための材料をこれまでのプロセスの中からかき集めて持っていきます。
- その課題はどんなことに影響があるのか
- その課題を解決するためにはどれくらいの工数、費用がかかるのかをきちんと伝えること
- その課題を解決することで、どれだけの効果(インパクト)が得られるのか
速度改善を例として、上記3点を文章に落とし込んでみます。
「ページの読み込みが遅いことで、ユーザーの離脱に繋がっている。」
「今月内に月額およそ~円くらいの費用で解決ができる。」
「これにより離脱率が低下する、さらにサイトのSEO評価も改善され、CVに繋がるので実施をしたいです。」
上記の3つを進めた結果として、私は無事実装に向けて動き出すことができるようになりました。
まとめ
提案のための3つのプロセスと要点です。
- 課題の要因分析
- 何が課題なのかをきちんと把握すべし
- 課題の解決方法の模索
- できる方法はできる限り洗い出すべし
- PMへの提案
- GOサインを貰うための調査はきちんと行うべし
もっと細かかったりするかもしれませんが、大筋はブレないかと思います。
終わりに
いかがだったでしょうか？
提案の進め方の一つの参考、また事業部付のエンジニアの働き方の一つとして、参考になれば幸いです。
速度改善の実装に関しては、ちょっと間に合わなかったのでうまくまとめきることが出来なかったため、12/8に投稿します。よければそちらも呼んでください！
また個人として、スマートスピーカーアドベントカレンダーにも参加します。こちらも興味あればぜひよろしくお願いします！
私たちのチームで働きませんか？
エイチームは、インターネットを使った多様な事業を展開する名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！
上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずはチャットでざっくばらんに話をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！
Qiita Jobsよりメッセージお待ちしております！