Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

道玄坂 WordPress Meetup #4 〜Web表示高速化〜 登壇:30分
https://www.meetup.com/ja-JP/Tokyo-WordPress-Meetup/events/262865889/

WSO (Website Speed Optimization)
トラフィックの大半がモバイルユーザへ、そしてSEOでも評価の対象になり、
いよいよ本格的にWebサイトの高速化に向き合わなければならなくなりました。
なぜ高速化をやらなければならないのか?決裁者をどうやって説得するか?そのヒントをこのスライドにまとめています。

今回はスパイスファクトリーでのWSOサービスで培った高速化ノウハウやフロントエンド周りの最適化手法、Webサイトスピードの計測方法についてご紹介しています。
Wordpressサイトの高速化手法、高速化三種の神器もご紹介しています。

9e83432930264c9c0a0d83d2e18b8280?s=128

泰 昌平@ShoheiTai

August 09, 2019
Tweet

More Decks by 泰 昌平@ShoheiTai

Other Decks in Programming

Transcript

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

  2. shouhei.tai @ShoheiTai
 泰 昌平 スパイスファクトリー株式会社
 WebArchDivision General Manager
 
 CakePHP/

    PHP / Wordpress / Rails / React.js / Node.js / GCP / SEO / WSO
 ダーツ / バイク / VR / サバゲー tai-sho

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


  4. SpiceFactory ?


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


  7. WSOを聞いたことある人?
 Question


  8. Website Speed Optimization
 WSO


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

    wordpressもあるよ!

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

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


  12. In fact...


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


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

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


  16. 表示速度が遅いと…
 • 離脱率が上がっていく
 • 速度に不満を持ったユーザは再訪しない
 • コンバージョンに悪影響
 Source:How Loading Time

    Affects Your Bottom Line 
 https://blog.kissmetrics.com/loading-time/ 

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


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


  19. SEO対策


  20. SEO対策
 • 表示速度がページ評価の指標の1つに
 • クロールバジェット(crawl rate limit)
 ◦ クローラの活動に関わる要素
 ◦

    一度のクロールで巡回する最大値

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


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


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

  24. 高速化のポイントは4つ


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


    • サーバのリージョン

  27. Browser ( Client )
 • 通信環境不安定、遅い回線 
 • js,cssで負荷のかかる実装がある
 •

    レンダリングブロックの発生

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


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


  30. None
  31. 何から始めたらいい?


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

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


  34. Webサイトの状況を知る
 • ブラウザの開発者ツール
 ◦ ソースコードやネットワークをチェック
 ◦ HTTPのヘッダをチェック
 • Webパフォーマンス計測ツール
 ◦

    問題点と改善案のチェック
 ◦ スコアが出るため高速化の指標になる

  35. ブラウザの開発者ツール
 • 多機能
 ◦ 全て使いこなせれば大体のことは分かる
 • 改善提案もしてくれるが、細かすぎるため上級者向け
 ◦ エンジニア向け
 •

    計測結果の共有がしづらい

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


  37. Network


  38. Performance


  39. Audits(Lighthouse)


  40. Audits(Lighthouse)


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


  42. Webパフォーマンス計測ツール
 • GTmetrix
 • PageSpeedInsights
 • Test My Site
 •

    WebPageTest

  43. GTmetrix
 • 基本料金は無料有料版もあり
 • 非常に細かい分析と改善提案
 • サイトの速度の監視
 • 計測履歴も保持しており、過去のログも参照可
 •

    言語は英語のみ
 • 計測サーバが日本になく、香港サーバ
 

  44. GTmetrix


  45. GTmetrix


  46. GTmetrix


  47. GTmetrix


  48. Page Speed Insights
 • 完全無料
 • Googleによる速度計測ツール
 • Lighthouseが使われている
 •

    GTmetrixよりも評価が厳しい

  49. Page Speed Insights


  50. Page Speed Insights


  51. Test My Site
 • 完全無料
 • Googleによる速度計測ツール
 • モバイル/ビジネス目線に特化
 ◦

    競合他社との比較
 ◦ ビジネスメリットの表示

  52. Test My Site


  53. Test My Site


  54. WebPageTest
 • 完全無料
 • コンテンツの分析に強いレポート
 ◦ リソースごとの容量
 ◦ ドメイン単位のリクエスト/容量
 •

    詳細な時間レポート

  55. WebPageTest


  56. WebPageTest


  57. WebPageTest


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


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


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


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


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


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


  64. 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>
  65. 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"> 以下は初期値として設定されるようになった

  66. 省略可能タグ
 • 省略できるタグは多く存在する
 • 省略できる条件を満たせば省略可能
 • foreachなどで出力するタグは特に有効
 参照:HTML5 standard 


    https://html.spec.whatwg.org/multipage/syntax.html#optional-tags 

  67. 省略可能タグ
 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>hoge</title> 


    </head> 
 <body> 
 </body> 
 </html>
 当たり前のように書いていたタグも…

  68. 省略可能タグ
 <!DOCTYPE html> 
 <title>hoge</title> 
 ここまで減らせる...!


  69. 省略可能タグ(閉じタグ)
 <p>サンプルテキスト</p>
 <ul> 
 <li>項目1</li>
 <li>項目2</li>
 </ul>
 <select>
 <option>項目1</option>
 <option>項目2</option>


    </select>
 
 よく使われるようなタグも…

  70. 省略可能タグ(閉じタグ)
 <p>サンプルテキスト
 <ul> 
 <li>項目1
 <li>項目2
 </ul>
 <select>
 <option>項目1
 <option>項目2


    </select>
 
 
 ここまで文字を削減できる

  71. minify
 • ソースコードのスペース、タブ、改行コードを取り払い、ファイル サイズを削減する
 • jsの場合は変数名なども短い文字に変換する
 • 実装時はそれほど意識する事は少なく、ツールを使用する場合 が多い
 •

    慣習としてminifyされたjs,cssファイルは
 ◦◦.min.jsや◦◦.min.cssと命名される

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


  73. 画像の圧縮
 • 適切な圧縮を行う
 ◦ png / jpeg
 • 次世代フォーマット対応
 ◦

    WebP
 ▪ 高圧縮、高品質
 ▪ 対応しているブラウザのみ配信

  74. WebP配信設定
 <IfModule mod_reqrite.c>
 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] 
 </IfModule>
 AddType image/webp .webp 
 

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


  76. 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> 
 
 

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


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


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


    使えないので注意

  80. ブラウザキャッシュ


  81. ブラウザキャッシュ


  82. ブラウザキャッシュ設定(一例)
 <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> 

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


    並列で読み込むことができるメリットもある

  84. jsやcssのインライン化
 jsやcssをHTMLファイルに記述し、リクエストを減らす
 
<style>
 .text-bold {font-weight: bold;} 
 </style>
 <script>
 (function()

    {console.log(‘hogehoge’);})(); 
 </script>
 
 
 

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


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


  87. 実装方法も増えてきました
 • intersectionObserver
 • imgタグのloading属性
 ◦ <img src="hoge.jpg" loading="lazy">
 


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


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


  91. 無料のCDNサービス - cdnjs


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


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


  94. レンダリングブロック
 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>hoge</title>
 <!--

    ここでレンダリングブロックが発生する -->
 <script src=”hoge.js”></script>
 </head> 
 <body> 
 ここにコンテンツが入る 
 </body> 
 </html>

  95. レンダリングブロック
 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>hoge</title>
 </head>

    
 <body> 
 ここにコンテンツが入る 
 
 <!-- 主要コンテンツを読み込んだ後にscriptを読む --> 
 <script src=”hoge.js”></script>
 </body> 
 </html>

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

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


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


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


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


  101. W3 Total Cache
 • 多機能、詳細な設定
 • Page Cache
 • html

    / js / cssのMinifyと結合
 • Browser Cache 設定
 • Object Cache 設定
 • UA別のキャッシュ設定(2ソースサイトでもOK)
 

  102. W3 Total Cache


  103. W3 Total Cache


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


  105. WP-Optimize


  106. EWWW Image Optimizer
 • 画像の自動圧縮
 ◦ メディアアップロード時の自動圧縮
 ◦ 既存の画像に対しても一括対応可能
 •

    WebP圧縮、表示設定に対応
 ◦ WebP対応ブラウザのみWebP配信設定
 

  107. EWWW Image Optimizer


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


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


  110. THANKS! Any questions? You can find me at shouhei.tai @ShoheiTai