コンパイラかく語りき

import { Fun } from 'programming'

【jQuery】スピードテストの結果、いまさらCDN読み込みに乗り換えました

chuckです。

みなさん、jQueryをどのようにインクルードしてますか??

僕はローカルにダウンロードしたものをインクルードしていました。しかし、どうやらCDNでインクルードした方が良いっぽいので、調べました。

 

基本的なことはこちら。

e-words.jp

 

仕組み的なことはこちら。

viral-community.com

 

分かりやすかったのがこちら。

etc9.hatenablog.com

 

 

スピードテストしてみる

f:id:chuck0523:20151006071706p:plain

HTML書きました。ローカルのjQueryを読み込んでみます。

 

ブラウザで計測。

f:id:chuck0523:20151006071753p:plain

 

 

次にCDN読み込み。

f:id:chuck0523:20151006071822p:plain

 

f:id:chuck0523:20151006071833p:plain

あれ、若干遅くない?

ローカルだから、そりゃあローカルのjQueryの方が早いか…??

 

GitHubに上げて計測

GitHubにあげました。

f:id:chuck0523:20151006072055p:plain

GithubPagesを利用してブラウザで表示させます。

 

ローカル読み込み。

http://chuck0523.github.io/front-end-coding/jQueryIncludeTest/jQueryInclude02.html

f:id:chuck0523:20151006072331p:plain

さすがに時間がかかってますね。0.4〜0.5秒くらいかかってます。

 

CDN読み込み。

http://chuck0523.github.io/front-end-coding/jQueryIncludeTest/jQueryInclude.html

f:id:chuck0523:20151006072412p:plain

早い!笑

0.2秒くらいですかね。

 

まとめ

こんなにも速度が違うとは思いませんでした。AngularやBootStrapなど、読み込みファイルが増えるとより違いは顕著になりそうですね。

今まではローカルファイルを読み込んでいたのですが、これからはCDN一択になりそうです。というわけで、今更ですが今回はCDNについて調べてみました。

 

※お使いの環境やネットワークの状況によって結果は変わるかもしれません。