いまさら聞けないCDNの基本 - Webデザイン・プログラミングオンライン個別指導のAkros

HTMLコーディングやWordPressテーマを作っているとjQueryのライブラリーを活用する機会があると思います。
どのようにしてライブラリーを読み込んでいますか？
ちょっとした方法でサイトの表示が速くなるかも。
または表示速度を改善しているときに「CDN」という言葉を目にしたことがありませんか？

CDNって何？

CDN･･･またはCDNサービスとも言われますが、
コンテンツ・デリバリー・ネットワーク（Content Delivery Network）の略です。

自分のサーバーとは別にGoogleなどの大手サーバーにライブラリーが置いてあり、
それを読み、キャッシュを利用することで、自分のページに読み込む画像や音声、動画、外部ファイル（CSSやJS）などの読み込み速度改善が期待できる（かも）というものです。

簡単にいうと、Aさんのサイトを閲覧することでGoogleからjQuery.jsファイルを読み込み、
Bさんのサイトでも同じjQuery.jsファイルを使っていたら、一度キャッシュされているので、読み込みは早いよね。っていうことです。
もっと簡単に説明すると、一度見たyoutubeの動画は2回目以降から表示が速い＝キャッシュに保存されているということですね。

そんなCDNサービス、もちろんデメリットもありますが、jQueryなどで使う分にはあまり意識する必要もありませんので、どんどん使ってみましょう！

CDNの使い方

では早速、jQueryを例にCDNを使ってみたいと思います。

まず、jQueryライブラリーを使うには、公式サイトからJSファイルをダウンロードし、
コーディングしたファイルを一緒にサーバーにアップする方法がありますが、今回はダウンロードはしません。

読み込むコードをこんな感じにします。
[html]<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>[/html]

これは、Google Hosted Librariesで配布されているjQUery3.2.1を読み込んでいることになります。
様々なライブラリーが各バージョン毎で使えるようになっていますので、非常に便利です！
また、Googleが提供していることから、色々なサイトでも使われていますので、既にあなたのブラウザにもキャッシュされているかもしれません。