kozzy’s blog

Ruby, Python, PHP, React.js あたりで学んだこと、記事、読んだ本のまとめなどを垂れ流しする場の予定です

Bonfire Frontend #3 190124

Bonfire Frontend #3 190124

技術刷新から考えるWeb開発のプロダクティビティ改善

竹野 峻輔 / Retty 株式会社

  • Rettyの現状、モノシリック & カオティック

  • 短期的にパフォーマンスが上がっても中長期的で継続に失敗する

  • 技術刷新として、バックエンドを刷新していく方針とした

  • パフォーマンス改善を持続的に行うための土壌を築いていく取り組み

  • アーキテクチャ = プロダクティビティ改善のためにやる
    • 1.凝集化と分割:システムの構成要素の役割の再整理
    • 2.持続的な変更可能性の確保:ここの開発負担の軽減

どうやってプロダクティビティを上げていく?

  • 1.コラボレーション:多角的な視点でアーキテクチャを整理する
  • 2.親和性:チームとして力を集約する

ユーザログ機構をフロントエンドにうまく統合する

  • データの人がフロントの人に開発サイクルのコンテキストを共有し、相談することで、データの流れ方を基準に役割を分けるとうまく分割できた

フロントエンドとバックエンドの共同作業

sakito氏 @sakito 僕たちフロントエンドはデザイナー、バックエンド、PMとコミュケーションとって仲良くすることで設計が洗練されるのだ!!#yjbonfire

まとめ

  • プロダクティビティ=ヒト×モノ
  • 技術的な分割 ≠ 安易な責任の分割

Blog

一休.comのフロントエンドパフォーマンス改善

宇都宮 諒 / 株式会社一休

スライド

slides.com

パフォーマンスの計測

パフォーマンスの最適化戦略

  • Webサービス最適化は、遅い要素を減らして早くする
  • 「遅い」要素とは
    • サイズの大きな画像、フォント
    • JavaScript
    • 大量のHTTPリクエス
    • 重いDBアクセス

JAMSTACK

[https://twitter.com/sakito/status/1088398699535904768:embed]

まとめ

  • パフォーマンス最適化は適切な計測から始まる
  • パフォーマンスの伸び代はサイトの要件次第
  • 大幅なパフォーマンス改善にはアーキテクチャレベルの変更が必要

記事

user-first.ikyu.co.jp

パフォーマンス改善の具体例とサービスへの売上貢献

笹原 翼 / ヤフー株式会社

  • ヤフーショッピングのパフォーマンス改善(ページ表示速度アップ)

なぜパフォーマンス改善をやるのか

  • 速度が速くなると、ユーザが使いやすくなり、サービスのKPIに影響する

  • 速度とKPIの相関をABテストで証明する

ABテストでKPIの向上を証明

どこで改善をしたのか

  • SpeedCurve で速度計測 speedcurve.com 5万回まで測定できて5万円

どんな改善をやったのか

どんな改善をやったのか

  • 遅い、直列なAPIモジュールを非同期化
  • 間違った非同期をやめる
  • 画像の preload
  • JS, CSS の preload
  • 画像の最適化
  • ハードのリプレイス、スケールアウト
  • JS、CSS の軽量化
  • html の圧縮形式を変える

どんな効果があったのか

  • 表示速度が競合3社の中で 3位 から 2位に向上した!
  • SEO にも良い影響

我々がやることリスト!