Magentoは多くのJavaScriptやCSSファイルを読み込むアプリケーションです。
標準の状態でも10個以上のJavaScriptファイルを読み込んでいるので、YSlowなどで測定すると、確実に「JSファイルをマージしろ」と指摘を受けます。

この対策としてMagentoにはJavaScriptとCSSファイルをマージする機能が備わっているわけですが、サイトをカスタマイズしていくと確実にjQueryやそのプラグインといった、便利なJavaScriptを読み込ませたくなります。
そうなると、ますますheadタグに記述するJavaScriptファイルの数は増え、ページの読み込みが重くなります。

このエントリではどうすればJavaScriptファイルをheadタグに追記せずに使用するか、そしてマージ機能を利用してHTTPリクエスト数をできるだけ増やさずに対処していくかを解説します。

MagentoでJavaScriptファイルを追加するには

一番オーソドックスにJavaScriptファイルを追加したいのであれば、レイアウトXML上のheadブロックにactionタグを追記するのが簡単です。
この場合、以下のようにレイアウトXMLを書くことで調整ができるでしょう。

skin_jsjs/jquery.js

しかし、この方法ではheadタグが肥大化するだけで、マージ機能を使ってもHTTPリクエスト数を削減する程度のメリットしか得られません。

あるいは静的に例えばCDNをはじめとする外部のサーバからJavaScriptを読み込ませる場合は、head.phtmlに正直に書くのが一番簡易でしょう（簡単というだけでベストか、ということとは別問題ですが）。

bodyタグ終了直前にJavaScriptファイルを配置するには

さて、このエントリの主題にはいります。
このエントリではbodyタグの終了直前にscriptタグを配置する方法を紹介します。

before_body_endブロックを利用する

最初に、Magentoにはbefore_body_endというブロックが標準で用意されていることを知っておいてください。
このブロックは名前の通り、bodyタグ終了直前に配置されています。しかも、子ブロックの出力データを自動的に表示する機能を持っています。
よくある要望として、各種計測タグを設置するものがあるのですが、before_body_endブロックを使うことで、タグの仕様を満たしながら、ページ別の出し分けなどに対応することができます。

さて、scriptタグを配置するのにbefore_body_endブロックを利用する場合、どうすればよいのでしょうか？
方法が2種類ありますので順に説明していきましょう。

テンプレートを追加して、scriptタグを直書きする

Magentoに最初から用意されているブロッククラスで、Mage_Core_Block_Templateというブロックががあります。
単純に指定したテンプレートファイルを読み込んで、出力を行うだけのクラスなのですが、このクラスと独自のテンプレートファイルを組み合わせることで、scriptタグをbodyタグの終了直前に出力できます。

例えば、テンプレートファイル（custom/scripts.phtmlとします）で以下のように記述し、

その後レイアウトXML（local.xmlを使うのがわかりやすいでしょう）で定義を行います。

こうすると、指定したテンプレートを読み込んで、scriptタグがbodyタグ終了直前に出力されます。
これは主に外部サービスから取得するファイルを使用する際に使用します。 

Mage_Page_Block_Html_Headを利用する

もう一つの方法は、Mage_Page_Block_Html_Headを使用する方法です。
このクラスは元々headブロックで使用しているもので、CSSやJavaScriptファイルの読み込みに欠かせないscriptタグやlinkタグを出力する機能を備えています。

このクラスは通常のレイアウトXML定義ではhead.phtmlをテンプレートとして使用しているのですが、オリジナルのテンプレートを使用することもできます。

例えば以下のようにテンプレートを作成（PHPタグは省略しています）し、

echo $this->getCssJsHtml();
echo $this->getChildHtml();

レイアウトXML上で次のように定義することで、わざわざscriptタグをフルパスで書かなくても良くなります。




skin_jsjs/jquery.js
skin_jsjs/noconflict.js

この方法は少し面倒ではありますが、ページ別に読み込むファイルを変えたい場合には重宝します。
というのも、テンプレートファイルを用意する方法ではバリエーション1つ1つに対してテンプレートを用意しないといけなくなるため、徐々に管理が煩雑になってきます。

その反面この方法では、1つのレイアウトXMLに定義を集約できるので、管理がしやすくなるのです。

ファイルをマージしたい場合は

さて、こうしてbodyタグ終了直前にscriptタグを配置できるようになりましたが、これらのファイルを1つにマージして配信したい場合はどうすればよいのでしょうか？

minifyライブラリを使用して、予め縮小しておく

jQueryなどの本体に手を入れる必要がないライブラリについては、minifyというJavaScriptやCSSファイルのサイズを縮小するライブラリ・ツールなどを使用して予め縮小・マージしておくのがよいでしょう。ライブラリ自体もそのような配布をしていることが多いので、最初からそれらのファイルを使用するのも手です。

いずれにしても、テンプレート上にscriptタグを逐一書いていくのであれば、予めminifyするなどして、記述する数を減らしておくのがよいでしょう。
ただし開発中のサイトの場合、デバッグがしにくくなるというデメリットがあるので注意が必要です。

Mage_Page_Block_Html_Headを使用してマージする

Mage_Page_Block_Html_Headを使用する場合は、Magentoの設定でマージが可能です。こちらのほうが開発中はマージせずにおいて、実運用ではマージするといった使い分けができます。
また、「MagentoのCSSとJavaScriptをマージする」で紹介した、Fooman_Speedster_Advancedなどのエクステンションを併用することで、動的にminifyを行うこともできます。

まとめ

Magentoでは多くのJavaScriptファイルを使用します。より効率的なページ描画をするためには、

  • Magento標準以外のJavaScriptはできるだけbodyタグ終了直前に配置する
  • 事前にJavaScriptファイルはマージ・minifyしておく
  • またはMagento本来の機能とエクステンションをうまく使用して、動的にマージ・minifyをする

ことが重要です。