Re-think about Web Performance
-
Upload
sensui-shogo -
Category
Technology
-
view
211 -
download
1
Transcript of Re-think about Web Performance
![Page 1: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/1.jpg)
Frontrend in Nagoya 2014/6/21 @1000ch
![Page 2: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/2.jpg)
![Page 3: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/3.jpg)
Performance Evangelist
パフォーマンス改善および推進活動
![Page 4: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/4.jpg)
名古屋初上陸!
![Page 5: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/5.jpg)
Google I/O 2014 参加してきます!
![Page 6: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/6.jpg)
Webフロントエンド最前線 新連載始まります!
![Page 7: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/7.jpg)
![Page 8: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/8.jpg)
![Page 9: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/9.jpg)
To me, performance is a feature, and I simply like using fast websites more than slow websites, so naturally I'm going to build a site that I would want to use. But I think there's also a lesson to be learned here about the competitive
landscape of the public internet, where there are two kinds of websites: the quick and the dead.
Performance is a Feature http://blog.codinghorror.com/performance-is-a-feature/
![Page 10: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/10.jpg)
パフォーマンスは
機能の1つである。
![Page 11: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/11.jpg)
この世には2種類のWebサイトしかない。
早いか、死んでいるかのどちらかだ。
![Page 12: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/12.jpg)
パフォーマンスを軸にした ユーザー体験の差…
![Page 13: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/13.jpg)
ページが1秒で表示されると…
![Page 14: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/14.jpg)
3秒経ってもページが表示されないと…
![Page 15: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/15.jpg)
約60%のユーザーが離脱する その内80%は2度と戻ってこない
![Page 16: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/16.jpg)
ページビューの低下
ECサイトであれば売上の低下
各種コンバージョン
当たり前だけど、デメリットしかない
![Page 17: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/17.jpg)
いくらコンテンツが良くても遅いサイトにユーザーは来ない
![Page 18: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/18.jpg)
Webパフォーマンスの3大要素
Render ComputeNetwork
![Page 19: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/19.jpg)
Network (リソース取得関連)
Network
サーバーサイド プログラム
DNS Lookup? KeepAlive?
<img src=…> <link href=…>
![Page 20: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/20.jpg)
Render (描画関連)
Render
CSS3
CPU or GPU
Render Tree = DOM + CSSOM
![Page 21: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/21.jpg)
Compute (JS実行関連)
Compute
V8? JIT Compile?
Garbage Collection
物理演算処理
![Page 22: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/22.jpg)
ページが表示されるまで
Initialize Process
RenderNetwork Compute
![Page 23: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/23.jpg)
閲覧中・ページを閉じるまで
Runtime Process
Render ComputeNetwork
![Page 24: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/24.jpg)
![Page 25: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/25.jpg)
Amebaあるある
![Page 26: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/26.jpg)
プランナー ディベロッパー
ここにコンテンツを 追加したいです!
(どんどんページが縦長になっていく…)
![Page 27: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/27.jpg)
エンジニア ディベロッパー
サーバーサイドの 実装終わりましたー!
(このAPIまとめて欲しかった…)
![Page 28: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/28.jpg)
パフォーマンスに対する開発者の意識の欠落…
![Page 29: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/29.jpg)
プランナー ディベロッパー
このスケジュールで お願いします!
(忙しくてチューニングどころじゃない…)
![Page 30: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/30.jpg)
開発負荷が高すぎてチューニングが後手に回される
![Page 31: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/31.jpg)
デザイナー ディベロッパー
ここのマージンやっぱり10pxで!
(また微調整か…)
![Page 32: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/32.jpg)
エンジニア ディベロッパー
このAPIはこう返却するようにします!
(JSONの形式変えないでくれーorz)
![Page 33: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/33.jpg)
エンジニアとデザイナーの間で板挟みになりがち
![Page 34: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/34.jpg)
招かれる結果
![Page 35: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/35.jpg)
積み上がるレガシーコード
デザインへの対応で肥大化するCSS
技術的負債
最適化せずリリースされるプロダクト
![Page 36: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/36.jpg)
頻繁に行われるデザインリニューアル
短すぎるスケジュール
疲弊する開発者
とにかく色々とシビア
![Page 37: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/37.jpg)
後になればなるほど 修正は困難になる
![Page 38: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/38.jpg)
プロジェクト分析
![Page 39: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/39.jpg)
遷移ベースがほとんど(SPA少ない)
ゲーム系プロダクトは特に運用が辛い
サービスの分布
ガラケーに対応している古参サービスも
![Page 40: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/40.jpg)
イニシャルコストを最適化出来ていない
大量のサードパーティモジュール
コードの状態
長きに渡ったプロジェクトの負の遺産
![Page 41: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/41.jpg)
結構大変…orz
![Page 42: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/42.jpg)
![Page 43: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/43.jpg)
各方面と 対話してもらう
![Page 44: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/44.jpg)
「ボタンの余白、統一して!」
「この影ならCSSで出来るんですが!」
対デザイナー例
「画像の要らないテクスチャに!」
![Page 45: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/45.jpg)
「ビルドフローに●●を含めて!」
「このレスポンス早くなりませんか!」
対エンジニア例
「キャッシュを効かせて!」
![Page 46: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/46.jpg)
パフォーマンスに対する 意識を植え付ける
+ フロントエンドで(ある程度)
イニシアチブを取る
![Page 47: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/47.jpg)
もちろん精神論だけ ではダメなので…
![Page 48: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/48.jpg)
具体的に数値を示し 対策を提案する
![Page 49: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/49.jpg)
各種計測ツールが あります
![Page 50: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/50.jpg)
PageSpeed Insights
![Page 51: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/51.jpg)
YSlow
![Page 52: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/52.jpg)
PSI
![Page 53: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/53.jpg)
Phantomas
![Page 54: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/54.jpg)
WebPageTest
![Page 55: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/55.jpg)
Kingfisher WebPageTest Private Instance
![Page 56: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/56.jpg)
社内専用のプライベートインスタンス
Ameba専用にUIをカスタマイズ
WebPageTest for
キュー待ちなし!APIキー不要!
![Page 57: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/57.jpg)
これらのツールで 実際に計測する
![Page 58: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/58.jpg)
発生している HTTPリクエストの一覧
![Page 59: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/59.jpg)
CSSや画像といったサブリソースを返却するサーバーレスポンス
HTMLを返却するサーバーレスポンス
![Page 60: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/60.jpg)
20:80
![Page 61: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/61.jpg)
HTTPリクエストは…
Render ComputeNetwork
![Page 62: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/62.jpg)
CSS・JSファイルの結合と圧縮
HTMLファイルの圧縮
ネットワーク最適化
画像の減色とメタ削除
キャッシュヘッダ・Gzip等
![Page 63: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/63.jpg)
画像の最適化、重要
![Page 64: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/64.jpg)
CSS、JSをいくら削減しても 画像の最適化を忘れれば水の泡
ファイルサイズの半分を メタ情報が占めていることもある
たかが画像されど
キービジュアルでなければ 多少の劣化は許容する判断も必要
![Page 65: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/65.jpg)
https://github.com/1000ch/compress-image
PNGの最適化
58,217 bytes 14,244 bytes
76%down
![Page 66: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/66.jpg)
https://github.com/1000ch/compress-image
JPGの最適化
141,033 bytes 14,045 bytes
90%down
![Page 67: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/67.jpg)
ImageOptim
![Page 68: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/68.jpg)
ImageAlpha
![Page 69: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/69.jpg)
grunt-image
![Page 70: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/70.jpg)
これらの対策案を プロジェクトに フィードバック
![Page 71: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/71.jpg)
@1000ch
プロジェクトBの人
ココを直して下さい!
プロジェクトAの人
![Page 72: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/72.jpg)
プロジェクトAはやってくれた
プロジェクトBはやってくれなかった
その後…
忙しさに多少の差はあれど…
![Page 73: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/73.jpg)
どうしても 属人的になる
![Page 74: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/74.jpg)
コードを直してプルリクエスト
便利ツールの作成して使ってもらう
それでもだめなので
かくなる上は最終手段…
![Page 75: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/75.jpg)
対策を義務化する
![Page 76: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/76.jpg)
レスポンス選手権
![Page 77: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/77.jpg)
ランキング付けして競争心をあおる
少しずつレスポンスを気にするように
レスポンス選手権
ストップウォッチで計測
![Page 78: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/78.jpg)
ストップウォッチ… (´・∀・`)?
![Page 79: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/79.jpg)
![Page 80: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/80.jpg)
(・×・)
![Page 81: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/81.jpg)
爆レス大会
![Page 82: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/82.jpg)
WebPageTestのプライベート版で計測
SpeedIndexとVisualCompleteが指標
爆レス大会
1日3回計測、1週毎に結果配信
1月に1度、ランキング上位に景品
![Page 83: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/83.jpg)
Speed Index
0
2500
5000
7500
10000
5月1週 5月2週 5月3週 5月4週 5月5週
プロジェクトAプロジェクトBプロジェクトC
低ければ低い程 パフォーマンス良❤
![Page 84: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/84.jpg)
Speed Index
0
2500
5000
7500
10000
5月1週 5月2週 5月3週 5月4週 5月5週
プロジェクトA
平均スコアNo.1
![Page 85: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/85.jpg)
Speed Index
0
2500
5000
7500
10000
5月1週 5月2週 5月3週 5月4週 5月5週
プロジェクトB
改善率No.1
![Page 86: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/86.jpg)
チューニンガソン
![Page 87: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/87.jpg)
運用中では改善が後手に回ってしまう
PJから数人選出して連れて行く
短期集中改善合宿
長期的にダラダラやるより集中して直す
![Page 88: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/88.jpg)
絶賛進行中…
![Page 89: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/89.jpg)
徐々に広がる パフォーマンス文化
![Page 90: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/90.jpg)
![Page 91: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/91.jpg)
パフォーマンスを 重要視する土壌が必要
![Page 92: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/92.jpg)
開発の中心だからこそ周りを巻き込んでいく
![Page 93: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/93.jpg)
パフォーマンスとの 戦いは終わらない…
![Page 94: Re-think about Web Performance](https://reader033.fdocuments.net/reader033/viewer/2022042817/55a05fa41a28ab462e8b46d9/html5/thumbnails/94.jpg)