🖍️ 🎚️ 🥦 静的サイト：チューニングと最適化 📚 🤷 ℹ️

クラウドストレージに基づいた静的サイトに関する出版物のサイクルを継続します（以前の出版物はこちらとこちらをご覧ください）。今日は、微調整と最適化の問題について詳しく説明します。

ユーザーの観点から見たサイトの優れた作業の主な基準は、もちろん、コンポーネントのロード速度です。何らかの理由でサイトのロードに時間がかかりすぎると、必然的に待機に飽きている訪問者が失われます。サイトを高速で便利にするには、最適化するためにいくつかの作業を行う必要があります。

以下に、リポジトリにある静的サイトの速度を上げることができるいくつかの推奨事項を示します。

ヒント1. CDNの力を使用する

アカマイからクラウドベースのCDNストレージに接続することについてはすでに書いています。 CDNは、世界中に散在するキャッシュサーバーにすべての静的コンテンツ（画像、テキストファイル、JS、CSSなど）を保存します（こちらのマップを参照）。

Webページまたはそのリソースにアクセスする場合、要求は地理的にクライアントに最も近いキャッシングサーバーによって処理されます。 CDNを使用すると、固定デバイスとモバイルデバイスの両方でサイトの読み込み速度が向上します。

デフォルトでは、すべてのデータは24時間CDNにキャッシュされます。最近、新しい機能がリポジトリに追加されました。これにより、いつでもCDNキャッシュをクリアできます。

CDNキャシシュ

これを行うには、図に示されているタブに移動し、キャッシュにクリアするページのアドレスをフォームに入力します。キャッシュはすぐには消去されませんが、フォームが送信されてから約15分後に消去されます。

ヒント2.キャッシュ設定について忘れないでください。

Webページには、画像、スクリプト、スタイルファイルなど、さまざまな要素が含まれています。ユーザーがページに初めてアクセスすると、一連のHTTPリクエストを完了することでこれらの要素をすべて受け取ります。多数のファイルのリロードを回避するために、キャッシュが使用されます。

HTTPプロトコルで使用されるキャッシュモデルは、いわゆるバリデーターに基づいています。これは、クライアントがキャッシュされたドキュメントの関連性を確保するために使用する特別なヘッダーです。バリデータのおかげで、クライアントはキャッシュされたコピー全体をサーバーに転送せずにドキュメントのステータスを確認できます。次に、サーバーは、受信したバリデーターがクライアントのキャッシュに古いコピーが存在することを示している場合にのみ、応答でドキュメントを送信します。

バリデータは、強いものと弱いものに分けられます。強力なバリデータはHTTP / 1.1に登場しました。ファイルが変更されるたびに変更されるため、そう呼ばれます。これらには、いわゆるETag（エンティティタグ）が含まれます。 ETagは、ドキュメントのコンテンツの識別子です。文書の少なくとも1ビットが変更されると変更されます。識別子として、たとえば、ドキュメントのコンテンツのMD5合計を使用できます。クライアントがサーバーからドキュメントを要求すると、ETag値が応答で送信されます。次に例を示します。

 HTTP / 1.1 200 OK
サーバー：Selectel_Storage / 1.0
 Accept-Ranges：バイト
最終更新日：2014年8月18日月曜日12:25:38 GMT
 Xタイムスタンプ：1408364738.80296
コンテンツタイプ：image / jpeg
コンテンツの長さ：458073
 Access-Control-Allow-Origin：*
 Access-Control-Expose-Headers：Last-Modified、ETag、X-Timestamp
 ETag： "ebef3343a7b152ea7302eef75bea46c3"
日付：2014年8月20日水曜日11:52:48 GMT

同じドキュメントのリクエストが繰り返されると、保存された検証値はIf-None-Matchヘッダーで既に転送されます。

 GET / HTTP / 1.1
ホスト：example.org
 If-None-Match： "ebef3343a7b152ea7302eef75bea46c3"

文書が変更されていない場合、応答でサーバーはヘッダーと304 Not Modifiedコードのみを返します。それ以外の場合、サーバーはコード200を返し、ドキュメントの新しいバージョンとその新しいETag値を転送します。

リポジトリでは、ファイルをダウンロードするとすぐにETagが生成されます。コンテンツのMD5ハッシュです。コンテンツが変更されると、ETagも変更されます。

バリデーターはウィークと呼ばれ、ファイルを変更するたびに変更されるとは限りません。

弱いバリデータの例は、Last-Modifiedヘッダーです。このヘッダーの値は、ファイルが最後に変更された日付です。ストレージでは、自動的にインストールされます。 Last-Modifiedヘッダーに現在ある日付を要求するときに、If-Modified-Sinceヘッダーにそれ以前の日付を指定すると、304 Not Modifiedも回答になります。

強力なバリデータは、あらゆるコンテキストで使用できます。弱いバリデータは、ファイルの正確な内容とは無関係のコンテキストで使用されます。

たとえば、両方のタイプのバリデーターを条件付きのGETリクエストで使用できます（If Modified SinceまたはIf None Match）。ただし、ファイルを部分的にダウンロードする場合は、強力な検証ツールのみを使用できます。そうしないと、クライアントは一貫性のない形式でファイルを受信します。

ヒント3. Cache-Controlヘッダーに注意してください。

オリジナルがリポジトリにあるファイルのコピーのブラウザキャッシュに有効期限を設定するには、max-ageディレクティブを持つCache-Controlヘッダーが使用されます。このヘッダーのおかげで、サイトの読み込み速度を大幅に向上させることができます。ファイルがキャッシュされている場合、ブラウザはサイトへの単一のリクエストを行うことなくキャッシュのコンテンツを即座に表示します。

キャッシュ内のファイル保存時間は秒単位で示されます。

キャッシュ制御：最大年齢= 7200

上記の例では、7200秒（2時間）です。通常、CSS、JS、および画像ファイルはこの方法でキャッシュされます。それらを永久にキャッシュすることをお勧めします。コンテンツを変更するときは、HTMLでそれらへのリンクを変更してください。 RFC 2616では、このようなファイルに対して1年を超えないキャッシュ時間を指定することをお勧めします。

キャッシュ制御：最大年齢= 31536000

特定のファイルをキャッシュせず、常に「新鮮」にしたい場合は、Cache-Controlヘッダーに次の値が設定されます。

キャッシュ制御：キャッシュなし

これは、アイテムがまったくキャッシュされず、ストレージがアクセスされるたびにクライアントがそれを要求する必要があることを示します（この場合、ファイルの本体をダウンロードする必要があるため、ファイルの読み込み時間が長くなります）。

現在のバージョンのファイルを常に取得できる別の方法は、ファイル名にチェックサムを追加することです。

ファイルの内容が少なくとも1ビット変更されると、チェックサムも変更されます。変更がなかった場合、ブラウザはキャッシュのファイルを使用します。ファイルを変更すると、そのファイルへのリンクが変更され、新しいバージョンがダウンロードされます。

標準のmd5sumまたはsha1sumユーティリティを使用して、特別なユーティリティを使用してチェックサムを取得できます。

また、ファイルリンクに任意の文字セット（タイムスタンプ（http://example.com/script.js?timestamp_here）など）を追加し、サイトが展開されるたびにリンクを更新することもできます。ただし、この方法を使用する場合、ブラウザーが不要な要求を行わないという保証はありません。コンテンツが変更されていないファイルでも、異なるリンクがあります（リンク全体とクエリパラメーターがキャッシュキーとして機能します）。もう一度ダウンロードしてください。

HTMLページの場合、cache-controlヘッダーをno-cacheに設定することをお勧めします。ページ上の何かを緊急に変更する必要があり、クライアントがこのページをすでにキャッシュしている場合（デフォルトではこれを行うのは現代のブラウザーです）、クライアントには変更がまったく表示されない場合があります。

CDNを使用する場合、これは特に重要です。AkamaiCDNは、対応するヘッダーなしでデフォルトで24時間ファイルをキャッシュします。もちろん、キャッシュをクリアすることもできます（上記を参照）が、対応するリクエストを送信してから少なくとも15分待つ必要があります。キャッシュなしの値を設定すると、起こりうる問題を回避できます。ページは常に現在のフォームでロードされます。この場合、ブラウザーは引き続きIf-None-Match（またはIf-Modified-Since）ヘッダーを使用し、変更されていないページは再度読み込まれません。

場合によっては、HTMLページのキャッシュ時間は、変更の頻度に基づいて最適に示されます。たとえば、サイトのニュースページが1時間ごとに更新される場合、max-ageの値を3600（1時間）に設定できます。

リポジトリ内のCache-Controlヘッダー（および他のHTTPヘッダー）の値は、Webインターフェースを介して設定できます。

静的サイト

Webインターフェースを介して、ヘッダー値はコンテナ全体に対してのみ設定されます。個々のファイルのヘッダー値は、APIまたはサードパーティクライアントを使用してのみ設定できます。

Cache-Controlの代わりに、Expiresヘッダーを使用できます。その値は、RFC 1123日付形式で日付を示し、その後、ファイルは関連しなくなります（例：Tue、31 Jan 2012 15:02:53 GMT）。この日まで、ブラウザはサイトへのリクエストを行いませんが、キャッシュからファイルを受け取ります。この日付の後、ファイルは再度ダウンロードされます。

ヒント4. gzip圧縮を使用する

圧縮を使用すると、サイトの読み込みを大幅に高速化できます。 HTTP / 1.1以降、クライアントはAccept-Encodingヘッダーでサポートされている圧縮方式を報告します。

 Accept-Encoding：gzip、deflate

サーバーの応答では、使用される圧縮方法に関する情報がContent-Encodingヘッダーで送信されます。

コンテンツエンコーディング：gzip

今日最も一般的で最も一般的に使用されている方法の1つは、もちろんgzipです。その助けにより、起動時間を大幅に短縮できます。 Gzipは、HTML、CSS、JSなどのテキストファイルで特にうまく機能します。圧縮により、テキストファイルのサイズ（および、それに応じて送信されるトラフィックの量）は、平均で5〜10倍減少します。これにより、ページの読み込み速度を大幅に向上させることができます。これは、接続速度が遅いモバイルクライアントに特に当てはまります。

画像ファイルにgzipを使用しても意味がありません。圧縮してもサイズを大幅に削減することはできませんが、多くの場合、サイズを大きくすることさえあります。

Akamai CDNは、デフォルトでほとんどのテキストファイルにgzipを使用します。

ヒント5. JSとCSSを縮小する

縮小とは、ファイルのサイズを縮小してダウンロード時間を短縮するために、ファイルから余分な文字やオプションの文字を削除することです。このため、ファイルサイズは平均で1.5〜3倍減少します。今日、JSとCSSだけでなく、他の種類のファイル（HTML、画像ファイルなど）を縮小する方法が普及しています。

縮小には、特に次の特別なツールが使用されます。

縮小の助けを借りて、重要でないスペースと改行（CSSとJSではオプション）を削除できるだけでなく、より複雑な操作を実行することもできます。たとえば、JSでは、次の形式の関数：

関数summ（first_param、second_param）{
   return（first_param + second_param）;
 }

関数s（a、b）{return（a + b）}に変換し、コードのすべての場所でsummの代わりにsを使用しながら、その操作のロジックを完全に保存できます。 JavaScriptの縮小手順がどのように機能するかは、 http：//lisperator.net/uglifyjs/ページの「デモを開く」セクションで確認できます。

ヒント6.連結を使用する

最新のブラウザは、ドメインごとに平均6つの同時要求を行います。サイトに多数の小さなファイルが含まれている場合、読み込み時間が遅れる可能性があります。これは、接続が低速または不安定な場合に特に顕著です。

ここでは、連結が役立ちます-同じタイプの複数のファイル（たとえば、JSまたはCSS）を1つに結合します。これにより、リクエストの数を減らして、ページの読み込み速度を上げることができます。

連結は、画像の読み込みを高速化するためにも使用できます。 URLにデータを埋め込む方法とスプライトを使用する方法の2つの方法があります。

データ挿入は、特別なタイプのURL-データ：URIを使用して実行されます。 URI（Universal Resource Identifator）は、imgタグのsrc属性とCSSの背景画像URLの両方で使用できます。

画像をデータに変換するためのオンラインツール：URI（たとえば、こちらとこちらをご覧ください）。

スプライトは、1つの画像に結合された画像のコレクションです。さまざまなソフトウェアツールを使用したサイトの形成。 CSSを使用すると、大きな画像の必要な領域にアクセスして、サイト上の適切な場所に配置できます。

スプライトはダウンロード速度の向上に役立ちますが、スプライトを使用すると作業が困難になることが多いことに注意してください。スプライトを少しでも変更するには、CSSに関連する変更を加える必要があります。

JS（ Brunch 、 Grunt 、 Gulpなど）でプロジェクトを構築するための最新ツール。縮小と連結の手順は自動化できます。 1つのコマンドでファイルを使用して必要なすべての操作を実行するには（サーバーへの最終展開を含む）、アセンブリの順序とプロパティを記述する小さな構成ファイルを作成するだけで十分です。

もっと知りたい人のために

静的サイトの開発および構成の機能は広範なトピックであり、以下の出版物では間違いなく継続します。理論と実際の両方でこのトピックをより深く研究したい人のために、いくつかの有用なリンクがあります：

https://developers.google.com/speed/docs/best-practices/caching/-Googleからのキャッシュを最適化するための推奨事項。
https://developers.google.com/speed/-GoogleのWebページの速度を分析および最適化するためのツールのセット。サイトをオンラインでチェックし（適切な形式でアドレスを入力するだけ）、ファイルのダウンロード速度の最適化に関する推奨事項を提供します。また、ChromeとFirefoxのプラグインも含まれており、ブラウザから直接サイトを診断できます。
http://tools.pingdom.com/fpt/-サイトの読み込み速度を測定し、問題を診断するためのオンラインツール。
https://developer.yahoo.com/performance/rules.html-Yahoo !のWebサイトの速度を向上させるための推奨事項
http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html-キャッシュ設定に関するRFC2616の章（HTTPプロトコルの操作について説明）。

コメント内のすべての質問とコメントにお答えします。私たちは、次の出版物のいずれかで静的サイトの開発の現在の傾向について話すことを約束します。

何らかの理由でここにコメントを投稿できない読者は、私たちのブログに参加してください。

静的サイト：チューニングと最適化