はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた

アフィリエイト広告を利用しています

投稿日：2016-05-15 更新日：2019-06-27

はてなブログって基本的にページの読み込みが遅い上に、カスタマイズのためにjQueryを利用するとさらに速度が遅くなってしまいます。うちのブログはいじりすぎて遅い…。

少しでもjQueryの読み込みが速くなるようにコードを変えてみました。

はてなブログではシェアボタン、グローバルナビ、サイドバーの固定などのカスタマイズでjQueryを利用している人は多いはず。

こんな感じで読み込んでる人がほとんどだと思います。

デザイン→カスタマイズの「ヘッダー」か「フッター」のどこかにこのコードがあるかと。

私は、以下のように書き換えています。

こうすると多少は読み込みが速くなります。

注意して欲しいのは、私のブログでは問題なく動作していますが、他の人のコードでも大丈夫という保証はないということです。

おそらく問題なく動作するはずですが、ご利用は自己責任でお願いします。劇的に速くなるというモノではないので、不安な方はスルーして下さい。

追記：コメント欄にて、「読み込み速度がかなり速くなった」とのコメントをいただきました。やはり効果があるみたいですね。

このコードを利用している他のブログでも問題なく動作しているようです。

コードについての説明も書いておきます。

jQueryには、IE8以下にも対応している1.x系のバージョンと、IE8以下には対応していない2.x系のバージョンがあります。

2.x系は古いIEに対応していない変わりに、新しいブラウザに最適化しているので動作が速くて安定しています。

上記のコードはIEのバージョンによって読み込むjQueryのバージョンを変えています。

jQueryを読み込むためにCDNを利用していますが、CDNのサービスを提供しているのはjQueryの本家サイト以外にもいくつかあります。

CDNによって読み込みの速度が違うので、比較記事をいくつか調べてみました。

色々調べてみると、jQuery本家のCDNは遅いことが判明したので、

code.jquery.com/ → ajax.aspnetcdn.com/ajax/

このように変えてみました。これはMicrosoftが提供しているCDNで比較的高速です。

ただ、CDNは配信元が提供をやめてしまうと利用できなくなる可能性があります。本家のCDNはその点の不安がないというメリットはあります。

私からは以上です。良かったら上記のコード利用してみて下さい。（動作チェックは必ずしてね）

jQueryの勉強するなら、この本がオススメ

株式会社シフトブレイン SBクリエイティブ 2013-11-27

自分でJavaScript（jQuery）を勉強してみたいという方は、こちらの記事もおすすめです。

他にもこんな記事書いてます。