今こそ始めるWSO - Web高速化の現状と対策テクニック

by 泰昌平@ShoheiTai

Slide 1

Slide 1 text

今こそ始めるWSO  Web高速化の現状と対策テクニック  泰昌平 @ShoheiTai

Slide 2

Slide 2 text

shouhei.tai @ShoheiTai  泰昌平スパイスファクトリー株式会社  WebArchDivision General Manager    CakePHP/ PHP / Wordpress / Rails / React.js / Node.js / GCP / SEO / WSO  ダーツ / バイク / VR / サバゲー tai-sho 

Slide 3

Slide 3 text

CMSプロレス  Redboxの小川さんと優勝  Concrete5参戦チームが立ち並ぶ中、単独Wordpressで優勝 

Slide 4

Slide 4 text

SpiceFactory ? 

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WSO Service  Redbox社と共同でWebサイトの高速化・コンサルティングを行う、WSO サービスを2018年2月に開始 

Slide 7

Slide 7 text

WSOを聞いたことある人？  Question 

Slide 8

Slide 8 text

Website Speed Optimization  WSO 

Slide 9

Slide 9 text

本日の内容  1. 何故高速化が必要なのか  2. 高速化の考え方  3. Webサイトの速度分析  4. サイト高速化実装テクニック  a. wordpressもあるよ！ 

Slide 10

Slide 10 text

WSOの現状と必要性  高速化は誰の為にやるんだろう？

Slide 11

Slide 11 text

Webの高速化が必要な理由  ● 最低限のUXを提供  ● SEO対策  ● トラフィックがモバイル主流に 

Slide 12

Slide 12 text

In fact... 

Slide 13

Slide 13 text

WSOの現状  ● 対策費用  ● サイト規模によっては工数大  ● 高速化よりも新機能開発を優先 

Slide 14

Slide 14 text

WSOの現状  ● 対策費用  ● サイト規模によっては工数大  ● 高速化よりも新機能開発を優先    決裁者の説得が困難...

Slide 15

Slide 15 text

表示速度の低下  ⇓  ビジネスへのインパクト 

Slide 16

Slide 16 text

表示速度が遅いと…  ● 離脱率が上がっていく  ● 速度に不満を持ったユーザは再訪しない  ● コンバージョンに悪影響  Source：How Loading Time Affects Your Bottom Line   https://blog.kissmetrics.com/loading-time/  

Slide 17

Slide 17 text

直帰率と表示速度の相関  Source： https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-spe ed-new-industry-benchmarks/  

Slide 18

Slide 18 text

ユーザはもう待ってくれない時代に 

Slide 19

Slide 19 text

SEO対策 

Slide 20

Slide 20 text

SEO対策  ● 表示速度がページ評価の指標の1つに  ● クロールバジェット(crawl rate limit)  ○ クローラの活動に関わる要素  ○ 一度のクロールで巡回する最大値 

Slide 21

Slide 21 text

検索エンジンも待ってくれない 

Slide 22

Slide 22 text

これからは  Webサイトの表示速度  と向き合わなければならない 

Slide 23

Slide 23 text

高速化の考え方  高速化をする前に知っておきたい知識

Slide 24

Slide 24 text

高速化のポイントは4つ 

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Web Server  ● スペックが低くて処理が遅い(TTFBが長い)  ● 負荷分散ができていない  ● キャッシュが上手く使えていない  ● Webサーバのチューニング不足  ● サーバのリージョン 

Slide 27

Slide 27 text

Browser ( Client )  ● 通信環境不安定、遅い回線   ● js,cssで負荷のかかる実装がある  ● レンダリングブロックの発生 

Slide 28

Slide 28 text

Request  ● 画像/js/cssなどのコンテンツ数が多い  ● js/cssのリソースが結合されていない  ● ファーストビューで使用しないリソースの読込 

Slide 29

Slide 29 text

Response  ● 画像サイズが大きい  ○ 適切な圧縮が行われていない  ○ 表示領域に対して画像が大きい  ● js/cssのファイルサイズが大きい   

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

何から始めたらいい？ 

Slide 32

Slide 32 text

Webサイトの速度分析  高速化に向けた第一歩

Slide 33

Slide 33 text

サイトの状況を分析し、  ネックとなっている箇所を特定する 

Slide 34

Slide 34 text

Webサイトの状況を知る  ● ブラウザの開発者ツール  ○ ソースコードやネットワークをチェック  ○ HTTPのヘッダをチェック  ● Webパフォーマンス計測ツール  ○ 問題点と改善案のチェック  ○ スコアが出るため高速化の指標になる 

Slide 35

Slide 35 text

ブラウザの開発者ツール  ● 多機能  ○ 全て使いこなせれば大体のことは分かる  ● 改善提案もしてくれるが、細かすぎるため上級者向け  ○ エンジニア向け  ● 計測結果の共有がしづらい 

Slide 36

Slide 36 text

ブラウザの開発者ツール  主な計測機能  ● 通信速度の変更不安定な通信環境を検証(Network)  ● js/renderingの負荷計測(Performance)  ● Webパフォーマンス計測(Audits)  ○ Lighthouseが非常に優秀 

Slide 37

Slide 37 text

Network 

Slide 38

Slide 38 text

Performance 

Slide 39

Slide 39 text

Audits(Lighthouse) 

Slide 40

Slide 40 text

Audits(Lighthouse) 

Slide 41

Slide 41 text

Webパフォーマンス計測ツール  ● Webサイトへ実際にリクエスト、レンダリングを行い、  サイトのパフォーマンスを計測してくれる  ● 改善提案が項目別に表示される為、対応がしやすい  ● スコアが表示されるので、比較や共有がしやすい  ○ 業務や案件でも指標として扱われることがある 

Slide 42

Slide 42 text

Webパフォーマンス計測ツール  ● GTmetrix  ● PageSpeedInsights  ● Test My Site  ● WebPageTest 

Slide 43

Slide 43 text

GTmetrix  ● 基本料金は無料有料版もあり  ● 非常に細かい分析と改善提案  ● サイトの速度の監視  ● 計測履歴も保持しており、過去のログも参照可  ● 言語は英語のみ  ● 計測サーバが日本になく、香港サーバ   

Slide 44

Slide 44 text

GTmetrix 

Slide 45

Slide 45 text

GTmetrix 

Slide 46

Slide 46 text

GTmetrix 

Slide 47

Slide 47 text

GTmetrix 

Slide 48

Slide 48 text

Page Speed Insights  ● 完全無料  ● Googleによる速度計測ツール  ● Lighthouseが使われている  ● GTmetrixよりも評価が厳しい 

Slide 49

Slide 49 text

Page Speed Insights 

Slide 50

Slide 50 text

Page Speed Insights 

Slide 51

Slide 51 text

Test My Site  ● 完全無料  ● Googleによる速度計測ツール  ● モバイル/ビジネス目線に特化  ○ 競合他社との比較  ○ ビジネスメリットの表示 

Slide 52

Slide 52 text

Test My Site 

Slide 53

Slide 53 text

Test My Site 

Slide 54

Slide 54 text

WebPageTest  ● 完全無料  ● コンテンツの分析に強いレポート  ○ リソースごとの容量  ○ ドメイン単位のリクエスト/容量  ● 詳細な時間レポート 

Slide 55

Slide 55 text

WebPageTest 

Slide 56

Slide 56 text

WebPageTest 

Slide 57

Slide 57 text

WebPageTest 

Slide 58

Slide 58 text

最初は気に入ったツールで  自分のWebサイトを計測してみましょう 

Slide 59

Slide 59 text

Webサイトパフォーマンス改善 

Slide 60

Slide 60 text

サイトを見る時どこを見る？  ● TTFB  ● リソースのサイズ  ● リクエスト数  ● キャッシュ 

Slide 61

Slide 61 text

フロントエンドの対応方針  ● 徹底的にファイルサイズを落としていく  ● リクエスト周りを最適化する  ● レンダリングブロックを排除する  ● キャッシュの有効活用 

Slide 62

Slide 62 text

1.ファイルサイズを減らす施策 

Slide 63

Slide 63 text

HTML5で記述を行う  ● 冗長だったコードを短く記述できる  ● 初期値追加による省略可能属性   

Slide 64

Slide 64 text

HTML5で記述を行う 

Slide 65

Slide 65 text

HTML5で記述を行う  以下は初期値として設定されるようになった 

Slide 66

Slide 66 text

省略可能タグ  ● 省略できるタグは多く存在する  ● 省略できる条件を満たせば省略可能  ● foreachなどで出力するタグは特に有効  参照：HTML5 standard   https://html.spec.whatwg.org/multipage/syntax.html#optional-tags  

Slide 67

Slide 67 text

省略可能タグ        hoge           当たり前のように書いていたタグも… 

Slide 68

Slide 68 text

省略可能タグ    hoge   ここまで減らせる...! 

Slide 69

Slide 69 text

省略可能タグ(閉じタグ) 

サンプルテキスト

項目1
項目2

    項目1  項目2      よく使われるようなタグも… 

Slide 70

Slide 70 text

省略可能タグ(閉じタグ) 

サンプルテキスト 

項目1 
項目2

    項目1  項目2        ここまで文字を削減できる 

Slide 71

Slide 71 text

minify  ● ソースコードのスペース、タブ、改行コードを取り払い、ファイルサイズを削減する  ● jsの場合は変数名なども短い文字に変換する  ● 実装時はそれほど意識する事は少なく、ツールを使用する場合が多い  ● 慣習としてminifyされたjs,cssファイルは  ○○.min.jsや○○.min.cssと命名される 

Slide 72

Slide 72 text

minify  ソースを開いた時にこうなっていればminifyされている 

Slide 73

Slide 73 text

画像の圧縮  ● 適切な圧縮を行う  ○ png / jpeg  ● 次世代フォーマット対応  ○ WebP  ■ 高圧縮、高品質  ■ 対応しているブラウザのみ配信 

Slide 74

Slide 74 text

WebP配信設定    RewriteEngine On  RewriteCond %{HTTP_ACCEPT} image/webp   RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$   RewriteCond %{REQUEST_FILENAME}\.webp -f   RewriteCond %{QUERY_STRING} !type=original   RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]     AddType image/webp .webp    

Slide 75

Slide 75 text

gzip/brotli圧縮  ● 非圧縮のリソースを圧縮して転送することで  ファイルサイズを削減できる  ● 主にアスキーファイルの圧縮がメイン  ● サーバ側では圧縮コスト、クライアント側では解凍コスト発生する為、負荷に気をつける 

Slide 76

Slide 76 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 77

Slide 77 text

2.リクエストの最適化施策 

Slide 78

Slide 78 text

リクエストを削減する  タイムラインの縦を減らしていくイメージ 

Slide 79

Slide 79 text

ブラウザキャッシュ  ● js,css,font,画像等の静的リソースをブラウザでキャッシュ  ● 静的リソースは毎回リクエストする必要がない  ● 初回リクエスト時にキャッシュさせることで  2回目のリクエストは発生しなくなる  ● 当然、自サイトへの初回リクエストではキャッシュが  使えないので注意 

Slide 80

Slide 80 text

ブラウザキャッシュ 

Slide 81

Slide 81 text

ブラウザキャッシュ 

Slide 82

Slide 82 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 83

Slide 83 text

複数ファイルの結合  gulp, webpack等でファイルを結合  一方でデメリットもあるので留意が必要    ● 結合しすぎてファイルサイズが  大きくなり過ぎた場合は逆効果となる事がある  ● ファイルを分ける事自体はレンダリングブロック回避や  並列で読み込むことができるメリットもある 

Slide 84

Slide 84 text

jsやcssのインライン化  jsやcssをHTMLファイルに記述し、リクエストを減らす     .text-bold {font-weight: bold;}       (function() {console.log(‘hogehoge’);})();          

Slide 85

Slide 85 text

jsやcssのインライン化  小さな規模のソースであればインライン化は非常に有効  リクエストしないので、レンダリングブロックにも効果あり  ● ただし、場合によっては保守性とトレードオフになる為、  jsやcssの設計も考慮しなければならない  ● インラインのコードが大量に増えるとHTMLが重くなり、  ページ速度が落ちる可能性がある 

Slide 86

Slide 86 text

画像の遅延ロード  ● 画像がブラウザの表示範囲内になったらリクエストを発生させる  ● ページ読み込み時のリクエスト数削減が可能  ● 「tuupola/lazyload」や「Unveil.js」で  遅延ロードは比較的簡単に実装できる   

Slide 87

Slide 87 text

実装方法も増えてきました  ● intersectionObserver  ● imgタグのloading属性  ○

Slide 88

Slide 88 text

ソーシャル系の遅延ロード 

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

CDN経由でリソースを読み込む  ● CDN→ContentDeliveryNetworkの略  ● コンテンツ配信に最適化されたネットワーク  ● サーバとクライアントの間に入り、コンテンツの配信を  高速化する  ● CDN上で無料公開しているjsやcssのライブラリなどもある 

Slide 91

Slide 91 text

無料のCDNサービス - cdnjs 

Slide 92

Slide 92 text

3.レンダリングブロック対策 

Slide 93

Slide 93 text

レンダリングブロック  ● ブラウザがHTML・CSSを読み込み、  画面表示を行うことをレンダリングと呼ぶ  ● レンダリングはHTMLを上から1行ずつ解析していくが、  途中で膨大なcssファイルやjsの読み込みが発生すると  レンダリングを停止(ブロック)してしまう  ● PageSpeedInsightsで診断可能   

Slide 94

Slide 94 text

レンダリングブロック        hoge          ここにコンテンツが入る      

Slide 95

Slide 95 text

レンダリングブロック        hoge      ここにコンテンツが入る            

Slide 96

Slide 96 text

Webサイトパフォーマンス改善  Wordpress編

Slide 97

Slide 97 text

Wordpressは遅い？  ● 標準では確かに遅くなりがち  ● チューニングで十分高速化可能  ○ 優秀なプラグインが多々ある 

Slide 98

Slide 98 text

Wordpress高速化のポイント  1. ページキャッシュ  2. js/cssの自動結合とminify  3. 画像圧縮 

Slide 99

Slide 99 text

実際にWSOで使用した  高速化三種の神器 

Slide 100

Slide 100 text

プラグインによる最適化  ● W3TotalCache  ● WP-Optimize  ● EWWW Image Optimizer 

Slide 101

Slide 101 text

W3 Total Cache  ● 多機能、詳細な設定  ● Page Cache  ● html / js / cssのMinifyと結合  ● Browser Cache 設定  ● Object Cache 設定  ● UA別のキャッシュ設定(2ソースサイトでもOK)   

Slide 102

Slide 102 text

W3 Total Cache 

Slide 103

Slide 103 text

W3 Total Cache 

Slide 104

Slide 104 text

WP-Optimize  ● データベースのクリーンアップ、最適化  ● コメントやピンバック、リビジョンなど  不要なデータなどを削除  ● 定期実行 

Slide 105

Slide 105 text

WP-Optimize 

Slide 106

Slide 106 text

EWWW Image Optimizer  ● 画像の自動圧縮  ○ メディアアップロード時の自動圧縮  ○ 既存の画像に対しても一括対応可能  ● WebP圧縮、表示設定に対応  ○ WebP対応ブラウザのみWebP配信設定   

Slide 107

Slide 107 text

EWWW Image Optimizer 

Slide 108

Slide 108 text

様々な施策がありましたが、  いかがでしたでしょうか 

Slide 109

Slide 109 text

まとめ  ● 高速化の目的は最低限のUXを提供すること  ● まずはWebパフォーマンス計測ツールを利用して、  Webサイトの状況を把握する  ● 高速化は基本的に無駄を省く事で最適化を行っていく 

Slide 110

Slide 110 text

THANKS! Any questions? You can ﬁnd me at shouhei.tai @ShoheiTai