JavaScriptのすべてのインクルードを前に移動します</ body>

35

誰もが知っているがどのようにMagentoののJSスクリプトタグなどのすべてを持っているん<script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>クロージング前にレンダリング</body>？

私はこれを以前に一度試しましたが、おそらく参照フッターで使用したaddJSメソッドの行に沿ってエラーが発生したと思います。

magento-1  performance  theme  layout  javascript 
— マーク・ウェストン
ソース
4
GTMetixとYSlowの推奨事項をひとつまみの塩で取ります。これに投資するのに費やす時間は、パフォーマンスの目立った向上をもたらさず、ほぼ確実にコードのプロファイリング（脂肪の除去）または単により良い/より速いホストの発見に費やす方がよいでしょう。
— ベン・レッサーニ-ソナシ
1
@sonassi有効な点ですが、JMaxの答えを実装するのに30分かかることは何も害を及ぼすことはなく、基本テーマに含めることができるフロントエンドパフォーマンス強化の選択の一部です。
— グロ
1
@Gloパフォーマンス向上のために私たちはすべてです。しかし、これがもたらす「利点」は存在しません。最初のページの読み込みは、JSが読み込まれ、その後ブラウザキャッシュから提供される唯一の時間です。初期ロードでのブロックは、JS配信よりもPHPの生成が遅い可能性が高くなります。それでも、サーバーの通過またはユーザーのラストマイル接続は、実際にプルダウンするのにかかる時間に大きな役割を果たします。
— ベン・レッサーニ-ソナシ
1
@sonassiそれは、すぐにプライムされたキャッシュを持つため、最初の訪問ユーザーを無視すべきだと言っているようなものです。もちろん、実施できるPHPの機能強化はありますが、フロントエンドとして、アセットの配信を高速化するだけでなく、ユーザーの読み込み時間を認識し、下部のスクリプトを読み込む方法を心配するのが私の仕事ですレンダリングのブロックを防ぐページはその戦略の一部です。最新のブラウザはブロックせずにスクリプトを処理できますが、eコマースではミリ秒==££であることがわかります。もちろん、これは通常、スクリプトローダーの重要なポイントです。
— Glo
私は@Gloを使用しています。これは効率のチューニングのほんの一部であり、昼と夜の違いをもたらさないかもしれませんが、無視すべきではありません。初めての訪問者がすぐにコンテンツを画面に表示することが重要です。
— STW

回答:

22

それはあなたの要求次第です。たとえば、最後Homepageに、MagentoストアからPrototypeスクリプトをすべて削除しましたが、問題はありませんでした。しかし、私が言ったように、それはあなたのテーマ、拡張機能などに依存します

スクリプトを移動するには：

page.xmlテーマの次の行を見つけます

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

そして、直前に以下を挿入します：

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
   <action method="addJs"><script>your_script.js</script></action>
</block>

Magento 1.9の場合、これを使用します。

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtmlにテンプレートファイルを作成し、以下を配置します

<?php echo $this->getCssJsHtml() ?>

</body>タグを閉じる直前にテンプレートに以下を追加します。

<?php echo $this->getChildHtml('jsfooter') ?>
— オグズ・チェリクデミル
ソース
あなたは確信しているcore/text_list持っているaddJs()方法を？
— アレックス
あなたは正しいアレックスです、私は間違っていました、それについて申し訳ありません！
— オグズチェリクデミル
乾杯、これは機能します。私が実際にこれを動作させた後に言わなければならないことは、JSマージを実行しているとき、マージされたファイルが頭に追加されるため、とにかくこれを無効にすることですpage / html_headブロックごとに1つのマージファイルを作成し、フッターjsのマージファイルを「</ body>」の前に追加します。これは潜在的に便利です。JSのマージとjQueryには、jQuery.noConflictが含まれないという問題がいくつかありました。「</ body>」が役立つ前に、JSをマージするJSを作成しました。
— マークウェストン
20

タグの移動には2つの問題があります。最大の問題は、何らかの理由でMagentoがプロトタイプに依存する多くのJSを<body/>タグに直接注入することです。スクリプトをドキュメントの最後に移動すると（ロード時間には適していますが）、Magentoの多くのページが破損します。

他の問題は実際にそれをしていることです。<move />タグなどの機能はないようです。作成したカスタムスクリプトに対して行ったことは、このようなスクリプトを追加することです。より冗長ですが、動作します：

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>
— SwiftOtterのジョセフ
ソース
@OğuzÇelikdemirが正しいとマークしたのは、彼がより詳細な回答を提供してくれたからです。しかし、基本的には同じ回答をしてくれたので、本当にありがとうございます。
— マークウェストン
2
何らかの理由で、javascriptフレームワークを使用しているため、実際にはいくつかあります。適切なページレンダリングを行うには、早い段階で常駐する必要があります。ボディエンドの前に特定のjavascriptを含める理由があります。あなたがこれを理解しておらず、盲目的にそれをすべて底まで押しつけているなら、あなたはカーゴカルトプログラミングに従事しています。ダミーのラジオとヘッドセットを備えた小さな小屋のセットアップは、Magentoを使用して行われますが、Web開発者を経験しているはずの人が行うこともあります。一部のものは、配置された場所に正確に属します。
— Fiasco Labs
15

Magento 1.xでは、これはばかげたことです。Magentoのテンプレートファイル全体に散らばっているインラインスクリプトが多すぎて、.jsからコアJSファイルを再配置すると壊れます<head>。Magento 2でこの状況は変わる可能性がありますが、MagentoがPrototypeから移行するにつれてPrototypeとjQueryにまたがっています。

他のスクリプトの場合は、</body>要素の前に配置する必要があります。Magentoの<action method="addJS|addItem">XML を無視し、各スクリプト用の新しいテンプレートファイルを作成すると便利です。このテンプレートファイルには、次のようなプレーンなHTMLスクリプト参照が含まれています。

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

その後、次のように、このテンプレートファイルをどこにでも埋め込むことができます（前後を使用して順序を制御できます）。

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />
— ブレンダン・ファルコフスキー
ソース
6

ほとんどの場合、外部JavaScriptを下に移動するだけでは不十分です。デフォルトのテーマのように、インラインJavaScriptでテンプレートを使用する場合、すべての依存関係（prototype.js、varien.js、...）がロードされるまでこれらの実行を遅らせる必要があります。

アプローチは<script>、オブザーバーを使用してレンダリングされたブロックからすべてのインライン要素を抽出しhttp_response_send_before、外部スクリプトの直後にそれらを最後に移動することです。その間、インラインだけでなく、すべてのスクリプト要素を移動できます。これにより、レイアウトモデルを介して移動する手間が省けますが、これは明らかにMagentoが意図したものではありませんでした。

トムロバートショウは、正規表現を使用して応答HTMLを変更する単一のオブザーバーで、まさにこれを行う拡張機能を作成しました：https : //github.com/bobbyshaw/magento-footer-js

彼はcore_block_abstract_to_html_afterイベントを使用しますが、現在のブロックがルートブロックである場合にのみアクションを実行します。つまり、オブザーバーはより頻繁に呼び出されますが、ある程度ブロックキャッシュを活用する必要があります。

— ファビアン・シュメングラー
ソース
Robertshaw拡張機能は、OPCカートの支払いパネルを除き、サイト全体で非常にうまく機能します。パネルを完全にブランクにします。これは、Payment Gateway検証スクリプトだと思います。すべてを終了</body>タグの直前に移動します。
— Fiasco Labs
2

javascript（およびcss）を最適化し、google pagespeedの洞察ランキングを向上させるために、mediarox pagespeedモジュールを強くお勧めします。

これは、Magentoによるhtml出力を解析し、コードに対して切り取りと貼り付けのアクションを実行して、javascriptをhtmlコードの下部に移動することで機能します。このプロセスは高速ですが、HTMLの変更をキャッシュするには、フルページキャッシュと組み合わせて使用​​するのが最適です。

このモジュールがどのように機能し、ページ速度のランクを改善するのに役立つかについての詳細は、次のとおりです。

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

— パジ
ソース
-1

Magento v1.6 +の場合（古いバージョンでテストする必要があります）;

1- page/html/footer/extras.phtmlこのコンテンツでテンプレートファイルを作成します。

<?php echo $this->getCssJsHtml() ?>

2-このhtmlノードをレイアウトxmlに追加します。

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3-それだけです！

— マルシオ・マシエル
ソース
-2

この他のスクリプト（product / list.phtml内）の問題のため<script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> 、ページの最後でJSを移動する必要がありました。

上記の内容を機能させることができなかったため、別の方法を見つけました。

でMage/page/Block/Html/Footer.php controller同じパスを使用して再作成することにより、オーバーライドしますapp/local folder。

存在しない場合に作成される完全なパスは次のとおりです。

app / local / Mage / page / Block / Html / Footer.php

このファイルには、Magentoのコアと同じフォルダー（Mage / page / Block / Html / Head.php）にあるHead.phpから関数を追加します。

機能させるために必要な関数は次のとおりです（明らかに完全な関数です。ここでは簡潔にするために名前を示しています）

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

次に、カスタム（私のテーマの1つ）page / html / footer.phtmlにこの呼び出しを追加します。

<?php echo $this->getCssJsHtml() ?>

最後に、任意のレイアウトでJSを呼び出すことで、フッターにJSを追加できます。 

<action method="addJs"><script>yourscript.js</script></action>
— twi_cy
ソース
興味深いアプローチですが、これはMagentoアーキテクチャにとって非常に不適切なアプローチです。
— ベンマーク
— Pratik
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.