$30 off During Our Annual Pro Sale. View Details »

今こそ始める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. shouhei.tai @ShoheiTai
 泰 昌平 スパイスファクトリー株式会社
 WebArchDivision General Manager
 
 CakePHP/

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

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


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

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

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

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

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

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

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

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

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

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

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

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