Bonfire Frontend #3 190124
Bonfire Frontend #3 190124
技術刷新から考えるWeb開発のプロダクティビティ改善
竹野 峻輔 / Retty 株式会社
世はフロントエンド戦国時代#yjbonfire
— sasurau4 (@sasurau4) January 24, 2019
アプリケーションの主体がサーバーからフロントへ。フロントのモデルが変わってきた。
— うだやん (@udayan28) January 24, 2019
#yjbonfire
- Rettyの現状、モノシリック & カオティック
オッ、Retty リニューアルにおける技術選定のエモ話っぽい展開になりそうだ #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
短期的にパフォーマンスが上がっても中長期的で継続に失敗する
技術刷新として、バックエンドを刷新していく方針とした
パフォーマンス改善を持続的に行うための土壌を築いていく取り組み
Rettyなぜリアーキテクチャ?
— ozaki25 (@ozaki25rn) January 24, 2019
- パフォーマンス改善を持続的に行うため#yjbonfire
パフォーマンス改善を健全に継続・運用するためにプロダクティビティを改善すべし #yjbonfire
— つな (@ysktsuna) January 24, 2019
- リアーキテクチャ = プロダクティビティ改善のためにやる
- 1.凝集化と分割:システムの構成要素の役割の再整理
- 2.持続的な変更可能性の確保:ここの開発負担の軽減
凝集度/結合度は アーキテクチャのレベルでも重要 #yjbonfire
— maxmellon (@maxmellon_9039) January 24, 2019
どうやってプロダクティビティを上げていく?
- 1.コラボレーション:多角的な視点でアーキテクチャを整理する
- 2.親和性:チームとして力を集約する
変化が激しい時代では有効だと思っている技術もすぐに古くなっていく危険性があるからいつでも捨てて楽に変更できるような体制にするのが大事だな #yjbonfire
— Naturalclar (@natural_clar) January 24, 2019
プロダクトもチームも一緒に作り変えて行く。ここだ。。。 #yjbonfire
— shotaCoffee (@shota_coffee) January 24, 2019
「良い問題設定は様々な解決を与えてくれる」、いやほんとそれですなぁ #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
チームも作り変えると考え方が変わりそうなので良さげ
— うだやん (@udayan28) January 24, 2019
#yjbonfire
ユーザログ機構をフロントエンドにうまく統合する
Retty、Vue.js使っている #yjbonfire
— Oyama_Michinoku (@yamanoku) January 24, 2019
- データの人がフロントの人に開発サイクルのコンテキストを共有し、相談することで、データの流れ方を基準に役割を分けるとうまく分割できた
- コンポーネントを汚さないログ設計が可能になった
アプリケーションデータは親から孫へ、ユーザイベントデータは孫から親へ #yjbonfire
— se1yn (@backer0000) January 24, 2019
フロントエンドとバックエンドの共同作業
sakito氏 @sakito 僕たちフロントエンドはデザイナー、バックエンド、PMとコミュケーションとって仲良くすることで設計が洗練されるのだ!!#yjbonfire
フロントエンドとバックエンドの共同作業
— Naturalclar (@natural_clar) January 24, 2019
技術選定をチームと共有、知識の伝搬。
うちも毎週の勉強会とかがそれにあたるなー#yjbonfire
まとめ
- プロダクティビティ=ヒト×モノ
- 技術的な分割 ≠ 安易な責任の分割
技術的な分割 = 安易な責任の分割とせずに、いいかんじに越境しながらやっていく。いい〆だった。 #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
フロントエンドとバックエンドがそれぞれの境界を超えて協力できればきれいな設計になるというお話…でいいのかな? #yjbonfire
— くりむ🌖 (@klim0303) January 24, 2019
Blog
一休.comのフロントエンドパフォーマンス改善
宇都宮 諒 / 株式会社一休
スライド
パフォーマンスの計測
ECサイト、メディアサイトのパフォーマンス最適化のはなし #yjbonfire
— うだやん (@udayan28) January 24, 2019
- 最適なパフォーマンスとは?
- フロントエンドにおけるパフォーマンス計測のデファクトスタンダードは Lighthouse
あぁ WebPageTest で LightHouse のテストができるのかええやん https://t.co/Xu9V4cWOlI #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
lighthouse => WebPageTestへの遷移が良い感じ #yjbonfire
— Oyama_Michinoku (@yamanoku) January 24, 2019
PS4を検索した結果
— みーた (@earlgrayMK) January 24, 2019
30以上でも意外と普通に見れる
#yjbonfire pic.twitter.com/W2YbrL4fZz
lighthouseのバージョンアップでスコアが変わったりするので定量評価すべきなるほど #yjbonfire
— resessh (@resessh7) January 24, 2019
スコアを見るか指標を見るか?
— うだやん (@udayan28) January 24, 2019
スコアの値は基準で変わっていくので、他のサイトと比べてどうかを確認することが大切 #yjbonfire
BigQueryには日本中のwebサイトのパフォーマンス結果のデータセットが用意されていたりするので、そこからざっくり調べることも可能https://t.co/lHVL47yWpb #yjbonfire
— たけっぱ (@takegue) January 24, 2019
ひよっこエンジニア的にはLighthouse使って自前のブログを治すだけでパフォーマンスの勉強になるところがいい #yjbonfire
— Shagamii (@RyuichiSakagami) January 24, 2019
パフォーマンスの最適化戦略
- Webサービス最適化は、遅い要素を減らして早くする
- 「遅い」要素とは
- サイズの大きな画像、フォント
- JavaScript
- 大量のHTTPリクエスト
- 重いDBアクセス
画像サイズが重要。
— いしまるじゃけ (@tsugu_maru_san) January 24, 2019
Imgixを利用。
#yjbonfire
imgix, これか #yjbonfire / imgix • Real-time image processing and image CDN https://t.co/ee0DF3JYQs
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
imgixすごいよなあ #yjbonfire
— あざらし (@shqld) January 24, 2019
キャッシュ戦略と聞くとmizchiさんのこれを思い出すhttps://t.co/Lv4InqGT1E#yjbonfire
— sasurau4 (@sasurau4) January 24, 2019
パフォーマンス上げるためにはアーキテクチャ選択が重要。 #yjbonfire
— うだやん (@udayan28) January 24, 2019
JAMSTACK
- フロントエンドのアーキテクチャパターン サーバサイドはAPIのみ * SSR はない
- SEO に懸念点がある
でたな JAMStack #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
[https://twitter.com/sakito/status/1088398699535904768:embed]
Node学園祭でも言ってたな、Dynamic Rendering #yjbonfire
— Naturalclar (@natural_clar) January 24, 2019
Dynamic Rendering https://t.co/xMToiYE19Y #yjbonfire
— Shunya Shishido (@sisidovski) January 24, 2019
nuxt, gatsbyとかSSRまでフロントエンドでやっちゃうやつもJAMstackと認識してたけど、厳密な定義は違うのかー https://t.co/2gYY3FSUTh #yjbonfire
— resessh (@resessh7) January 24, 2019
まとめ
- パフォーマンス最適化は適切な計測から始まる
- パフォーマンスの伸び代はサイトの要件次第
- 大幅なパフォーマンス改善にはアーキテクチャレベルの変更が必要
・計測するなら、ツールと仲良くなろう
— いしまるじゃけ (@tsugu_maru_san) January 24, 2019
#yjbonfire
記事
パフォーマンス改善の具体例とサービスへの売上貢献
笹原 翼 / ヤフー株式会社
- ヤフーショッピングのパフォーマンス改善(ページ表示速度アップ)
なぜパフォーマンス改善をやるのか
- 速度が速くなると、ユーザが使いやすくなり、サービスのKPIに影響する
速度が早くなるとどうなるの?表示速度が上がると売上が増加する by Amazon #yjbonfire
— うだやん (@udayan28) January 24, 2019
表示速度が0.1秒減ると、売り上げが1%上がる #yjbonfire
— Naturalclar (@natural_clar) January 24, 2019
- 速度とKPIの相関をABテストで証明する
ABテストでKPIの向上を証明
仮説立て:速度とKPIに相関があるのでは?
— いしまるじゃけ (@tsugu_maru_san) January 24, 2019
->速度とKPIの相関を調査して証明
#yjbonfire
Yahooショッピング、速度とKPIの相関をA/Bテストで証明した。ビジネス観点でパフォーマンス改善のメリットをちゃんと説明するYahooショッピングの姿勢素晴らしいな。 #yjbonfire
— Shunya Shishido (@sisidovski) January 24, 2019
どこで改善をしたのか
- SpeedCurve で速度計測 speedcurve.com 5万回まで測定できて5万円
少し古いですが、パフォーマンス改善とコンバージョンのA/BテストはFTのこの記事が詳細で学びがあります https://t.co/LDMdwb5SBj #yjbonfire
— Shunya Shishido (@sisidovski) January 24, 2019
ヤフーショッピング「速度とKPIの相関をABテストで証明することでパフォーマンス改善のリソースを勝ち取った」
— miyarappo (@miyarappo) January 24, 2019
仮説を持って検証するのが大切だよなぁ#yjbonfire
Speedcurve、RUMを使わずにsynthetic monitoringだけなら安いよね。これで0.1秒でも改善できたら余裕でペイする #yjbonfire
— Shunya Shishido (@sisidovski) January 24, 2019
どんな改善をやったのか
パフォーマンスの測定は安定した測定環境を整えるのが大事#yjbonfire
— ozaki25 (@ozaki25rn) January 24, 2019
改善の前にやること
— うだやん (@udayan28) January 24, 2019
・どの指標を見るかを決める
・安定した測定環境を整える
#yjbonfire
1日の平均を取るとかじゃなくて、手動でグラフ化してるんかーい #yjbonfire
— Naturalclar (@natural_clar) January 24, 2019
何度も聞く話だけど当て勘で問題点を探すのではなくちゃんと計測するの大事。 #yjbonfire
— kohei (@kohei_miura) January 24, 2019
どんな改善をやったのか
- 遅い、直列なAPIモジュールを非同期化
- 間違った非同期をやめる
- 画像の preload
- JS, CSS の preload
- 画像の最適化
- ハードのリプレイス、スケールアウト
- JS、CSS の軽量化
- html の圧縮形式を変える
SpeedCurve, Redash や Slack に連携できるときいて胸が熱くなるな #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019
小さな改善の積み重ねでパフォーマンス改善されるんだなって感じる#yjbonfire
— ozaki25 (@ozaki25rn) January 24, 2019
どんな効果があったのか
- 表示速度が競合3社の中で 3位 から 2位に向上した!
- SEO にも良い影響
速度を上げるとクロール量も増加する #yjbonfire
— うだやん (@udayan28) January 24, 2019
我々がやることリスト!
したくてしたくてたまんない!
— みーた (@earlgrayMK) January 24, 2019
速度改善やっていき!💪#yjbonfire pic.twitter.com/zkwd5f87jj
パフォーマンスチューニングとコードベースの健全性と事業の加速のどこにいま傾倒しようとしてるのかってのを事あるごとに意識してきたいなあ #yjbonfire
— 北宇治高校の壁のシミ (@cheezenaan) January 24, 2019