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サイトの高速化手法、高速化三種の神器もご紹介しています。

泰 昌平@ShoheiTai

August 09, 2019
Tweet

More Decks by 泰 昌平@ShoheiTai

Other Decks in Programming

Transcript

  1. 今こそ始めるWSO

    Web高速化の現状と対策テクニック

    泰昌平 @ShoheiTai

    View Slide

  2. shouhei.tai @ShoheiTai

    泰 昌平
    スパイスファクトリー株式会社

    WebArchDivision General Manager


    CakePHP/ PHP / Wordpress / Rails / React.js
    / Node.js / GCP / SEO / WSO

    ダーツ / バイク / VR / サバゲー
    tai-sho


    View Slide

  3. CMSプロレス

    Redboxの小川さんと優勝

    Concrete5参戦チームが立ち並ぶ中、単独Wordpressで優勝


    View Slide

  4. SpiceFactory ?


    View Slide

  5. View Slide

  6. WSO Service

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


    View Slide

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

    Question


    View Slide

  8. Website Speed Optimization

    WSO


    View Slide

  9. 本日の内容

    1. 何故高速化が必要なのか

    2. 高速化の考え方

    3. Webサイトの速度分析

    4. サイト高速化実装テクニック

    a. wordpressもあるよ!


    View Slide

  10. WSOの現状と必要性

    高速化は誰の為にやるんだろう?

    View Slide

  11. Webの高速化が必要な理由

    ● 最低限のUXを提供

    ● SEO対策

    ● トラフィックがモバイル主流に


    View Slide

  12. In fact...


    View Slide

  13. WSOの現状

    ● 対策費用

    ● サイト規模によっては工数大

    ● 高速化よりも新機能開発を優先


    View Slide

  14. WSOの現状

    ● 対策費用

    ● サイト規模によっては工数大

    ● 高速化よりも新機能開発を優先


    決裁者の説得が困難...

    View Slide

  15. 表示速度の低下

    ⇓

    ビジネスへのインパクト


    View Slide

  16. 表示速度が遅いと…

    ● 離脱率が上がっていく

    ● 速度に不満を持ったユーザは再訪しない

    ● コンバージョンに悪影響

    Source:How Loading Time Affects Your Bottom Line 

    https://blog.kissmetrics.com/loading-time/ 


    View Slide

  17. 直帰率と表示速度の相関

    Source:
    https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-spe
    ed-new-industry-benchmarks/ 


    View Slide

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


    View Slide

  19. SEO対策


    View Slide

  20. SEO対策

    ● 表示速度がページ評価の指標の1つに

    ● クロールバジェット(crawl rate limit)

    ○ クローラの活動に関わる要素

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


    View Slide

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


    View Slide

  22. これからは

    Webサイトの表示速度

    と向き合わなければならない


    View Slide

  23. 高速化の考え方

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

    View Slide

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


    View Slide

  25. View Slide

  26. Web Server

    ● スペックが低くて処理が遅い(TTFBが長い)

    ● 負荷分散ができていない

    ● キャッシュが上手く使えていない

    ● Webサーバのチューニング不足

    ● サーバのリージョン


    View Slide

  27. Browser ( Client )

    ● 通信環境不安定、遅い回線 

    ● js,cssで負荷のかかる実装がある

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


    View Slide

  28. Request

    ● 画像/js/cssなどのコンテンツ数が多い

    ● js/cssのリソースが結合されていない

    ● ファーストビューで使用しないリソースの読込


    View Slide

  29. Response

    ● 画像サイズが大きい

    ○ 適切な圧縮が行われていない

    ○ 表示領域に対して画像が大きい

    ● js/cssのファイルサイズが大きい


    View Slide

  30. View Slide

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


    View Slide

  32. Webサイトの速度分析

    高速化に向けた第一歩

    View Slide

  33. サイトの状況を分析し、

    ネックとなっている箇所を特定する


    View Slide

  34. Webサイトの状況を知る

    ● ブラウザの開発者ツール

    ○ ソースコードやネットワークをチェック

    ○ HTTPのヘッダをチェック

    ● Webパフォーマンス計測ツール

    ○ 問題点と改善案のチェック

    ○ スコアが出るため高速化の指標になる


    View Slide

  35. ブラウザの開発者ツール

    ● 多機能

    ○ 全て使いこなせれば大体のことは分かる

    ● 改善提案もしてくれるが、細かすぎるため上級者向け

    ○ エンジニア向け

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


    View Slide

  36. ブラウザの開発者ツール

    主な計測機能

    ● 通信速度の変更不安定な通信環境を検証(Network)

    ● js/renderingの負荷計測(Performance)

    ● Webパフォーマンス計測(Audits)

    ○ Lighthouseが非常に優秀


    View Slide

  37. Network


    View Slide

  38. Performance


    View Slide

  39. Audits(Lighthouse)


    View Slide

  40. Audits(Lighthouse)


    View Slide

  41. Webパフォーマンス計測ツール

    ● Webサイトへ実際にリクエスト、レンダリングを行い、

    サイトのパフォーマンスを計測してくれる

    ● 改善提案が項目別に表示される為、対応がしやすい

    ● スコアが表示されるので、比較や共有がしやすい

    ○ 業務や案件でも指標として扱われることがある


    View Slide

  42. Webパフォーマンス計測ツール

    ● GTmetrix

    ● PageSpeedInsights

    ● Test My Site

    ● WebPageTest


    View Slide

  43. GTmetrix

    ● 基本料金は無料有料版もあり

    ● 非常に細かい分析と改善提案

    ● サイトの速度の監視

    ● 計測履歴も保持しており、過去のログも参照可

    ● 言語は英語のみ

    ● 計測サーバが日本になく、香港サーバ


    View Slide

  44. GTmetrix


    View Slide

  45. GTmetrix


    View Slide

  46. GTmetrix


    View Slide

  47. GTmetrix


    View Slide

  48. Page Speed Insights

    ● 完全無料

    ● Googleによる速度計測ツール

    ● Lighthouseが使われている

    ● GTmetrixよりも評価が厳しい


    View Slide

  49. Page Speed Insights


    View Slide

  50. Page Speed Insights


    View Slide

  51. Test My Site

    ● 完全無料

    ● Googleによる速度計測ツール

    ● モバイル/ビジネス目線に特化

    ○ 競合他社との比較

    ○ ビジネスメリットの表示


    View Slide

  52. Test My Site


    View Slide

  53. Test My Site


    View Slide

  54. WebPageTest

    ● 完全無料

    ● コンテンツの分析に強いレポート

    ○ リソースごとの容量

    ○ ドメイン単位のリクエスト/容量

    ● 詳細な時間レポート


    View Slide

  55. WebPageTest


    View Slide

  56. WebPageTest


    View Slide

  57. WebPageTest


    View Slide

  58. 最初は気に入ったツールで

    自分のWebサイトを計測してみましょう


    View Slide

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


    View Slide

  60. サイトを見る時どこを見る?

    ● TTFB

    ● リソースのサイズ

    ● リクエスト数

    ● キャッシュ


    View Slide

  61. フロントエンドの対応方針

    ● 徹底的にファイルサイズを落としていく

    ● リクエスト周りを最適化する

    ● レンダリングブロックを排除する

    ● キャッシュの有効活用


    View Slide

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


    View Slide

  63. HTML5で記述を行う

    ● 冗長だったコードを短く記述できる

    ● 初期値追加による省略可能属性


    View Slide

  64. HTML5で記述を行う



    "http://www.w3.org/TR/html4/strict.dtd">

    View Slide

  65. HTML5で記述を行う





    以下は初期値として設定されるようになった


    View Slide

  66. 省略可能タグ

    ● 省略できるタグは多く存在する

    ● 省略できる条件を満たせば省略可能

    ● foreachなどで出力するタグは特に有効

    参照:HTML5 standard 

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


    View Slide

  67. 省略可能タグ




    hoge 





    当たり前のように書いていたタグも…


    View Slide

  68. 省略可能タグ


    hoge 

    ここまで減らせる...!


    View Slide

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

    サンプルテキスト


    項目1

    項目2



    項目1

    項目2



    よく使われるようなタグも…


    View Slide

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

    サンプルテキスト


    項目1

    項目2



    項目1

    項目2




    ここまで文字を削減できる


    View Slide

  71. minify

    ● ソースコードのスペース、タブ、改行コードを取り払い、ファイル
    サイズを削減する

    ● jsの場合は変数名なども短い文字に変換する

    ● 実装時はそれほど意識する事は少なく、ツールを使用する場合
    が多い

    ● 慣習としてminifyされたjs,cssファイルは

    ○○.min.jsや○○.min.cssと命名される


    View Slide

  72. minify

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


    View Slide

  73. 画像の圧縮

    ● 適切な圧縮を行う

    ○ png / jpeg

    ● 次世代フォーマット対応

    ○ WebP

    ■ 高圧縮、高品質

    ■ 対応しているブラウザのみ配信


    View Slide

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


    View Slide

  75. gzip/brotli圧縮

    ● 非圧縮のリソースを圧縮して転送することで

    ファイルサイズを削減できる

    ● 主にアスキーファイルの圧縮がメイン

    ● サーバ側では圧縮コスト、クライアント側では解凍コスト発生する
    為、負荷に気をつける


    View Slide

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




    View Slide

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


    View Slide

  78. リクエストを削減する

    タイムラインの縦を減らしていくイメージ


    View Slide

  79. ブラウザキャッシュ

    ● js,css,font,画像等の静的リソースをブラウザでキャッシュ

    ● 静的リソースは毎回リクエストする必要がない

    ● 初回リクエスト時にキャッシュさせることで

    2回目のリクエストは発生しなくなる

    ● 当然、自サイトへの初回リクエストではキャッシュが

    使えないので注意


    View Slide

  80. ブラウザキャッシュ


    View Slide

  81. ブラウザキャッシュ


    View Slide

  82. ブラウザキャッシュ設定(一例)


    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" 


    View Slide

  83. 複数ファイルの結合

    gulp, webpack等でファイルを結合

    一方でデメリットもあるので留意が必要


    ● 結合しすぎてファイルサイズが

    大きくなり過ぎた場合は逆効果となる事がある

    ● ファイルを分ける事自体はレンダリングブロック回避や

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


    View Slide

  84. jsやcssのインライン化

    jsやcssをHTMLファイルに記述し、リクエストを減らす

    

<br/>.text-bold {font-weight: bold;} 
<br/>

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




    View Slide

  85. jsやcssのインライン化

    小さな規模のソースであればインライン化は非常に有効

    リクエストしないので、レンダリングブロックにも効果あり

    ● ただし、場合によっては保守性とトレードオフになる為、

    jsやcssの設計も考慮しなければならない

    ● インラインのコードが大量に増えるとHTMLが重くなり、

    ページ速度が落ちる可能性がある


    View Slide

  86. 画像の遅延ロード

    ● 画像がブラウザの表示範囲内になったらリクエストを発生
    させる

    ● ページ読み込み時のリクエスト数削減が可能

    ● 「tuupola/lazyload」や「Unveil.js」で

    遅延ロードは比較的簡単に実装できる


    View Slide

  87. 実装方法も増えてきました

    ● intersectionObserver

    ● imgタグのloading属性

    ○ 


    View Slide

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


    View Slide

  89. View Slide

  90. CDN経由でリソースを読み込む

    ● CDN→ContentDeliveryNetworkの略

    ● コンテンツ配信に最適化されたネットワーク

    ● サーバとクライアントの間に入り、コンテンツの配信を

    高速化する

    ● CDN上で無料公開しているjsやcssのライブラリなどもある


    View Slide

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


    View Slide

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


    View Slide

  93. レンダリングブロック

    ● ブラウザがHTML・CSSを読み込み、

    画面表示を行うことをレンダリングと呼ぶ

    ● レンダリングはHTMLを上から1行ずつ解析していくが、

    途中で膨大なcssファイルやjsの読み込みが発生すると

    レンダリングを停止(ブロック)してしまう

    ● PageSpeedInsightsで診断可能


    View Slide

  94. レンダリングブロック




    hoge





    ここにコンテンツが入る 



    View Slide

  95. レンダリングブロック




    hoge



    ここにコンテンツが入る 






    View Slide

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

    Wordpress編

    View Slide

  97. Wordpressは遅い?

    ● 標準では確かに遅くなりがち

    ● チューニングで十分高速化可能

    ○ 優秀なプラグインが多々ある


    View Slide

  98. Wordpress高速化のポイント

    1. ページキャッシュ

    2. js/cssの自動結合とminify

    3. 画像圧縮


    View Slide

  99. 実際にWSOで使用した

    高速化 三種の神器


    View Slide

  100. プラグインによる最適化

    ● W3TotalCache

    ● WP-Optimize

    ● EWWW Image Optimizer


    View Slide

  101. W3 Total Cache

    ● 多機能、詳細な設定

    ● Page Cache

    ● html / js / cssのMinifyと結合

    ● Browser Cache 設定

    ● Object Cache 設定

    ● UA別のキャッシュ設定(2ソースサイトでもOK)


    View Slide

  102. W3 Total Cache


    View Slide

  103. W3 Total Cache


    View Slide

  104. WP-Optimize

    ● データベースのクリーンアップ、最適化

    ● コメントやピンバック、リビジョンなど

    不要なデータなどを削除

    ● 定期実行


    View Slide

  105. WP-Optimize


    View Slide

  106. EWWW Image Optimizer

    ● 画像の自動圧縮

    ○ メディアアップロード時の自動圧縮

    ○ 既存の画像に対しても一括対応可能

    ● WebP圧縮、表示設定に対応

    ○ WebP対応ブラウザのみWebP配信設定


    View Slide

  107. EWWW Image Optimizer


    View Slide

  108. 様々な施策がありましたが、

    いかがでしたでしょうか


    View Slide

  109. まとめ

    ● 高速化の目的は最低限のUXを提供すること

    ● まずはWebパフォーマンス計測ツールを利用して、

    Webサイトの状況を把握する

    ● 高速化は基本的に無駄を省く事で最適化を行っていく


    View Slide

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

    View Slide