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

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

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

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

SpiceFactory ? 

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

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

Website Speed Optimization  WSO 

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

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

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

In fact... 

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

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

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

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

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

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

SEO対策 

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

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

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

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

高速化のポイントは4つ 

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

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

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

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

何から始めたらいい？ 

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

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

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

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

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

Network 

Performance 

Audits(Lighthouse) 

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

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

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

GTmetrix 

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

Page Speed Insights 

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

Test My Site 

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

WebPageTest 

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

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

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

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

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

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

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>

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

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

省略可能タグ  <!DOCTYPE html>   <html>   <head>   <title>hoge</title>  
</head>   <body>   </body>   </html>  当たり前のように書いていたタグも… 

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

省略可能タグ(閉じタグ)  <p>サンプルテキスト</p>  <ul>   <li>項目1</li>  <li>項目2</li>  </ul>  <select>  <option>項目1</option>  <option>項目2</option> 
</select>    よく使われるようなタグも… 

省略可能タグ(閉じタグ)  <p>サンプルテキスト  <ul>   <li>項目1  <li>項目2  </ul>  <select>  <option>項目1  <option>項目2 
</select>      ここまで文字を削減できる 

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

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

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

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    

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

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>      

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

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

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

ブラウザキャッシュ 

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

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

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

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

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

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

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

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

無料のCDNサービス - cdnjs 

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

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

レンダリングブロック  <!DOCTYPE html>   <html>   <head>   <title>hoge</title>    <script src=”hoge.js”></script>  </head>   <body>   ここにコンテンツが入る   </body>   </html>

レンダリングブロック  <!DOCTYPE html>   <html>   <head>   <title>hoge</title>  </head>
  <body>   ここにコンテンツが入る        <script src=”hoge.js”></script>  </body>   </html>

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

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

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

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

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

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

W3 Total Cache 

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

WP-Optimize 

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

EWWW Image Optimizer 

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

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

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

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

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

More Decks by 泰 昌平@ShoheiTai

Other Decks in Programming

Featured

Transcript

More Decks by 泰昌平@ShoheiTai