※当記事内には、商品プロモーションを含む場合があります
読んでほしい記事
CDN上にキャッシュされたjQueryの読み込みについて

今回は、CDNにキャッシュされたjQueryについてまとめています。
jQueryの読み込みURLを探している方は、ぜひ参考にしてください。

CDNとは

CDNとは、Content Delivery Network(コンテンツデリバリネットワーク)の略になります。
Akamaiが1990年代に提唱した仕組みで、コンテンツを配信する為に用意されたネットワークの事です。

世界中に配置されたCDNサーバーにキャッシュされたWEBコンテンツ(HTML、JS、CSS、画像など)を利用することで、様々なメリットを得ることができます。
それにより、負荷が分散され高速に読み込むことが出来る仕組みになります。

CDNのメリット
  • WEBサイトの表示速度の改善
  • サーバーへの負荷軽減
  • サーバーのリソース削減
  • 同時アクセス時でも安定した運用

一般的には、自社のコンテンツをCDNへキャッシュして利用することができます。
例えば、カラフルボックスの提供するCDNは手軽に利用できるので、自社サイトの改善に非常に便利です。

ただ、それ以外にも、jQueryのような多くの人が利用するコンテンツをCDN経由で読み込める仕組みもあります。
それにより、jQueryを自社サーバーに置く必要もなくなり、その分のリソースの削減にもつながります。

 

キャッシュされたjQueryファイルを利用するメリットは?

通常、jQueryを利用する場合には、公式サイトなどからダウンロードしてきたjQueryファイルをサーバー上にアップロードして読み込みます。

このような感じです。
<script type="text/javascript" src="common/js/jquery-x.x.x.js"></script>
<script type="text/javascript" src="https://example.com/common/js/jquery-x.x.x.js"></script>

これを、CDNから読み込む場合には、以下の様に<script>にURLを設定するだけになります。
<script type="text/javascript" src="https://code.jquery.com/jquery-x.x.x.js"></script>

その為、自分でjQueryファイルをダウンロードしたり、アップロードする手間が省けます。
面倒な作業を極力減らしたい方には、CDN上から読み込んだ方が楽ですね。

また、jQueryを自分のサーバーに置いて読み込ませなくていいので、その分サーバーへの負荷を軽減させることが出来ます。

さらに、CDN経由で読み込んだjQueryはブラウザにキャッシュされるので、WEBサイトの表示の高速化も期待できます。

レスポンスヘッダーを確認してみると「cache-control: public,max-age=31536000」と設定されていると思います。
これは、「31536000秒=365日」の間、ブラウザにキャッシュを設定するように指定するものです。

まとめると、このようなメリットを得られます。

  • jQueryをダウンロードしたり、サーバー上にアップロードする手間を減らせる
  • 自サーバーへの負荷を減らすことが出来る
  • ブラウザキャッシュにより、ページの表示速度を改善できる

ただし、デメリットもあります。
CDNのサービスが停止されると、当然jQueyを読み込めなくなってしまいます。

とはいえ、配信しているのはGoogleやMicrosoftなど大手が多いので、サービスが停止される可能性は低いとは思いますが・・・

 

利用できるCDNサービス

jQuery、Google、MicrosoftによってCDNサーバーにキャッシュされたjQueryを利用することが出来ます。

私は本家のjQueryから読み込んで利用することが多いです。
ですが、どのCDNサーバーから読み込んでも変わらないので、好きな物を利用して下さい。

上記以外にも、jsDelivrCDNJSなどのサービスがありますが、あまり利用する機会はないです。

jQuery、Google、Microsoftについては、コピペで利用できるようにまとめておきます。

jQueryのCDNサーバー

■jQuery 3.x系
非圧縮版:<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
圧縮版:<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

■jQuery 2.x系
非圧縮版:<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
圧縮版:<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

■jQuery 1.x系
非圧縮版:<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
圧縮版:<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

[ 公式サイト:jQuery CDN ]

GoogleのCDNサーバー

■jQuery 3.x系
非圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

■jQuery 2.x系
非圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

■jQuery 1.x系
非圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script&gt
圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script&gt

[ 公式サイト:Google Hosted Libraries ]

MicrosoftのCDNサーバー

■jQuery 3.x系
非圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>

■jQuery 2.x系
非圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>

■jQuery 1.x系
非圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

■jQuery Migrate
非圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-migrate-3.4.1.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-migrate-3.4.1.min.js"></script>

[ 公式サイト:Microsoft Ajax Content Delivery Network | Microsoft Docs ]

 

jQuery UIの読み込み

jQueryライブラリーのjQuery UIもCDNサーバーから読み込むことが出来ます。

jQuery UIは、サイトに様々な動きを付けることが出来るライブラリーで、多くの方が利用されています。
こちらもCDN経由で読み込めるのは大変助かりますね。

jQueryのCDNサーバー

■jQuery UI本体
非圧縮版:<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
圧縮版:<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

■CSS
非圧縮版:<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/redmond/jquery-ui.css">
圧縮版:<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/redmond/jquery-ui.min.css">

[ 公式サイト:jQuery CDN ]

GoogleのCDNサーバー

■jQuery UI本体
非圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

■CSS
非圧縮版:<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/redmond/jquery-ui.css">
圧縮版:<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/redmond/jquery-ui.min.css">

[ 公式サイト:Google Hosted Libraries ]

MicrosoftのCDNサーバー

■jQuery UI本体
非圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/jquery-ui.js"></script>
圧縮版:<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/jquery-ui.min.js"></script>

■CSS
非圧縮版:<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/themes/humanity/jquery-ui.css">
圧縮版:<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/themes/humanity/jquery-ui.min.css">

[ 公式サイト:Microsoft Ajax Content Delivery Network | Microsoft Docs ]
この記事を書いた人
userimg
ダッチ
    プログラミング15年、WEB制作15年以上になります。

    レンタルサーバー、WordPressに強く、分からないことがあればご質問ください!
    解決のお手伝いを致します。
    ※特にエックスサーバー、Conoha Wing、ロリポップに強いです!

    ご質問は、ツイッター(X)のアカウントをフォローした上でDMよりお願いします。
    >> ツイッター(X)

    Twitterでフォローしよう

    おすすめの記事