jQuery

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から読み込んでも変わらないので、好きな物を利用して下さい。

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

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 ]

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. WP:WordPress(ワードプレス)
  2. URL設計(URLデザイン)
  3. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  4. SEO対策(外部ファイルの読み込み)
  5. URL リダイレクト
  6. インデックスされない
  7. 内部対策は必要?
  8. CMS(シーエムエス)
  9. SEO業者は必要?
  10. SSL(HTTPS)

Twitter

  • 機械学習を少し勉強してみて思ったのは、Pythonがよく使われるのは便利なライブラリーが揃っているので、楽!というだけ。 多分、Pythonを使えば、数学なんて全く分からんくても、勉強して流れさえ掴めば、誰にでも出来る分野だという… twitter.com/i/web/status/1…
    about 1日 ago via Twitter Web App

アーカイブ

PAGE TOP