Webサイトパフォーマンス最適化の話 SpiceTech #spicetech

SpiceTech #1 講演:40分
https://spice-factory.connpass.com/event/48916/

弊社初勉強会。
Webサイトの表示速度を高速化の基礎部分についてお話させていただきました。
高速化を行わなければならない背景としてUXやSEOの重要性を挙げています。
その他、サイトの速度分析方法や問題箇所の洗い出し、
様々なアプローチでの高速化テクニックをご紹介しています。

以下のような方を対象に発表を行いました。
表示速度を意識したフロントエンドの実装テクニックを知りたい方
・Webサイトの高速化と聞いて何から手を付けたらいいか分からない方
・Webサイト表示速度の計測方法や画面側から改善点を発見する方法が分からない方

Transcript

1. Webサイトパフォーマンス最適化の話 SpiceTech #1 泰昌平 @ShoheiTai
2. 自己紹介 泰昌平 スパイスファクトリー株式会社 メディアインテグレーション事業部 事業部長 ・平成生まれ ・ペチパー。CakePHP, Phalcon, CMSなど ・フロントエンドの開発、最適化が好き ・趣味はダーツとバイク
3. 本日の内容 1. 何故高速化が必要なのか 2. ブラウザとHTTP 3. Webサイトが遅くなるポイント 4. Webサイトの速度分析 5. サイト高速化実装テクニック
4. Webサイトの高速化を対応したことがある人？ Question
5. 何故高速化が必要なのか 高速化は誰の為にやるんだろう？
6. Webの高速化が必要な理由 • 最低限のUXを提供 • SEO対策
7. 最低限のUXを提供
8. 速さが求められる時代になっている • モバイルユーザの増加 • 通信技術、速度の向上 • 高速なWebサービスの一般化
9. 表示速度が遅いと… • 離脱率が上がっていく • 速度に不満を持ったユーザは再訪しない • コンバージョンに悪影響 出典：How Loading Time Affects Your Bottom Line https://blog.kissmetrics.com/loading-time/
10. ユーザはもう待ってくれない
11. SEO対策
12. SEO対策 • 表示速度がページ評価の1つとなっている • クロールバジェット(crawl rate limit) ◦ クローラの活動に関わる要素 ◦ 一度のクロールで巡回する最大値
13. 検索エンジンも待ってくれない
14. ブラウザとHTTP 高速化をする前に知っておきたい知識
15. HTTPについて簡単におさらい
16. HTTPの仕組み(超要約) • HTTPはプロトコル。通信する際のフォーマット。 • サーバに情報を要求することを「リクエスト」 • 要求に対してデータを返すことを「レスポンス」 • サーバとクライアント間のやりとりは「ヘッダ」を使って細かい設 定や取り決めを伝える。
17. ブラウザはHTTPのフォーマットにもとづいて リクエスト・レスポンス・ヘッダを処理している
18. ブラウザがやっていること(超要約) ブラウザ「[URL]をリクエストします！」 サーバ「OK。レスポンス返すわ。内容はtext/html形式だよ。」 ブラウザ「HTMLならレンダリングしよう。」 ブラウザ「あ、CSSのURLがある。」 ブラウザ「[CSSのURL]をリクエストします！ text/cssでほしいな！」 サーバ「OK。text/cssで返すわ。gzip形式で圧縮して返すよー」 ブラウザ「gzip圧縮か。解凍処理しないと。。。解凍したら読み込もう。」
19. ブラウザはみんながネットをしている間 裏で膨大な処理をさばいている
20. ブラウザがやっていること(超要約) ブラウザ「1行ずつ読んでレンダリングしよう。あ、CSSのURLがある」 ブラウザ「[URL]の内容をリクエストします！ text/cssでほしいな！」 サーバ「OK。text/cssで返す わ。gzip形式で圧縮して返す よー」 ブラウザ「gzip圧縮か。解凍処理しないと。。。解凍したら読み込もう。」 ブラウザ「[URL]の内容をリクエストします！ text/cssでほしいな！」 サーバ「OK。text/cssで返す わ。gzip形式で圧縮して返す よー」 ブラウザ「gzip圧縮か。解凍処理しないと。。。解凍したら読み込もう。」 ブラウザ「[URL]の内容をリクエストします！ text/jsでほしいな！」 サーバ「OK。text/jsで返す わ。gzip形式で圧縮して返す よー」 ブラウザ「gzip圧縮か。解凍処理しないと。。。解凍したら読み込もう。」 ブラウザ「[URL]の内容をリクエストします！ text/jsでほしいな！」 サーバ「OK。text/jsで返す わ。gzip形式で圧縮して返す よー」 ブラウザ「gzip圧縮か。解凍処理しないと。。。解凍したら読み込もう。」 ブラウザ「[URL]の内容をリクエストします！ text/jsでほしいな！」 サーバ「OK。text/jsで返す わ。gzip形式で圧縮して返す よー」 ブラウザ「gzip圧縮か。解凍処理しないと。。。解凍したら読み込もう。」
21. ブラウザは裏で結構頑張っている。
22. HTTPには高速化のヒントが詰まっている。
23. ちなみに
24. HTTP2.0が登場し、 導入するだけでも高速化が図れます。
25. HTTP2.0の登場 • GoogleのSPDYプロトコルがベース。 • HTTPのボトルネックであった同時接続数の解決。 • ヘッダの圧縮。 • いきなりリソースを送りつける事ができるサーバプッシュ。 • ただし、HTTPS化が必須。サーバのスペックも必要。
26. Webサイトが遅くなるポイント
27. Webサイトが遅くなる要因 • サーバ側の設定、環境 • クライアント側の環境 • フロントエンドの実装方法 • ブラウザの問題
28. サーバ側の設定、環境 • そもそもスペックが低くて処理が遅い • 負荷分散ができていない • キャッシュが上手く使えていない • Webサーバに適切なチューニングがされていない • サーバのロケーション
29. クライアント側の環境 • 通信環境。不安定、遅い回線。 • 端末そのもののスペックが低い。 • ブラウザのスペックが低い。
30. フロントエンドの実装方法 • リクエストが多い • 画像、js、cssなどのコンテンツの容量が多い • js,cssで負荷のかかる実装がある • レンダリングブロックの発生
31. ブラウザの問題 • ブラウザの同時接続数制限(HTTP1.1の場合) ◦ 同じドメインに対する同時接続数に制限がある。 ◦ ブラウザの仕様によるが、同時接続は６まで。
32. ブラウザの問題
33. どれも速度に影響するが、 フロントエンドの影響が比較的大きい
34. 高速化のアプローチ • サーバサイドの強化 ◦ コストがかかりやすい ◦ 影響範囲が大きいため、対応の難しい場合が多い • キャッシュの利用 ◦ ファイルキャッシュ、CDNなど対応方法による • フロントエンド最適化 ◦ 比較的コストがかからない ◦ テストがしやすい
35. フロントエンドの実装を見直す事で改善が図れる
36. Webサイトの速度分析 高速化に向けた第一歩
37. サイトの状況を分析し、 ネックとなっている箇所を特定する
38. Webサイトの状況を知る • ブラウザの開発者ツール ◦ ソースコードやネットワークをチェックする。 ◦ HTTPのヘッダをチェックする。 • Webパフォーマンス計測ツールを使用する ◦ 問題点と改善案のチェック。 ◦ スコアが出るため高速化の指標になる。
39. ブラウザの開発者ツール • 多機能。全て使いこなせれば他の計測ツールは不要。 • 改善提案もしてくれるが、細かすぎるため上級者向け。 • 計測結果の共有がしづらい。
40. ブラウザの開発者ツール 知っておいてほしい機能 • 通信速度の変更。不安定な通信環境を検証。(Network) • UIのパフォーマンス計測。(Timeline) • javascriptのプロファイリング。(Profiles) • Webパフォーマンス計測。(Audits)
41. ブラウザの開発者ツール ネットワーク周り。
42. ブラウザの開発者ツール パフォーマンスの改善箇所
43. Webパフォーマンス計測ツール • Webサイトへ実際にリクエスト、レンダリングを行い、 サイトのパフォーマンスを計測してくれる。 • 改善提案が項目別に表示される為、対応がしやすい。 • スコアが表示されるので、比較や共有がしやすい。 ◦ 業務や案件でも指標として扱われることがある。
44. GTmetrix
45. GTmetrix • 基本料金は無料。有料版もあり。 • 非常に細かい分析と改善提案。 • サイトの速度を定期的に計測、メール配信してくれる。 • 計測履歴も保持しており、過去のログも参照可。 • 言語は英語のみ。 • 日本リージョンが無く、PageLoadTimeの誤差は大きい。
46. GTmetrix スコア、速度、サイズ、リクエスト数など
47. GTmetrix 項目別の指摘、対処方法
48. GTmetrix 計測履歴
49. Page Speed Insights
50. Page Speed Insights • 完全無料。 • Googleによる速度計測ツール。 • 評価項目自体は少ないが、簡潔で分かりやすい。 • レンダリングブロックを検知してくれる。 • スコアを上げることが難しい。(個人的に…)
51. Page Speed Insights 強敵：レンダリングブロック
52. 最初は気に入ったツールで 自分のWebサイトを計測してみましょう
53. Webサイトパフォーマンス改善 サーバサイド編
54. Webサーバ周りの設定
55. ブラウザキャッシュ • js,css,font,画像等の静的リソースをブラウザでキャッシュ。 • 静的リソースは毎回リクエストする必要がない。 • 初回リクエスト時にキャッシュさせることで 2回目のリクエストは発生しなくなる。 • 当然、自サイトへの初回リクエストではキャッシュが 使えないので注意。
56. ブラウザキャッシュ
57. ブラウザキャッシュ
58. ブラウザキャッシュ設定(一例) <IfModule mod_expires.c> ExpiresActive On # 初期値として全てのファイルを1秒間キャッシュする ExpiresDefault "access plus 1 seconds" # MIME Typeごとの設定 ExpiresByType text/css "access plus 1 weeks" ExpiresByType text/js "access plus 1 weeks" ExpiresByType text/javascript "access plus 1 weeks" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" </IfModule>
59. gzip圧縮 • 非圧縮のリソースを圧縮して転送することで ファイルサイズを削減することが出来る。 • 画像などの圧縮済みのものについては 容量が増える可能性があるため逆効果。 • サーバ側では圧縮コスト、クライアント側では解凍コスト発生する 為、負荷に気をつける。
60. gzip圧縮 <IfModule mod_expires.c> SetOutputFilter DEFLATE # 古いブラウザは未対応 BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html # 圧縮されているファイルを除外 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary # 圧縮対象 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/js </IfModule>
61. Webサイトパフォーマンス改善 フロントエンド実装編
62. フロントエンドの実装方針 • 徹底的にファイルサイズを落としていく。 • リクエスト周りを最適化する。 • レンダリングブロックを排除する。
63. 1.ファイルサイズを減らす施策
64. HTML5で記述を行う • 冗長だったコードを短く記述できる。 • 初期値追加による省略可能属性。
65. HTML5で記述を行う <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>
66. HTML5で記述を行う <script type="text/javascript" src="example.js"></script> <script src="example.js"></script> <link rel="stylesheet" type="text/css" href="example.css"> <link rel="stylesheet" href="example.css"> 以下は初期値として設定されるようになった。
67. 省略可能タグ • 省略できるタグは多く存在する。 • 省略できる条件を満たせば省略可能。 • foreachなどで出力するタグは特に有効。 参照：HTML5 standard https://html.spec.whatwg.org/multipage/syntax.html#optional-tags
68. 省略可能タグ • <html></html> • <head></head> • <body></body> • <tbody></tbody> • <colgroup></colgroup>
69. 省略可能タグ <!DOCTYPE html> <html> <head> <title>hoge</title> </head> <body> </body> </html> 当たり前のように書いていたタグも…
70. 省略可能タグ <!DOCTYPE html> <title>hoge</title> ここまで減らせる...!
71. 省略可能タグ(閉じタグ) </li>, </dt>, </dd>, </option>, </p>, </rt>, </rp>, </optgroup>, </tr>,</ td>, </th>, </thead>, </tfoot>, </caption>
72. 省略可能タグ(閉じタグ) <p>サンプルテキスト</p> <ul> <li>項目1</li> <li>項目2</li> </ul> <select> <option>項目1</option> <option>項目2</option> </select> よく使われるようなタグも…
73. 省略可能タグ(閉じタグ) <p>サンプルテキスト <ul> <li>項目1 <li>項目2 </ul> <select> <option>項目1 <option>項目2 </select> ここまで文字を削減できる。
74. minify • ソースコードのスペース、タブ、改行コードを取り払い、ファイル サイズを削減する。 • jsの場合は変数名なども短い文字に変換する。 • 実装時はそれほど意識する事は少なく、ツールを使用する場合 が多い。 • 慣習としてminifyされたjs,cssファイルは ◦◦.min.jsや◦◦.min.cssと命名される。
75. minify ソースを開いた時にこうなっていればminifyされている。
76. 2.リクエストの最適化施策
77. リクエストを削減する タイムラインの縦を減らしていくイメージ
78. 複数ファイルの結合 フロントで読み込むファイルを1つに結合してリクエスト数を減らす。 基本的なテクニックだけれども注意が必要。。 • 結合しすぎてファイルサイズが 大きくなり過ぎた場合は逆効果となる事がある。 • ファイルを分ける事自体はレンダリングブロック回避や 並列で読み込むことができるメリットもある。
79. jsやcssのインライン化 jsやcssをHTMLファイルに記述し、リクエストを減らす。 <style> .text-bold {font-weight: bold;} </style> <script> (function() {console.log(‘hogehoge’);})(); </script>
80. jsやcssのインライン化 小さな規模のソースであればインライン化は非常に有効。 リクエストしないので、レンダリングブロックにも効果あり。 • ただし、場合によっては保守性とトレードオフになる為、 jsやcssの設計も考慮しなければならない。 • インラインのコードが大量に増えるとHTMLが重くなり、 ページ速度が落ちる可能性がある。
81. 画像の遅延ロード • 画像がブラウザの表示範囲内になったら 画像のリクエストをさせるjsの実装。 • ページ読み込み時のリクエスト数削減が可能。 • 「jQuery Lazy Load」や「Unveil.js」で 遅延ロードは比較的簡単に実装できる。
82. リクエスト先ドメインを分散 ブラウザは1つのドメインに対する同時接続数が限られている。 その為複数のドメインへ読み込みを分散させることで、 同時にリクエスト出来る数を増やす事ができる。 • ただし、ドメインが分散しすぎると ドメインの名前解決が発生するため速度低下に繋がる。
83. CDN経由でリソースを読み込む • CDN→ContentDeliveryNetworkの略。 • コンテンツ配信に最適化されたネットワーク。 • サーバとクライアントの間に入り、コンテンツの配信を 高速化する。 • CDN上で無料公開しているjsやcssのライブラリなどもある。
84. 無料のCDNサービス - cdnjs
85. 3.レンダリングブロック対策
86. レンダリングブロック • ブラウザがHTML・CSSを読み込み、 画面表示を行うことをレンダリングと呼ぶ。 • レンダリングはHTMLを上から1行ずつ解析していくが、 途中で膨大なcssファイルやjsの読み込みが発生すると レンダリングを停止(ブロック)してしまう。 • PageSpeedInsightsで診断可能。
87. レンダリングブロック <!DOCTYPE html> <html> <head> <title>hoge</title> <!-- ここでレンダリングブロックが発生する --> <script src=”hoge.js”></script> </head> <body> ここにコンテンツが入る。 </body> </html>
88. レンダリングブロック <!DOCTYPE html> <html> <head> <title>hoge</title> </head> <body> ここにコンテンツが入る。 <!-- 主要コンテンツを読み込んだ後にscriptを読む --> <script src=”hoge.js”></script> </body> </html>
89. 様々な施策がありましたが、 いかがでしたでしょうか。
90. まとめ • 高速化の目的は最低限のUXを提供すること。 • まずはWebパフォーマンス計測ツールを利用して、 Webサイトの状況を把握する。 • 高速化は基本的に無駄を省く事で最適化を行っていく。
91. THANKS! Any questions? You can find me at ✘ facebook: shouhei.tai ✘ Twtter: @ShoheiTai