Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

jQueryライブラリのパスの統一

このブログで紹介しているカスタマイズの中にはjQueryを使用しているものがいくつかあるのですが、その紹介の際にjQueryライブラリの読み込み先をはてな版CDNにしていました。(その理由は後述)

<!--jQueryを使用-->
<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.9.1" type="text/javascript"></script>

これです。(以前の記事のもの)

これを本家のjQuery CDNに変えました。はてなの提供しているものは将来パスが変わったりすることがあり得るからです。

<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

はてなブログ高速化のために jQueryライブラリのパスの統一

私ははてなブログではjQueryの読み込みははてな提供のjQueryライブラリを使用しています。
これはSTDIOさんのこんな記事を読んだからです。
www.stdio.jp
この記事のなかの「自身で組み込むjQueryをはてな版に変更する」という方法を真似しているんです。
なのでカスタマイズ記事でもはてな版を書いていたのですが、はてな版の提供がなくなったりパスが変わったりすることがあり得るため(ほとんどないと思いますが)、一般に広く使われているライブラリに変更しています。

ブログを高速化したいと考えている方は以下のはてな版jQueryライブラリへ変更してみて下さい。(2016年11月01日最新ver)

<!--jQueryを使用-->
<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3" type="text/javascript"></script>

どのくらい効果があるのかというと、以下の記事では

データ量はおよそ4.7%削減できたことになります。

www.naenote.net
だそうです。

jQueryライブラリ読み込み指定は一回で良い

カスタマイズのためにコピペでコードを貼り付けていらっしゃる方も多いと思いますが、jQueryを既に読み込んでいるのにコピペでそのまま貼り付けている場合、無駄に複数のjQueryライブラリの読み込みをしていることもあるかもしれません。
いろんなブログからコピペしている方は一度コードを確認してみて下さい。

スクリプトは「フッタ」にまとめたいのだが…

本来ははてなが推奨しているようにスクリプトなどはフッタにまとめたいのですが、

サイドバーや記事下などに配置するものではなく、ブログ全体で動作するブログパーツやスクリプトは、なるべくページの下部で読み込まれるように、デザイン設定画面の「カスタマイズ」タブの「フッタ」に記述することをおすすめします

ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ
ブログ全体で動作するものはよいのですが、記事下のシェアボタンのスクリプトなどはフッタに書くと動作しません。
なので私は「ヘッダ」で読み込先を指定して、シェアボタンのコードは「記事下」に置いています。

はてなブログは割りと「重くて遅い」のですが、工夫次第で「平均的な速さ」にはなります。