web-dev-qa-db-ja.com

1つのCDNまたは複数のCDNSからファイルをロードする

典型的なウェブページで、私は以下をすべてCDNからロードします。

  • jQuery
  • Angular
  • Bootstrap
  • Icomoon
  • いくつかのAngularプラグイン

これらを1つのCDN（可能な場合）からロードするのが良いですか、それとも異なるCDNからロードするのが良いですか？これに関するベストプラクティスはありますか、それとも違いはありませんか？

jqueryangularjstwitter-bootstrapperformancecdn
26
Jimmery

これによると、1つまたは複数のCDNを使用するという点では、同じホスト名からダウンロードするコンポーネントの数によっては問題にはなりません Yahoo UIチームの記事 、HTTP /1.1は次のことを示唆していますブラウザは、並列ダウンロードをホスト名ごとに2つに制限する必要があります。したがって、複数のCDNソースを使用する場合は、ホスト名を変えることをお勧めします。

angularやangular-routerなどの誤ったバージョンの不一致を回避するためだけに関連コンポーネントを使用する場合は、同じCDNを使用することをお勧めしますが、ホスト名ごとのダウンロードが増えると、同じ方法でロードリークを作成します（少なくとも仕様の提案に従うブラウザーの場合）。

CDNを使用することは、Webサイトの読み込みパフォーマンスを向上させるための良い習慣です。ただし、見つけることができるより人気のあるCDNの使用を検討する必要があります。同じファイルを使用する別のサイトから、使用しているファイルのキャッシュバージョンを取得する可能性が高くなり、読み込みパフォーマンスがさらに向上します。ウェブサイト。

@ JeffPuckett コメントで指摘されているように、ブラウザには、今日のサーバー/プロキシごとの同時ダウンロードの上限があります。

Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6

参照： https://stackoverflow.com/a/985704/4488121

14
lenilsondc

通常行われているように、この質問に対する特効薬の答えはないのではないかと思います。これが私の2セントです。同時接続の量とブラウザ/標準に焦点を合わせるのとは反対に、私はそれを別の視点から見たいと思います。

ユーザーとサーバーの両方にとって最も重要なのは、ページの読み込み時間とサービスの可用性です。最速のロード時間はキャッシュからのロードです。 yourユーザーが特定のCDNから特定のファイルを使用するほど、キャッシュヒットの可能性が高くなります。

この目標に基づいて、

  • ライブラリリストに依存する人気のあるCDNから人気のあるライブラリをロードします。これは同じCDNでも異なるCDNでもかまいません。私は、ブラウザの並列HTTP接続の数は二次的な議論であると主張します。
  • カスタムスクリプトとめったに使用されないサードパーティライブラリを結合して、意味のある数のファイル（たとえば、単一のCSSと単一のJS）に最小化し、独自のホストまたは独自のCDN（さまざまな場所または大陸からのユーザーが多数いる場合）からロードしますCDNはおそらくあなたにとって贅沢ではありません）。
  • CDNベースのスクリプトが何らかの理由でCDNからロードされなかった場合は、ローカルコピーにフォールバックします。
  • そのオプションがある場合は、最も使用されているバージョンのライブラリを選択します。これはおそらく最新のものではありません。

CDNと使用統計が人気のあるライブラリを分類しますが、他のライブラリはそれほど多くはありませんが、他のライブラリに基づいてローカルでホストするものを自分で決定できます 推奨 。

統計については、w3techsのようなものを使用することをお勧めします。

「トラフィックが少ない」サイトと「トラフィックが少ない」サイトの選択は、Webサイトのオーディエンスに関する知識に基づいた推測に基づいて行うことができますが、確認したい場合は、キャッシュヒット率を測定してみてください。簡単ではありませんが、ここではいくつか idea です。

さて、バージョンについては、バージョンを変更するオプションがあるはずです。最初のオプションである「トラフィックの多いサイトが少ない」サイトを選択する場合は、使用しているCDNのライブラリのバージョンを確認する価値があります。それ以外の場合、「トラフィックが少ない」オプションの場合は、最も人気のあるバージョンが推奨されます。同じw3techには 統計 が必要です。

多くの問題のように聞こえるかもしれませんが、統計は非常にゆっくりと変化する傾向があるため、（一度ではないにしても）めったに行われません。

4
isp-zax

パフォーマンスに影響するため、1つのページで複数のCDNリンクを直接使用することは避けてください。複数のCDNリンクを追加するには、以下のコードを試してください。

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/jquery",
@"//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js"
).Include(
"~/Scripts/jquery-{version}.js"));

複数のファイルを1つのファイルに結合し、Webページを取得して表示するために必要なサーバーへの要求の数を減らします。

2
lazydeveloper

CDNを使用することは、他の人がすでに答えているように進む方法ですが、CDNを追加すると、各CDNのDNSルックアップ時間が合計ダウンロード時間の大半を占めるようになるまでスケールアップします。

したがって、少なくとも2〜6個のリソースをロードしようとして各CDNを最大化しようとすると、おそらく最良のトレードオフになります。

2
light_303

ベストプラクティスは、CDNとフォールバック（ローカルファイル）の両方を使用することです。質問に答えるには、1つのCDNがダウンしているかのように、複数のCDNパスを使用する必要があります。少なくとも、残りは稼働しています。ダウンCDNの場合、フォールバックはうまくいきます。

要するに、両方を使用して、私がプロジェクトで従うベストプラクティスです。

0
Krishna9960

大多数のブラウザがHTTP2をサポートしているので、質問を始めるのに良い質問は次のとおりです。私のCDNはHTTP2をサポートしていますか？もしそうなら、1つのCDNを介してそれらのリクエストをパイプライン化する方が速い可能性があります。他のCDNがまだキャッシュされていない場合は、DNSルックアップを保存することもできます。 CDNがプッシュをサポートしている場合、それらのライブラリの多くは複数のファイルを必要とするため、速度も向上する可能性があります。

0
pucky124