CSSやJSはCDNを利用してウェブサイトの表示速度を高速化しよう!

CDNを利用してウェブサイトの表示速度を高速化

スマホ普及に伴いスマホでウェブサイトを閲覧するのが当たり前の時代になりインフラの通信速度も大容量で速くなってきてはいますが、やはりユーザへの負担を軽減しストレスなく快適に閲覧してもらうには、ウェブサイトの表示速度を出来る限り速くすることが重要です。また、ウェブサイトの高速表示はSEOにも影響を及ぼすとされているので軽視することはできません。

ウェブサイトを高速表示させるには様々な部分を改善さなければいけないのですが、まずはその中でも手軽に導入できるCDNを導入してみるのが良いかと思います。

CDNとは?

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。 引用元:Wikipedia

CDNをもう少し具体的に説明すると、ウェブサイトを表示する時に一般的に使われているjQueryのjavascriptやcssファイルを世界中にある高速なサーバーに設置して、そのファイルを皆で共用しようと言うものです。例えば、サーバーがアメリカにありファイルもアメリカにある場合、日本から閲覧すると速度は遅くなりますが、CDNなら閲覧者から一番近いサーバーからファイルを読み込むので表示速度は速くなるという仕組みです。

CDNを利用しない場合、ウェブサイトを表示するには自分のサーバー内にあるjsやcssファイルを読み込むのですが、アクセスが多い場合、共有サーバーなどではレスポンスが悪くなったり表示速度が低下したり、最悪の場合は503エラーになってサイトが閲覧できなくなってしまいます。

でも、CDNで用意されているファイルを外部サイトから読み込めば、自分のサーバーへの負担がなくなり、高速表示につながると言う訳です。CDNを提供しているプロバイダーには、皆さんもご存知のGoogle、Microsoft、jQueryなどを筆頭に大手ばかりなので高速かつ安定していて、ファイルが読み込めないなどの問題はほぼ発生しないと考えても大丈夫です。むしろ、非力な共有サーバーの方が不安定かもしれません。

CDNを利用するメリット

ウェブサイトの表示速度が速くなる

ウェブサイトはhtmlやphpファイル、css、javascript、画像ファイルなどを読み込んで表示しているのですが、読み込む数が多ければ多いほど表示速度が遅くなってしまいます。しかしCDNを利用することで、その一部を外部からのリソースに分散させることができ、ウェブサイトの表示速度が速くなります。

また前途でも触れましたが、CDNの場合、閲覧者から一番近いサーバーからファイルを読み込む為、物理的距離も短くなりレスポンスも早くなります。

自サーバーへの負担や転送量を軽減

共有サーバーの場合、アクセス数が多くなるとサーバーのレスポンスが悪くなってしまい表示速度に大きく影響してしまいます。また、データの軽いjavascriptやcssファイルでもアクセス数が多いと転送量も多くなってしまいます。

しかし、CDNを利用することで、自サーバーのファイルを読み込む必要がなくなるので、サーバーへの負担が分散され表示速度に好影響を与え、更にその分のデータ転送量も軽減されるので、いいこと尽くめです。

cssやjavascriptをCDN化する方法

CDNの導入方法は至って簡単!以下のようにcssやjavascriptファイルの読み込み先「href」内の記述をローカルから、CDNの供給先のURLへ変更するだけです。

導入前

<link href="css/bootstrap.min.css" rel="stylesheet">

導入後

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

CDNプロバイダー(供給先)の探し方

「CDN + フィル名 」でウェブ検索すれば、一般的に使われているCSSフレームワークのBootstrapやFoundation、jQueryプラグインやライブラリ、ウェブフォントなどは直ぐに見つかると思います。

jQueryのプラグインやライブラリなどのjavascriptのCDNならcdnjs.comで検索すると簡単に見つけることができます。しかも細かなバージョン別で用意されていたり、CDNプロバイダー(供給先)も複数ある場合もあります。

cdnjs.com

Bootstrap用のcssとjavascriptであれば、BootstrapCDNで用意されていますし、Font Awesomeのcssも一緒の供給されていて便利です。

BootstrapCDN

まとめ

メリットだらけのCDNを利用することでサーバーの負担が軽減され、ウェブサイトの表示速度を高速化する手助けになるので、導入することをおすすめします。しかし、分散しすぎて外部の色々な所からファイルを読み込むと逆効果の場合もあるので、比較的軽いファイルならCDNを使わずに、今まで通りローカル内にファイルを置くなり、一まとめにするなりした方が良いかもしれません。

WordPressなどCMSを利用していて、いろいろなプラグインをインストールしている場合、かなり多くのjavascriptやcssが読み込まれて表示速度を遅くしている可能性があります。一度、CDNが使われているかソース内をチェックした方が良いかもしれません。

ウェブサイトの表示速度やCDNの導入に関するお悩みやご相談があれば、お気軽にお問い合わせください。