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