CDNでjQueryを読み込みつつ、ダウンした際はローカルファイルを読み込む（フォールバックする）記述をご紹介

Web2016年12月9日

一般的にサイトパフォーマンスを最適化するにあたって、jQueryなどのライブラリをGoogle等が用意しているCDNより読み込むことがあります。
多くのメリットがあるためWebサイト開発の際に重宝されますが、サーバがダウンした際はファイルを読み込めなくなるため、いかに自身のWebサイトが設置されているWebサーバが強固なものであったとしても、少なからず外部要因でWebサイトに影響を与えるリスクを抱えることになります。

そこで、CDNからjQueryの読み込みができなかった場合は自サイトに設置したjQueryを読み込むようにする記述の仕方をご紹介します。

CDNとは？

CDN（Contents Delivery Network, CDN）とは、ファイルや画像といったWebコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

CDNのメリット

サーバ側でのgzip圧縮による軽量化されている
ユーザーのキャッシュ効果が高い
サーバーが世界各地に分散しているおり、最適なパフォーマンスを訪問者に提供できる
自身のサーバにjQueryなどのファイルを置く必要が無い

jQueryを読み込むことのできるCDNの種類

jQueryを読み込むことのできるCDNは以下の3つのサービスが主に挙げられます。

Google Hosted Libraries
Microsoft AJAX CDN
jQuery CDN

Google Hosted Libraries

Google Hosted Librarie

Googleが開設しているCDNです。以下のような記述で読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Microsoft AJAX CDN

Microsoft AJAX CDN

Microsoftが開設しているCDNです。以下のような記述で読み込みます。

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>

jQuery CDN

jQuery CDN

jQueryの配布元[jQuery.com]が開設しているCDNです。以下のような記述で読み込みます。

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

プロトコルの省略について

上記、ご紹介したソースコード内のファイルパスの先頭に[http:]や[https:]が無いことに気付かれましたでしょうか。
このようにプロトコルを省略すると、アクセス元のプロトコルが自動的に適用されるためセキュリティの警告が出ないなどのメリットがあります。
Googleからも推奨されているので、上記のようにプロトコルを省略する形式でCDNを使用するようにしましょう。

※ローカル環境では記述する必要があるので注意

CDNがサーバダウンした時にはどうする？

前置きが長くなりましたが、ここからが本題です。

通常上記の記述のみでjQueryの読み込むを行うことが多いですが、冒頭で述べました通り上記の記述のみでは万が一サーバがダウンした際にjQueryを読み込めず、Webサイトの機能が損なわれることになります。そこで、以下のような記述に変更することでリスクヘッジを行います。

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>window.jQuery || document.write('<script src="/common/js/jquery-2.2.4.min.js"></script>')</script>

フォールバック対応

簡単に言えば、CDNのサーバがダウンしていた際は自サイトに格納してあるjQueryを読み込むようにします。これをフォールバックといいます。

window.jQueryのスクリプトにより、jQueryがCDNから読み込まれていれば[function()]、読み込まれていなければ[undefined]が返ってきます。これを利用してCDNからjQueryが読み込めなかった場合は、自サイトに格納してあるjQueryを読み込むようにすることができます。

まとめ

過去、事実としてCDNのサーバダウンしてWebサイトに影響を与えてしまった例もあります。せっかく安定して運用できているサイトでも、外部要因でWebサイトが不具合を起こしてしまってはせっかくの努力も水の泡です。

jQueryなどのライブラリを読み込む際は、ご紹介したようなフォールバック対応の記述を行うことで、CDNのサーバがダウンした際もWebサイトを正常に稼働させることができます。ぜひご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。