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

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

株式会社ウェイブの人事部ブログです。社内の雰囲気やイベント、福利厚生などについてお伝えいたします!

株式会社ウェイブのエンジニアブログです。 エンジニアの目線から会社の話や技術的な話をしていきます。

可視化して改善せよ(開発速度編)

SRE G マネージャーの井上です。

本記事ではDevOpsに関する当社の取り組みをご紹介致します。

当社ではDORAのレポートをもとに 開発速度と信頼性の可視化して継続的に改善できる環境・仕組みを構築しております。

今回は開発速度の関してのお話です。

DORAのレポート?

DORA社がDevOpsに関して科学的なアプローチで研究したレポートです。 優秀な組織とそうではない組織について、何が違うのか、どういった取り組みをしているのかが記載されております。

DORA metrics ?

以下の4つとされています。

Aspect of software delivery Performance Elite High Medium Low
Deployment frequency On-demand(multiple deploys per day) Between once per day and once per week Between once per week and once per month Between once per month and once every six month
Lead time for changes Less than one day Between one day and one week Between one week and one month Between one month and six month
Time to restore service Less than one hour Less than one day Less than one day Between one week and one month
Change failure rate 0-15% 0-15% 0-15% 46-60%

今回は上2つを扱います。 Velocity(開発速度)の指標となっております。

ソース(2019年レポート)

www.devops-research.com

留意事項

Scrumなどでよく出てくるVelocity (ストーリーポイント消化量)と同じワードですが、切り口が異なります。 本記事では、ScrumのVelocityの話は出てきません。

WHY / なぜやるのか

何のために可視化するのでしょうか。

サービス開発において、開発速度と信頼性は非常に重要な指標となっています。 それらはDevOpsにおいて注目されている指標です。

そういった情報が感覚値のままでは「開発速度は早いのか、遅いのか」わかりません。 分からないので、改善できたしてもより適切な評価は難しいと思います。

そこで先人の知恵を借りて可視化することで 開発チームが自律的に継続的に改善できることを期待しています。

HOW / どうやるのか

当社ではGitlab CEを利用した開発を行なっております。 CI/CD は gitlab-runner を利用しております。

そのため、開発速度を可視化するためのソースはGitlabから抽出しています。 SaaS版GitlabのUltimateではすでにDORA metricsが提供されておりますが、当社ではCE版のため自作致しました。

前提条件

当社の開発環境

  • Gitlab
  • CI/CD .. Gitlab runner

用語

  • Merge Request (MR)

定義

可視化するに当たって当社で定義した内容は下記の通りです。

deployments frequency

  • 1日あたりの本番環境への平均デプロイ回数

参照データ

  • Gitlabで管理されているdeployments(デプロイすると作成されるレコード)を利用

lead time for changes

  • MR がmaster branchにマージされてから、本番に反映されるまでの平均時間

f:id:sys_wwwave:20210604102316j:plain
lead-time-for-changes の計測範囲

参照データ

master branchにマージされた時刻
  • master branchにコミットが作成された時刻
本番に反映された時刻
  • Gitlabで管理されているdeploymentsのdeployが終わった時刻

アーキテクチャ

f:id:sys_wwwave:20210604120931j:plain
architecture

Result / 結果

当社ではサービス開発チームは複数ございます。 今回はその中の1チームをご紹介致します。

算出期間

計測開始 計測終了
2018/11/29 2021/05/20

Deployments frequency

項目 単位
データ数 2000+ count
平均本番反映回数/日(週5) 3.1 counts

計算を単純化するために祝日は含まず。1週間5営業日で計算しています。 (祝日は非営業日です)

Lead time for changes

項目 単位
平均 159 min(分)
中央値 97 min(分)
データ数 2000+ counts
MR本番反映数/日(週5) 3.6 counts

ヒストグラム

f:id:sys_wwwave:20210604102425p:plain
lead-time-for-changes ヒストグラム

分布

0-125(min) 0-250(min)
73.62% 93.98%

250分以内に94%程度のMRが本番反映されていることがわかりました。

時系列(Y軸対数)

f:id:sys_wwwave:20210604102455p:plain
lead-time-for-changes 時系列(Y軸対数)

時間の経過とともに安定してきていることが分かります。

開発チームの立ち位置

冒頭に記載したDORA metricsのElite Performers に属することが分かりました。 2019年のレポートによると、当社の開発チームは上位20%のEliteに属することがわかりました。

可視化してレポートの情報と比較することで開発速度がどのようなものか見えてきました。

最新状態が可視化されることで、ディスカッションしやすい状態になりました。 これまで数多の改善をしてきましたが、可視化したことで新たな改善項目が挙がっております。 私たちは現状に満足せずにさらなる開発速度向上を推進していきます。

最後に

私たちと一緒にスピード感のあるサービス開発をしませんか?

以上、SREからのご報告でした。

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化移行も行なっているので、別途ご紹介できたらと思います😀

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

トップに戻る