2G モバイル接続 (~0.1mbps) で少なくとも 500 ミリ秒の遅延がある環境で、約 10kb の css と js をサーバー上の約 5 ～ 10 個のファイルでクライアントに送信する最速かつ最も効率的な方法は何ですか?
次の 3 つのオプションが考えられます。
- すべての js を 1 つのファイルに、すべての css を 1 つのファイルに結合する
- すべての css ファイルと js ファイルを 1 つずつリンクする
- すべてをインライン化
Googleがインラインを使用していることは知っていますが、それはおそらくサーバーソケットを節約するためです。ステートレス モードで実行することにより、RAM を節約しています。クライアントがセッションを覚えていることを信頼しています。サーバーのパワーはまったく問題ではありません。
一方、facebook は css を自動生成するようですが (それらの名前は base64 でエンコードされています)、ユーザーに送信される 10 を超える異なるファイルに変換されます。一部の空白のみを削除します。
すべてを圧縮する関数を介してすべてのファイルを既に渡しているため、これらのいずれかが実行可能です。最初の選択肢は簡単なので選びたくありません。
最初の 2 つはキャッシュを利用します (2 番目は最初のものよりも少し少ない) が、2 番目はサーバーへの 3 つの要求のみを必要とし、3 番目はサーバーからの 1 つの get 要求のみを必要とします (いくつかのイメージを無視します)。一部のページ）。
Android / iOS はブラウザの再起動時に js と css をキャッシュしますか? そうでない場合は、インラインの方が適切に聞こえます。
唯一の目標は、ユーザーの平均読み込み時間を最小限に抑えることです。各ユーザーは、サイトで 1 日あたり約 100 ページの読み込みに費やし、1 日あたり約 40 個の css および js ファイルを表示します。css と js は基本的に静的コンテンツです。30 日間キャッシュするように設定されており、/path/to/file.ext?md5-hash-of-file. また、すべて可能な限り gzip で圧縮されます。
編集：
2番目に見つけた2つのオプションを明確にする必要があると思います。サイト全体で css と js に単一のファイルを使用するのは良い考えですか? 1 つの関数が 2 つ以上の異なる結合された js ファイルに含まれているため、2 つの要求のみを使用し、二重 (または 7 重) キャッシュを削除しますが、最大 1MB のダウンロードはそれほど良いとは言えません。
現在では、基本的にビューごとに 1 つの結合された CSS であるため、同じページを再度表示するたびにコンテンツがキャッシュされます。ただし、一部の js および css は複数のページで使用されます。