คุณภาพเยี่ยมเพิ่ม CSS และ JS รวมถึงส่วนท้าย

ฉันกำลังทำการเพิ่มประสิทธิภาพ Yslow ของเว็บไซต์ Magento ของฉันและพยายามเพิ่ม CSS และ Js ไปยังส่วนท้ายของเว็บไซต์

ในขณะนี้ฉันกำลังใช้แท็กหัวอ้างอิงใน XML โครงร่างและการใช้addJsและaddCssการทำงานเพื่อรวมไฟล์ทั้งหมดของฉัน ฉันพยายามสลับการอ้างอิงส่วนหัวไปยังส่วนท้าย แต่ได้รับข้อผิดพลาดเมื่อฉันพยายามดูไซต์ มีวิธีการทำสิ่งนี้ในlocal.xml หรือสิ่งนี้จะต้องทำฮาร์ดโค้ดในไฟล์เทมเพลตส่วนท้ายหรือไม่?

ฉันรู้ว่านี่ไม่ใช่คำตอบสำหรับคำถามของคุณ แต่สิ่งที่คุณอาจต้องการพิจารณาอย่างไรก็ตาม

Magento ใช้จาวาสคริปต์แบบอินไลน์ค่อนข้างมากโดยเฉพาะในหน้ารายละเอียดผลิตภัณฑ์ เนื่องจากจาวาสคริปต์นั้นขึ้นอยู่กับสคริปต์ภายนอกที่โหลดในส่วนหัวคุณจะต้องย้ายสคริปต์แบบอินไลน์ทั้งหมดไปยังไฟล์ภายนอกและเพิ่มไว้ในส่วนท้าย

คุณอาจเร็วขึ้นและดีขึ้นด้วยการบีบอัด CSS และ JS ด้วยเครื่องมือที่สร้างขึ้นใน Magento และใช้การบีบอัด gzip และส่วนหัวที่หมดอายุเพื่อให้เร็วขึ้น ด้วยวิธีนี้ 'ล่าช้า' ที่เกิดจากจาวาสคริปต์และ CSS จะถูกเก็บไว้ให้น้อยที่สุดโดยไม่จำเป็นต้องเปลี่ยนโครงร่างส่วนขยายของ Magento และบุคคลที่สามที่เป็นค่าเริ่มต้น วิธีนี้เมื่อคุณอัปเกรดวีโอไอพีหรือส่วนขยายของคุณคุณไม่จำเป็นต้องทำซ้ำงานทั้งหมด

. htaccess ที่จัดทำโดยโครงการสำเร็จรูป HTML5 ให้การบีบอัด gzip นี้และส่วนหัวที่หมดอายุโปรดตรวจสอบhttp://inchoo.net/ecommerce/magento/magento/magento-miller

ขั้นตอนแรกคือการสร้างบล็อกที่เรียกว่า "เท้า" ซึ่งเป็นหลักเหมือนกับ "หัว" แต่คุณจะส่งออกในจุดที่แตกต่างกัน คุณสามารถเพิ่มสิ่งนี้ในpage.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

ตอนนี้คุณสามารถเพิ่ม JS / CSS (แม้ว่าไม่แนะนำให้ใช้ CSS ในส่วนท้าย) โดยใช้คำสั่งนี้ในไฟล์ XML ใด ๆ ของคุณ:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

ภายในpage/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

ในไฟล์เทมเพลตหน้าของคุณ (เช่นpage/1column.phtml) คุณจะต้องออกบล็อกนี้ก่อนแท็กเนื้อหาปิด:

    <?php echo $this->getChildHtml('foot') ?>

หากคุณใช้เทมเพลต Magento ที่เป็นค่าเริ่มต้นคุณจะได้รับข้อผิดพลาด JS ใช้แบบฟอร์มการค้นหาขนาดเล็กเช่น ( catalogsearch/form.mini.phtml) มันมีสคริปต์แบบอินไลน์นี้:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

สิ่งนี้จะถูกเรียกทันทีที่โหลดเนื่องจากไม่มีในตัวจัดการเอกสารที่พร้อมใช้งาน ตัวแปรยังไม่มีอยู่เนื่องจากมีส่วนท้ายดังนั้นคุณจึงได้รับข้อผิดพลาด คุณสามารถแก้ไขได้โดยเพิ่มตัวจัดการเอกสารที่พร้อมใช้งานหรือโดยการย้าย inline JS ทั้งหมดของลักษณะนี้ไปยังไฟล์ภายนอกที่โหลดในท้ายกระดาษ ปัญหาเช่นนี้จะเกิดขึ้นทั่วทั้งไซต์โดยเฉพาะในหน้าชำระเงินและกำหนดค่าผลิตภัณฑ์

ปัญหาอื่น ๆ ที่คุณอาจพบคือถ้าคุณใช้ jQuery ควบคู่กับ Prototype ในโหมด noConflict คุณจะต้องตรวจสอบให้แน่ใจว่ามีการโหลด jQuery ก่อนที่ต้นแบบจะไม่มีความขัดแย้งเกิดขึ้น

สำหรับ 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 - นั่นแหละ!