ユーザーから送信されたデータを CDN で確認します。 CDN (コンテンツ配信ネットワーク) とは何ですか、また CDN を使用する利点は何ですか。 ロード時間の短縮
著者より: 開発に長く携わっていれば、インターネットの主な問題は速度であることをご存知でしょう。 それは簡単です。スピードが重要であり、速ければ速いほど良いのです。 パフォーマンスを向上させる簡単な方法は、CDN を使用することです。 このトピックについては、CSS-Tricks サイトですでに何度か取り上げています。 データベースを書き換えたり、コンテンツを手動で編集したりする必要がないという単純さがありますが、私たちの多くはこの分野のパフォーマンスに十分な注意を払っていません。 ホスティング、サーバー、cPanel、なんと！
幸いなことに、CDN の統合はそれほど難しくありません。 理想的には、すべての設定が完了し、Google PageSpeed などのサービスがサイトの高いパフォーマンスを宣伝し、結果として検索ランキングの向上、収益の増加、人気の増加につながります...まあ、そのアイデアはわかります。
この記事では、カスタム Web アプリケーションで CDN を設定するプロセスを説明し、その後、CDN を最大限に活用するのに役立ついくつかのトリックについて学びます。 先ほども言ったように、セットアップは簡単なはずなので、早速始めて Web を高速化しましょう!
CDN 展開用の特別なプラグインがある WordPress などの CMS を使用するユーザー向けの CDN のセットアップは、ここで説明するよりもさらに簡単である可能性があることを付け加えておきます。 誰もがそのような贅沢を持っているわけではないので、さらに詳しく見ていきましょう 伝統的な方法.
CDN で私を見失ったCDN とは何か、CDN は何に必要なのかという基本的な概念を理解しておいて損はありません。 まずはこれから始めましょう。
JavaScript。 クイックスタート
CDN は、サイトのサーバーから静的ファイルを取得し、サーバー上にキャッシュします。 ブラウザーがサイトにアクセスすると、静的コンテンツはサイトからではなく CDN 経由で読み込まれます。 CDN サーバーは世界中に配置されているため、これははるかに高速です。 CDN 自体はプロキシの原理に基づいて機能し、ユーザーに最も近いサーバーを決定することで、より高速で便利なコンテンツ配信を保証します。 この略語は、Content Delivery Network または Content Delivery Network の略です。
では、ブラウザーは、サイトのサーバーではなく CDN 経由でファイルをダウンロードするタイミングをどのように判断するのでしょうか? 静的ファイルの URL は、CDN を指すように書き換えられます。
たとえば、サブドメインの CDN を設定したいとします。 CSS-Tricks Web サイトでは、アドレスは cdn.css-tricks.com となる場合があります。 したがって、ファイルのすべてのリンクはサブドメインに移動します。
大まかに言うと、サイト上のファイルのアドレスは次のとおりです。
http://www.css-tricks.com/image.jpg http://www.css-tricks.com/style.css http://www.css-tricks.com/script.js
http://www.css-tricks.com/image.jpg http://www.css-tricks.com/style.css http://www.css-tricks.com/script.js |
...は次のようになります。
http://cdn.css-tricks.com/image.jpg http://cdn.css-tricks.com/style.css http://cdn.css-tricks.com/script.js
http://cdn.css-tricks.com/image.jpg http://cdn.css-tricks.com/style.css http://cdn.css-tricks.com/script.js |
ブラウザーは、サイト サーバーではなく CDN にリクエストを送信します。 ライオンの分け前サーバーからの負荷が軽減され、サイトが高速になります。
待って、1 つのサイトに 2 つのサーバーがあるのですか?これはある程度は真実ですが、これは 2 つのサーバーを管理することを意味するものではありません。
CDN がサーバーとユーザーのブラウザーの間の仮想レイヤーとして使用されるという考え方です。 この層は、サーバーへのブラウザー要求をキャッチし、サーバーに代わってキャッシュされたファイルでそれらに適切に応答します。
場合によっては、静的ファイルを CDN に直接アップロードして、サーバーの負荷を完全に取り除くことができます。 この記事では、2 つのサーバーにファイルをアップロードして異なるアドレスを使用する必要がないように、サーバーから CDN 静的ファイルを取得してキャッシュするプロセスについて説明します。
CDN をインストールする方法 カスタムアプリケーション多くのサービスがありますが、最もよく使用されているのは Amazon AWS と MaxCDN です。 今日は MaxCDN サービスについて見ていきます。
ステップ 1: CDN を選択してサイトを登録するサイトに CDN が必要であると判断した場合は、登録する必要があります。 非常に多くの方法がありますが、それぞれの長所と短所を比較検討する必要はありません ( 良い話題次の記事で)、いくつかのサービスを列挙します。
登録の主な目的は、ローディングエリアを作成することです。 CDN のダウンロード領域は、サポートされているすべてのファイルが含まれるバケットと考えることができます。 データは、最初にファイルをリクエストしたときに指定したディレクトリから自動的に取得されます。 ユーザーの場合、ファイルは CDN のサブドメイン、または CDN を指すカスタム ドメインからダウンロードされます。 ごみ箱のデータは、指定した期間が経過すると自動的に削除されます。
ステップ 2: CDN への URL を作成するCDN URL は、セットアップ後にすべてのファイルがダウンロードされるアドレスです。 経験則としては、ファイルを簡単に検索し、データベース内のすべての既存ファイルのアドレスを置き換えることができるように、URL には単純な名前を使用することです。
他のサブドメインと同様に、cname レコードを指定する必要があります。 DNS設定あなたのホスト。
CDN アドレスの変数を作成する方法と、それを使用してプログラムで URL の前に静的リソースを挿入する方法を見てみましょう。 これが必要な理由: (1) マークアップで間違いが起こりにくくなり、(2) 変更が必要となる URL の操作が容易になります。
これを行うには、CDN のグローバル変数が必要です。これを静的リソース URL の左側に追加します。 後で作業しやすいように、PHP と JS の両方で変数を作成します。 この変数は、必要に応じて CDN を簡単に無効にするのにも役立ちます。 アドレスをサーバーに返すには、値を / に置き換えるだけです。
次の例は単なる例であり、使用しないでください。 実際の使用例は異なる場合があります。
「こんにちは世界」 /* スクリプト内で CDN を使用するための JavaScript グローバルを定義しましょう */ var cdnURL = "";
関連記事
|
