Webサイト表示速度改善手法

モチヤ株式会社
阿部 正幸

今回のセッションについてページ表示速度改善が注目を集めている• サイト回遊率の低下• SEOなどに悪影響

表示速度が遅いと今回のセッションについてページ表示速度改善が注目を集めている• サイト回遊率の低下• SEOなどに悪影響

表示速度が遅いと今回のセッション• ページ表示速度改善（実案件ベース）• 最近患った腰痛の話

今回のセッションについてページ表示速度改善が注目を集めている• サイト回遊率の低下

表示速度が遅いと• SEOなどに悪影響
今回のセッション• ページ速度改善（実案件ベース）

腰痛• 最近患ったの話をご紹介

ん? 腰痛?

ピンッ！

腰痛と表示速度改善の意外すぎる関係性ファーストインパクト
腰痛の場合

速度の場合

うわ、マジ辛い…
早く治したいうわ、マジ遅い…
早く表示したい

シンクロ率：98%

ファーストステップ
腰痛の場合• レントゲン撮影• 血液検査
• MRI

速度の場合

？？

腰痛の原因調査

低速の原因調査

シップが処方される

速度改善の施策

ファーストステップ
腰痛の場合速度の場合• レントゲン撮影
しっかりと原因調査してから？？
• 血液検査施策を行うことが重要• MRI
腰痛の原因調査

低速の原因調査

シップが処方される

速度改善の施策

阿部 正幸（あべ まさゆき）
モチヤ株式会社 代表
レッドボックス エバンジェリスト
CPIスタッフブログ 運営
テックアカデミー 講師

原因把握のための前知識

Webサイトが表示されるまでInternet

DNS

どこが原因かを知るのが重要
Webサーバー

DBサーバー

原因把握

速度調査ツール•

Test My Site（https://testmysite.withgoogle.com/intl/ja-jp）•Web担当者フォーラム•

Crome DeveTools
言わずと知れた、なんでも屋•Gtmetrix（https://gtmetrix.com）
点数表示され、原因が分かりやすく、クライアントに説明しやすい
PageSpeedと、YSlowでページのランクが表示される

モバイル回線での速度調査
離脱率の把握（https://webtan.impress.co.jp/e/2013/01/29/14562）
レンダリング速度の確認など速度調査ツール•

Test My Site（https://testmysite.withgoogle.com/intl/ja-jp）•Web担当者フォーラム

モバイル回線での速度調査
離脱率の把握（https://webtan.impress.co.jp/e/2013/01/29/14562）
レンダリング速度の確認など• Crome DeveTools

言わずと知れた、なんでも屋•Gtmetrix（https://gtmetrix.com）
点数表示され、原因が分かりやすい、クライアントに説明しやすい
PageSpeedと、YSlowでページのランクが表示される

Chrome DevToolsを開く
1. ブラウザの何もないところで右クリック
2. 「検証」をクリック

Chrome DevToolsを開く
Dev toolの「ネットワーク」
タブをクリック

読み込み時間原因その1

ページ（ドメイン名）をクリックし、初期のロード時間を確認

TTFB（Time to first byte）
ここが長い場合、サーバー側（SQLや、PHPが原因）に原因がある

Webサイトが表示されるまでInternet

DNS

最初のコンテンツロードが遅い場合
インフラの可能性大Webサーバー

DBサーバーインフラ側に原因かどうかの見極め方
動的にページが生成されている場合
静的に変換し改善されれば、ページ生成時がボトルネック
1. 動的に生成されたページのソースを表示
2. 全コピー
3. 新しいファイル（.html）を生成して、ペースト
4. 速度を確認

対処方法- サーバー スペックアップ- サーバー内部 キャッシュを入れる- データベース設計見直し or キャッシュを入れる- データベースインデックス作成

負荷テスト

対処方法
- サーバー スペックアップ- サーバー内部 キャッシュを入れる- データベース設計見直し or キャッシュを入れる- データベースインデックス作成

負荷テスト

対処方法- サーバー スペックアップ- サーバー内部 キャッシュを入れる- データベース設計見直し or キャッシュを入れる- データベースインデックス作成

負荷テスト

Webサイトが表示されるまでInternet

DNS

最初のコンテンツロードが遅い場合、インフラの可能性大Webサーバー

DBサーバーWebサイトが表示されるまでInternet

DNS

最初のコンテンツロードが遅い場合、インフラの可能性大Webサーバーキャッシュ DBサーバー

対処方法- サーバー スペックアップ- サーバー内部 キャッシュを入れる- データベース設計見直し or キャッシュを入れる- データベースインデックス作成

負荷テスト

インデックスとは言葉の意味は• 索引（さくいん）、見出し

データベースでは• 検索効率をあげる• 格納位置、並び順などの登録

インデックスの確認

遅いSQLの見分けかた「スロークエリ（Slow query）」をキーワードに探す遅いSQLの見分けかた

対処方法- サーバー スペックアップ- サーバー内部 キャッシュを入れる- データベース設計見直し or キャッシュを入れる- データベースインデックス作成

負荷テスト

ab（Apache Bench）$ ab -n 250 -c 50 http://example.com/-n : トータルで発行するリクエスト数（250リクエスト）-c : 同時接続数（50同時接続）* 最初は少ない数値で実施し、少しづつ負荷を上げる
共用サーバーで高い負荷をかけすぎない

悪い例

LOAD IMPACT

Vus : バーチャルユーザー数
13r/s : 1秒あたりのリクエスト数
Response time : 応答時間

LOAD IMPACT

原因その2

特に重いコンテンツが無くだらだらと画像、CSS、JSなどのロードが長かったら

プロトコルを確認してみる
HTTP/2 、gzip圧縮

プロトコルの表示（HTTP）

コンテンツ圧縮（gzip）

ブラウザキャッシュ回線速度を絞る

最後にフロント- HTML、CSS、JavaScriptファイルの圧縮（minify）- WebP
webp、jpg、pngはサーバーで自動生成が理想
画像の切り替え
サーバー側：User Agent
フロント：要JS切り替え- リクエスト数- アセットの再利用- サブリソースの非同期読み込み- Lazy loading- Resource Hints

重いコンテンツ
重いコンテンツを発見時には必要か検討いろいろ面倒、と言う方は

まとめ• 速度改善には原因調査が重要• Webサーバーを新しいプランに乗り換えるだけで改善されることも（http2、圧縮）• インフラにお金がかけられる場合にCDN導入も有効
腰痛で通院しても処方されるのはシップのみ！
と、いうことにならないようにしましょうありがとうございました
阿部 正幸

ID：chiyo.abe

あべちよ@abechiyo