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

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