速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
•
3 gostaram•2,076 visualizações
第2回【関西ITベンチャー】開発ツール チラ見せ♡ナイト@大阪 でプレゼンした資料になります。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a 速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
Semelhante a 速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて (20)
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
- 2. ⾃自⼰己紹介 • ⽟玉⽥田⼤大輔(31) • LAMP (Perl & PHP) エンジニア • 認定 Scrum Master • Scrum Masters Night 運営メンバ • エンジニア採⽤用担当 • DeNA @ Tokyo で6年年 • Social Game等 3年年 • エンジニア採⽤用 1.5年年 • テクニカルコンサルタント 1.5年年 • akippa @ Osaka で Manager • エンジニア 兼 ScrumMaster 兼 エンジニア採⽤用担当やってます
- 4. 速度度改善ってなぜ必要？ • ユーザビリティを向上させるため • 昔GoogleがTrialで検索索結果表⽰示を10件→30件に • 0.5秒の遅延が起き、トラフィック20%低下 • Google での検索索結果を向上させるため(SEO対策) • Webページの表⽰示速度度が評価要因の1つとなっている • サーバリソースの無駄を削減させるため • 応答に時間かかる→その間サーバリソース⾷食う • 応答に時間かからない→サーバリソース⾷食わない
- 6. akippa は速度度改善バッチリできているの？？ • すいませんすいませんすいません • 改善しだしたところで道半ばでございます・・・ • TV にとりあげられることが多い akippa • リソースの無駄を省省きたい • ユーザに軽快な体験をしてもらいたい • 速度度改善と負荷対策は違うってわかってますが • 速度度改善の結果、サーバ処理理効率率率化できるかなと
- 9. 速度度改善やることリスト • リソース(HTML, CSS, JavaScript)の圧縮 • 画像の最適化 • CSS配信の最適化 • レンダリング妨げるJavaScriptを削除 • ⾮非同期スクリプトを使⽤用する • ブラウザキャッシュを活⽤用する • サーバの応答時間を改善する • サーバキャッシュを活⽤用する • Key Value Store を活⽤用する • Data Base のスキーマを⾒見見直す • アプリケーションロジックを⾒見見直す • 実⾏行行している SQL をチューニングする などなど（上記は⼀一例例）、やれることは他領領域、多岐にわたる・・・
- 11. フロント / インフラ / アプリ と分けてみた
- 13. フロントでのツール：Google Page Speed Insights
- 14. フロントでのツール：Google Page Speed Insights • モバイル / パソコン での Google からの評価わかる • 100 点満点中の何点なのか教えてくれる • 100 点に近いほど評価が⾼高い • 具体的にどう改善したら良良いか丁寧に教えてくれる • ⾔言われた通りに直すだけで速度度改善できるから楽 • デザイナー、コーダーでも対応できるレベル • 「PageSpeed Insights のルール」を読もう！ https://developers.google.com/speed/docs/insights/rules?hl=ja → 改善対応した際の before after を記録しておくのが⼤大変
- 16. フロントでのツール：GTmetrix • Google と Yahoo の サイト速度度計測サービス使える • Google Page Speed Insights と YSlow • 2つのサービスの測定結果をすぐ得られる • 計測結果を pdf でダウンロードできる !!!! • 速度度改善前と改善後の⽐比較をする際に超便便利利 !!!! • ちゃんと記録残しておいて、改善後にドヤっ !!!!
- 17. フロントでのツール：Page Speed と GTmetrix • 改善対応したい Page ごとに評価を記録しておく • pdf でスナップショットもとっておく • 機能的に重要 / 評価が低いから重要 など考える • 優先度度決めて少しずつ対応していく
- 20. インフラでのツール：New Relic • サーバー/アプリケーションの監視ツール • AWS 上の アプリケーションなら無料料で使える !!
- 21. インフラでのツール：New Relic • 遅い Transaction が何なのか概要を確認 • どの URI へのリクエストが遅いのかを把握 • 有料料で個別の詳細分析も出来るらしい・・・
- 22. インフラでのツール：New Relic • 遅い DataBase アクセスが何なのか概要を確認 • どの Table への どんな Query が遅いのかを把握
- 23. インフラでのツール：httpd の access_̲log • httpd.conf にて %D オプションを追加 • リクエストの処理理時間をマイクロ秒で出⼒力力 • ベンチマークとる • レスポンス時間が⻑⾧長く、 頻繁に来るリクエストに注⽬目
- 24. インフラでのツール：MySQL の SlowQueryLog • MySQL のコンソールに root で⼊入る • ベンチマークとる • 閾値以上の時間がかかったクエリをチェック • 頻度度の⾼高いクエリに注⽬目
- 25. インフラでの速度度改善 • New Relic を使って速度度改善すべき箇所の概要を把握 • 遅い Transaction をリストアップ • 遅い DB への Query をリストアップ • access_̲log, SlowQueryLog を使って詳細を分析 • 具体的にどんなリクエストで何秒かかっているか • 具体的にどんなQueryで何秒かかっているか • アプリの問題箇所/問題Query に対して改善⽅方法を指摘 • あとはアプリケーションエンジニアにバトンタッチ
- 28. アプリでのツール：Xhprof • PHP のプロファイラとして Xhprof を利利⽤用 • facebook のエンジニアが開発したツール • リクエスト毎にプロファイルが作成される • method 毎にcallされた数、処理理時間などがわかる
- 29. アプリでのツール：Xhprof • CallGraph というプログラム実⾏行行遷移図 • 重い処理理を⾚赤、⻩黄⾊色で可視化してくれる
- 31. アプリでのツール：miscrotime と error_̲log • 任意の処理理の実⾏行行時間をマイクロ秒で計測 • 古典的だが解りやすく、対応もしやすい • 可読性あげるため、千倍のミリ秒で出⼒力力してる
- 32. アプリでの速度度改善 • インフラから遅いTransactionを教えてもらう • 教えてもらった Transaction を Xhprof で解析 • Transaction 内での遅い method を把握 • call 数と処理理にかかった時間を参考にあたりをつける • 遅い method 内の処理理を microtime で解析 • 具体的にどんな処理理で何ミリ秒かかっているか解析 • わかった処理理に対して具体的にアプリ改善実施
- 33. 実際にアプリで速度度改善した例例 • Index が効いていない SQL の実⾏行行に時間がかかった • Query と Table Scheme みて Index を追加した • SQL で膨⼤大な結果を * 指定で取得して時間かかってた • 必要なカラムだけに絞り通信量量減らした • よく検索索される場所なのに毎回距離離計算時間かかってた • memcached に cache して計算 Skip させた
- 35. まとめ • フロント / インフラ / アプリ と役割分担で対応決めれる • フロントは Google Speed Insights & GTmetrix で 速度度改善 Project をガンガン進めていける • インフラは New Relic と access_̲log, SlowQueryLog で 問題となる Transaction と DB への Query ⾒見見つける • アプリは Xhprof と microtime で遅い処理理具体化し、 そこからは個別対応で改善施策を考えていける