Webサイトの表示速度の重要性
Webサイトを運用していく上で、ページの表示速度はとても大事です。
eコマース界隈では有名な話ですが、Amazonでは、読み込み時間が0.1秒減るごとに、売上が1%増加すると言われています。
googleの検索順位においても、サイトのパフォーマンスを考慮しているので検索流入数にも影響があります。
＜参考＞
kissmetricsが公開しているインフォグラフィックスから抜粋
47% of consumers expect a web page to load in 2 senconds or less.
消費者の47％は、2つ以下の秒数でWebページが読み込まれることを期待しています。
40% abandon a website that takes more than 3 seconds to load.
3秒以上かかるウェブサイトは、40%以上のユーザーが離脱します。
バイクと同じです。速ければ正義。
現状の表示速度と改善点を知るには
chromeブラウザでページの表示速度を確認する方法
- chromeブラウザでショートカットキー「Ctrl+Shift+i」を押します。
- 「Network」のタブをクリックした状態で計測したいページを表示する。
- ページ上でダウンロードされるコンテンツとデータ量、表示速度などが表示されます。
requests：サーバへのリクエスト数
transferred：サーバからダウンロードしたデータ量
Finish：ページ表示が完了した時間
※Finishの時間については、非同期コンテンツが含まれる場合、Ajaxが動作した時に時間が更新されてしまうので注意してください。
Googleが提供している「PageSpeed Insights」を使う
「47/100」と赤枠で囲まれている部分がスコア値になります。
PageSpeed のスコアの範囲は 0～100 ポイントです。スコアが大きいほど良好で、85 以上のスコアが理想です。
GoogleAnalyticsからページ速度を確認する
左メニューから「行動」⇒「サイトの速度」⇒「ページ速度」で確認出来ます。
カスタムレポートを作成して、ディレクトリ別や時間帯別で見れるようにすると便利です。
ページ別、時間帯別でページの表示速度を測り、改善点を洗い出します。
表示速度を上げるポイントとしては、大抵フロントエンド側の話ですが、時間帯によって表示速度が遅い場合は、サーバサイド側に問題があると考えられます。
サーバサイドに問題がある場合は、ネットワーク通信量と回線の帯域、サーバのL/A（CPU使用率、DISK I/O）、syslogを確認して問題を特定しますが、環境によって要因が異なるので、ここでは触れませんッ。
サイト速度を上げる方法（フロントエンド）
サイト速度を上げるには兎に角、サーバ通信回数と通信量を減らすことです。（これが全てと言っても良いくらい重要です）
サーバ通信回数を減らす
Lazy Load（画像ファイルの後読み込み）
img タグ要素の src に 1×1 ピクセル等のサイズの小さなダミー画像に設定します。ブラウザの表示が完了したあとに、後から本来の画像に書き換えることで体感スピードをアップさせる技です。
jQueryを使っている場合、プラグインのUnveil.jsがお勧めです。使い方は、img要素の src にダミー画像を指定して、data-src に遅延ロードする画像を記述します。
<img src="https://img.webike.net/sys_images/bg.png" data-src="https://img.webike.net/garage_img/no_photo.jpg">
<script type="text/javascript">
jQuery(function(){
jQuery("img").unveil();
});
</script>
注意点としては、スクロールイベントをトリガーとしているため、ファーストビューで見える画像部分、タブ切り替えで表示するエリアについては、下記のように画像読み込みのイベントを発火させる必要があります。
jQuery('#tab').trigger('unveil');
CSS Sprite
各画像をひとつのファイルにまとめて、CSSで表示したい画像ブロックを指定する方法です。
javascript、cssのファイル結合
ブラウザがダウンロードするファイルをひとつに纏めます。GulpやWebPack、Grantといったタスクランナーが流行っていますが、ソースのデバッグがとてもやり辛くなるので注意が必要です。
サーバ通信量を減らす
Expiresでブラウザキャッシュを有効化
Apacheの例）
ExpiresActive On ExpiresByType image/jpg "access plus 7 days" ExpiresByType image/jpeg "access plus 7 days" ExpiresByType image/gif "access plus 7 days" ExpiresByType image/png "access plus 7 days" ExpiresByType text/css "access plus 1 days" ExpiresByType text/x-javascript "access plus 1 days" ExpiresByType application/javascript "access plus 1 days" ExpiresByType application/x-javascript "access plus 1 days"
Nginxの例）
location ~* .(jpe?g|gif|png)$ {
expires 7d;
}
location ~* .css$ {
expires 1h;
}
location ~* .js$ {
expires 1h;
}
javascript、css、画像ファイルの圧縮（minify）
gzipやdeflateを使用して、ネットワーク配信量を減らします。画像ファイルについては、非可逆圧縮をやり過ぎると画像が荒くなるので注意が必要です。
レンダリングの速度を最適化する
cssは head タグの中に、javascriptは body 閉じタグの直前に記述するのが基本です。簡潔に理由を書くと、ブラウザはHTMLを上から順に解析し、ファイルのダウンロードと同時に画面描画も行っているため、先にCSSファイルを記述した方が良い、という理屈です。また、JavaScriptは画面描画に不要（厳密に言うとDOM操作している場合を除く）であるため、ダウンロードするのは最後が望ましいです。（ブラウザのレンダリングの仕組み、DOM Tree, Style Rules, Render Tree,Layout Tree等々、奥が深い）
サイト速度を上げる方法（サーバサイド）
大幅にサイト速度に貢献できる部分は、実のところあまり無いです。が、強いていうなら・・・
- WebサーバにNginxを利用する
- リダイレクトの数を減らす
- キャッシュサーバを利用する（データベースのアクセスを極力減らす）
外部サービスを活用する
CDN（Contents Delivery Network）
クライアントに一番近いサーバからWebコンテンツを配信するサービスです。Akamaiさんが有名ですが、費用面もそれなりに掛かるので費用対効果を見て導入を検討した方が良いです。
AMP（Accelerated Mobile Pages）
Googleが中心となって発表されたモバイルWebを高速化する方法です。AMP形式のページを通常のHTMLとは別に出力することで、GoogleのCDNなどによってキャッシュ、コンテンツ配信され、即座にページを表示することが出来ます。しかし、コメントフォームやGTMのようなタグマネージャなどが仕様上提供できないため、機能的なデメリットも発生します。今後の動きに注目です。
まとめ
2008年に発行された古い書籍ですが、「ハイパフォーマンスWebサイト 高速サイトを実現する14のルール」が参考になります。この書籍にも書かれていますが、サイトの表示待ち時間の80%はフロントエンドの処理に費やされています。サーバの通信回数と通信量を削減することがWebサイトを速くする最善の方法です。
リバークレインでは、システムエンジニアを募集しています。
