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