みなさんこんにちは，teratail開発チームの出川幾夫です。

ページのパフォーマンスは，あらゆるWebサイトやWebアプリケーションにとってとても重要です。サイト上でのすべての体験に付随し，その良し悪しがUXに直接影響するものだからです。ECサイトなどサイトでの体験がそのまま利益に繋がるようなサービスでは，サイトの読み込み時間で売上が大きく変わることも多いようです。

またSEOにも非常に大きな効果があります。サイトの読み込みにかかる時間が低下することで，Googleが1日にクロールするページ数が増え，新規ページが早くGoogleの検索結果に現れるようになります。

参考：Official Google Webmaster Central Blog: Using site speed in web search ranking

http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Google Speed InsightやGTmetrixなど，Webサイトのパフォーマンスをスコアで表示してくれるサービスは多く存在します。これらのツールは何をすべきかを簡単に提案してくれるものの，それらがどういった意味を持っていてどのようにパフォーマンスが改善するのかを意識できていない人も多いのではないでしょうか。

そこで今回は，効果の上がりやすいフロントエンド部分のパフォーマンスチューニング方法について，基礎に立ち返って，その対策にどのような意味があり，どういった効果があるのかを目的別に振り返ってみたいと思います。

体感速度の向上

実際の処理速度は速くなくても，少しの変更でユーザの体感速度を大きく向上させることはできます。一般的にユーザの体感速度の多くはクライアント側での処理が大きな割合を占めます。できるだけ早くページのファーストビューを表示し，ユーザが行動可能な状態にすることが大切です。より具体的には，サーバからのレスポンスが到着してから利用可能になり次第，早くに表示させることになります。

JavaScriptやCSSの読み込みのタイミングを調整するのが最も簡単です。読み込まれてから実行されればいいJavaScriptの読み込みはbodyタグ内の最下部に，ファーストビューを決めるCSSはheadタグ内に入れるとするのが一般的です。JavaScriptを下に書くことでHTMLのレンダリングがブロックされなくなるため，ファーストビューの表示が早くなります。

参考：css，javascriptの記述場所について

https://teratail.com/questions/9325

ファーストビューに影響しない優先度の低いCSSは遅延読み込みさせるのもよいでしょう。サイズの大きな画像が多いページでは，その画像部分だけ遅延読み込みさせるのも効果的です。

またページ内で外部ドメインのファイルを多く読み込んでいる場合は，DNSプリフェッチを設定することで名前解決をページが読み込まれてすぐに行わせることもできます。これによって以降の外部ファイルの読み込み時に名前解決による待ちを省略することができます。

<link rel="dns-prefetch" href="http://www.example.com/" />

また読み込みの進捗を表示することも，ユーザの待つことに対するストレスを軽減させることができます。読み込みに時間がかかるデータの読み込み中にインジケーターを表示させるなどがこれにあたります。

接続の最適化

ブラウザはWebページを1つ読み込む際，HTMLファイルを読み込んだ後に中に記述されているCSSや画像など多くのリソースのリクエストをサーバに飛ばします。Webサーバとの接続を最適化し，この多くのリクエストによる遅延を減少させるのもパフォーマンスに大きな効果があります。

ApacheやNginxなどの主要なWebサーバではKeepAliveという設定項目があります。これを有効化すると一度張ったHTTP接続によるTCPコネクションを再利用できるようになり，オーバーヘッドとなるTCPの3ウェイハンドシェイクの時間を省略することができます。ページ内のリクエスト数が多い場合には特に有効です。Webサーバの最大接続数などに注意しながら有効化を考えてみるとよいでしょう。

参考：HTTP接続のプーリングは可能か？

https://teratail.com/questions/14808

またドメインシェアリングという方法もあります。多くのブラウザでは同一ドメインに対する同時リクエスト数が6に制限されていますが，画像などの静的リソースを別のドメインに設置しそちらを読み込むことで，実質的にブラウザ側の同時リクエスト数を増やすことができます。

jQueryやCSSフレームワークのリクエストも，同ドメインに設置するよりも，それらを提供しているCDNサーバから読み込む方が，並列読み込みができるぶん読み込み完了までの時間が短くなる場合があります。小さい画像等が多い場合などは，画像配信用のサーバを用意するのが効果的です。

リクエスト数の削減

JavaScriptやCSS，画像などのリクエストを削減することも大きな効果があります。上記の通りブラウザの同時接続数には制限があるので，リクエストを減らすことでそれらが空くのを待つ時間を少なくすることができます。不要なファイルをリクエストしないのはもちろん，同じリソースでも工夫次第でそのリクエスト数を減らすことができます。

CSSスプライトは画像のリクエスト数を減らす代表的な例です。小さな画像を1つの画像にまとめてCSSの操作で個別に表示することで，複数の画像のリクエストを1つにすることができます。小さな矢印やアイコンなどは積極的にCSSスプライトにすべきです。またFont AwesomeなどのCSSによるアイコンセットを利用すればCSSで軽量にアイコンを利用でき，画像そのものの使用を減らすこともできます。

またCSSやJavaScriptファイルのリクエストも多くなりがちなリクエストのひとつです。小さなCSSやJavaScriptファイルは別ファイルにせず，HTMLにstyleタグやscriptタグで埋め込むことでリクエスト数を削減できます。

RequireJSやBrowserify，Webpackなどを用いてJavaScriptファイルを細かくモジュール化しつつも，最終的に1つのJavaScriptファイルにまとめて出力することで，大幅にリクエストを減らせます。ページ別にそれぞれ1つのファイルにまとめれば，不要なものを読み込む心配もありません。