超現場ブログ

Technique,Design and Events

いまさら聞けないCDNの基本

Twitter Facebook Google+ はてブ

20171017

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ファイルをダウンロードし、
コーディングしたファイルを一緒にサーバーにアップする方法がありますが、今回はダウンロードはしません。

読み込むコードをこんな感じにします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

色々なCDNサービスを知ろう

先ほどはGoogle Hosted Librariesを例に使ってみましたが、探すと色々なCDNサービスがあります。
その中から、特に活用頻度が高いものをご紹介して今回は終わりになります。

Webサイトが作れるようになったら、表示速度の改善やSEO対策など、色々なことにチャレンジしてみてください!

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.