CDN上にキャッシュされたjQueryの読み込みについて

CDNとは

CDNとは、Content Delivery Network（コンテンツデリバリネットワーク）の略になります。

Akamaiが1990年代に提唱した仕組みで、コンテンツを配信する為に用意されたネットワークの事です。

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

それにより、WEBサイトの表示速度の改善やサーバーへの負荷軽減、安定した運用などを実現することが出来ます。

CDNは多くのサービスが存在しますが、
jQueryファイルも、Googleなど複数の企業がCDNサーバーにキャッシュしたものを利用することが可能です。

こちらの記事では、CDN経由で読み込むことが出来るjQueryファイルについてまとめました。

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

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

このような感じです。
<script type="text/javascript" src="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ファイルをダウンロードしたり、アップロードする手間が省けます。
面倒な作業は極力減らしたいですから、こちらの方が楽ですね。

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

さらに、
ブラウザにキャッシュされるので、ページの表示速度の高速化も期待できます。

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

まとめると、

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

というのが、メリットになります。

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

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

利用できるCDNサービス

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

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

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

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

jQueryのCDNサーバー

■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.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.4.1/jquery.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

[ 公式サイト：Google Hosted Libraries ]

MicrosoftのCDNサーバー

■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.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>

[ 公式サイト：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.12.1/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

■CSS
非圧縮版：<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/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.12.1/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

■CSS
非圧縮版：<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/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.12.1/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>

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

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