【パフォーマンス向上】Google CDN とローカルホスティングの jQuery を使い分けて読み込み速度を劇的に改善する方法
2024-04-02
GoogleホスティングのjQueryをCDN経由で使用し、Google側の問題発生時にローカルホスティングのライブラリにフォールバックする方法
概要
- Google CDN経由でjQueryをホスティングする
- Google CDNに接続できない場合、ローカルホスティングのjQueryライブラリにフォールバックする
手順
- HTMLファイルに以下のコードを追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="path/to/local/jquery.min.js"><\/script>');
}
</script>
このコードは、まずGoogle CDNからjQuery 3.6.0をロードしようとします。しかし、何らかの理由でGoogle CDNに接続できない場合は、path/to/local/jquery.min.jsにあるローカルホスティングのjQueryライブラリをロードします。
- ローカルホスティングのjQueryライブラリを用意します。
上記のコードで指定されたパスに、jQueryの最新バージョンをダウンロードして配置します。
メリット
- Google CDNを使用することで、高速なロード時間を実現できます。
- Google CDNに接続できない場合でも、ローカルホスティングのライブラリを使用することで、ページの機能を維持できます。
デメリット
- ローカルホスティングのライブラリを更新する必要がある場合、手動で更新する必要があります。
- 上記のコードは、jQuery 3.6.0を例としています。使用するjQueryのバージョンに合わせてコードを変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<h1>サンプルコード</h1>
<p>このサンプルコードは、Google CDN経由でjQueryをホスティングし、Google側の問題発生時にローカルホスティングのライブラリにフォールバックする方法を示します。</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="path/to/local/jquery.min.js"><\/script>');
}
</script>
<script>
$(function() {
// jQueryを使った処理
alert("jQueryが読み込まれています！");
});
</script>
</body>
</html>
- このコードは、
head要素内にGoogle CDNからjQuery 3.6.0をロードするスクリプトタグを含んでいます。 window.jQueryオブジェクトが存在しない場合は、path/to/local/jquery.min.jsにあるローカルホスティングのjQueryライブラリをロードするスクリプトタグを挿入します。$(function() { ... })内のコードは、jQueryが読み込まれた後に実行されます。
注意事項
- ローカルホスティングのjQueryライブラリは、
path/to/local/jquery.min.jsというパスに配置する必要があります。
Google CDN 以外で jQuery を読み込む方法
ローカルファイルから読み込む
jQuery のファイルをダウンロードして、自分のサーバーに保存します。そして、HTML ファイルの <script> タグで読み込みます。
<script src="path/to/jquery.min.js"></script>
メリット
- Google CDN に依存しない
- 読み込み速度が速くなる場合がある
- ファイルの管理を自分で行う必要がある
- セキュリティ対策を自分で行う必要がある
CDNjs から読み込む
CDNjs は、オープンソースの CDN サービスです。jQuery を含め、様々なライブラリを CDN 経由で読み込むことができます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- Google CDN 以外で jQuery を読み込みたい場合に useful
- 複数の CDN から読み込むことで、冗長性を確保できる
- Google CDN よりも読み込み速度が遅くなる場合がある
npm からインストールする
Node.js を使用している場合は、npm から jQuery をインストールすることができます。
npm install jquery
インストール後、以下のコードで jQuery を読み込むことができます。
const $ = require('jquery');
// jQueryを使った処理
- Node.js プロジェクトで jQuery を使用する場合に convenient
- バージョン管理が容易
- Node.js を使用していない場合は利用できない
- 速度と信頼性を重視する場合は、Google CDN を使用する。
- Google CDN に依存したくない場合は、ローカルファイルから読み込む。
- 複数の CDN から読み込むことで、冗長性を確保したい場合は、CDNjs を使用する。
jquery cdn google-ajax-libraries
