MS Access Tips/Sample and VBA and Blog customize etc...

JavaScriptの読み込みを少しでも軽くする

ブログのカスタマイズにはまり、JavaScriptおよびjQueryにもはまり、ついつい、このブログにもJS、jQueryを多数導入しています。その結果、重く感じている方もみえるかも知れません。

シンプルなんですがデザイン性にすぐれたFC2用テンプレートを発表しているので注目していたサイトで、Javascript多用の例として私のブログが挙げられいたのをみてちょっとショックを受けてます。

Customizing FC2BLOG - ブログを重くさせているのは何だ? 現在は、当ブログへの参照は削除されています。

この記事に気づく前から確かにJSの多用しすぎかなとは思っていたのですが、せっかく苦労して導入したものを外すのも忍びなくて、そのままにしています。

そこで、少しでもJSを軽くする工夫をいろいろしてみました。

jsライブラリは一つに統一する

prototype、jQuery、mootools ・・・等、優秀なisライブラリが多数ありますが、それらを複数導入すると、やはり重くなる可能性があります。お互い競い合って進化していますのでたいていの機能はそれぞれ共通にありますので、一つのライブラリに決めた方がいいでしょう。当ブログでは、jQueryに統一することにしてます。

jQueryライブラリの読み込み法の工夫

当初は、jQueryライブラリをブログにアップロードしてそのファイルを読み込んでいたのだが、Google AJAX Libraries API を利用すると速いという話を見たので、こちらに変更してみました。

google.loadを利用せず、直接読み込むことも出来ます。

参考:
ASCII.jp:jQueryのダウンロードとインストールのチュートリアル|Web制作の現場で使えるjQuery UIデザイン入門

jsファイルをひとつに纏める

テンプレートのHTMLのheadブロックに自作のjavascriptを記述していましたが、外部ファイルにして読み込むようにしました。この方がキャッシュがきくので2度目からは読み込みが速くなるそうです。

また、jQueryのプラグインなど複数のjsファイルを読み込んでいましたが、上記の自作jsを含めてすべて一つのファイルに纏めて、読み込むようにしました。HTTPでのやり取りは,1回ごとにオーバーヘッドがありますから,複数のファイルに分割されているよりも,一つのファイルにまとめて1回の読み込みですませた方が全体的な速度は速くなるそうです。

hatena.js というファイルに纏めました。

ただし、fc2ブログの独自変数を含むスクリプトはそのまま外部ファイルにすると動作しませんので、工夫が必要です。これについては別記事で紹介する予定です。

jsファイルを圧縮する

PackerYUI Compressorなどjsファイルを圧縮するツールがあります。それを使ってファイルサイズを小さくすると読み込み時間を短縮できます。

ツールをダウンロードして実行してもいいのですが面倒なので、オンラインでYUI Compressorを使ってjsファイル圧縮ができるというYUI Online Compressorを利用させていただきました。

注意点として UTF-8 形式でないと動作しないようなので、エディタで UTF-8形式でファイル保存する必用がありました。また2バイト文字が含まれていると文字化けしますので2バイト文字を含まないようにしておく必用があります。

また、コメントはすべて削除されてしまいますので、作者、著作権等の部分は圧縮後、元ファイルからコピーして貼り付けておくべきですね。

圧縮した結果、上記の hatena.js 35kb が圧縮後、hatenamin.js 24kb と2/3ぐらいになりました。

FC2は文字セットがeuc-jpですのでUTF-8形式で読み込むために、charset="utf-8" という記述を追加しておく必用があります。

これだけのことをした結果、実際に軽くなったかどうかは、軽くなったような気もするし、変わらない気もするし、よく分かりません。まあ、気持ち的にはテンプレートのHTMLがスッキリしたのでいいとしておきます。

拍手する

3 Comments

denpaboy2 says..."申し訳ありません"

何の気に無しにエントリー投稿してしまいましたので、該当エントリーは修正しました。

申し訳ありませんでした。

貴サイトからは「syntaxhighlighter」の設置などを参考にしておきながら恩をあだで返すようなことをしてしまいました。

2009.09.09 17:46 | URL | #oZV3xPJ6 [edit]
hatena says...""

あっ、変に気を遣わせてしまってすみません。

JSを多用しているのは、事実ですので、あやまられるようなことはまったくないと思います。

当ブログでも denpaboy2 さんのテンプレートのデザインは参考にさせていただいてますし。

2009.09.09 23:02 | URL | #- [edit]
Hiro says..."参考にさせて頂きました。"

hatena 様。こんばんは。
各記事参考にさせて頂いており有難う御座います。
本記事もとても参考になりましたのでサイトにて紹介させて頂きました。

2009.09.12 19:32 | URL | #27Yb112I [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/167-ed9af6b1
該当の記事は見つかりませんでした。