jQuery

Javascript

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 ]

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    Javascript おすすめのデートピッカー(日付選択ライブラリー)

    WEB制作の仕事をしていると、お客さんからの依頼でデートピッカ…

  2. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  3. JavaScript

    Javascript

    Yahoo!地図にコントロール追加

    Web APIを使って、Yahoo!地図にいくつかのコントロールを…

  4. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

  5. JavaScript

    Javascript

    「jQuery ui Datepicker」の基本的な使い方

    先日フォームの作成依頼があった際に、日付欄はユーザーに直接…

  6. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

最近の記事

  1. Technology-Connection-Net
  2. ドメインにハイフンを使うのは日本人だけ?
  3. SSL(HTTPS)
  4. ドメインについて
  5. WP:WordPress(ワードプレス)
  6. ドメイン(domain)
  7. JPドメイン
  8. 高速(スピード)
  9. ブログアクセス
  10. 高速(スピード)
PAGE TOP