PageSpeed ​​- กำจัดจาวาสคริปต์และ CSS ที่บล็อกการแสดงผลในเนื้อหาที่อยู่ด้านบน

ฉันกำลังใช้งานmagento 1.9และฉันกำลังใช้สิ่งRWD sliderที่มาพร้อมกับ Magento 1.9 ในหน้าแรก

Google PageSpeedไม่ชอบสิ่งนี้และพูดว่า:

กำจัดการปิดกั้นการแสดงผล JavaScript และ CSS ในเนื้อหาครึ่งหน้าบน

ฉันจะทำอย่างไรกับไฟล์จาวาสคริปต์นี้ซึ่งเรียกแถบเลื่อนนี้:

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js

ฉันแก้ปัญหาการลบการบล็อก render JavaScript บน Magento-1.9.x ดังต่อไปนี้:

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

หรือ

<action method="addJs"><script>prototype/prototype.js</script></action>  
Replace with Following:  
<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

คำแนะนำ: มันอาจค้นหาในรูปแบบฐาน

แอพ \ design \ frontend \ base \ default \ layout \ page.xml เกี่ยวกับบรรทัด: 38,

หากคุณใช้ธีมที่แตกต่างกันของพา ธ ที่ใช้งานอยู่เช่น rwd เป็น app \ design \ frontend \ base \ default \ layout \ page.xml

เทคนิคที่อธิบายโดย "Mohan Gs" จะไม่ทำงานที่นี่

เพราะเส้นทาง js /media/js/ดูเหมือนว่าเขาใช้js ผสาน นั่นหมายถึงว่าไฟล์ js ทั้งหมดที่เพิ่มด้วยวิธีมาตรฐาน xml

• <action method="addJs">...
• <action method="addItem"><type>js</type>..

/media/js/<hash>.jsจะถูกรวมอยู่ในหนึ่งไปใหญ่

เพิ่มไฟล์ js core ของ Magento

• <action method="addJs"><script>prototype/prototype.js</script></action>

ด้วยวิธีนี้เช่นกัน

นอกจากนี้ยังมีเทมเพลตจำนวนมากที่ใช้ inline js ซึ่งขึ้นอยู่กับวัตถุ / ฟังก์ชั่นที่กำหนดโดยไฟล์ head js

ณ จุดนี้มันไม่เพียงพอที่จะย้ายเฉพาะไฟล์ head js ไปที่ด้านล่าง คุณต้องย้ายประกาศ inline js ทั้งหมดหลังจาก head js และก่อนหน้า</body>ด้วย

ในทุกกรณีจะไม่สามารถแยกอินไลน์ js จากเทมเพลตได้เนื่องจากใช้ตัวแปรเฉพาะเทมเพลต

คุณสามารถใช้วิธีการทั่วไปเช่นการแยกวิเคราะห์ html สุดท้ายและย้ายสิ่งนี้เข้าด้วยกันและในลำดับที่ถูกต้อง

ดังนั้นมีลักษณะที่เป็นส่วนขยายที่Pagespeed

defer.jsรหัสนี้กล่าวว่ารอให้เอกสารทั้งหมดที่จะโหลดแล้วโหลดไฟล์ภายนอก

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

เหล่านี้คือขั้นตอนที่คุณต้องทำตาม

1. คัดลอกโค้ดด้านบน

2. วางรหัสใน HTML ของคุณหน้า</body>แท็ก (ใกล้กับด้านล่างของไฟล์ HTML)

3. เปลี่ยนเป็นdefer.jsชื่อของไฟล์ JS ภายนอกของคุณ

4. ตรวจสอบให้แน่ใจว่าเส้นทางไปยังไฟล์ของคุณถูกต้อง ตัวอย่าง: หากคุณเพิ่งวางdefer.jsไฟล์นั้นdefer.jsจะต้องอยู่ในโฟลเดอร์เดียวกับไฟล์ HTML ของคุณ

สำหรับรายละเอียดเพิ่มเติมอ้างอิงบทความนี้

นี่คือส่วนขยายโอเพนซอร์ซเพื่อแก้ปัญหาhttps://github.com/mediarox/pagespeed

ฟีเจอร์ปัจจุบัน

• ย้ายแท็ก Javascript ทั้งหมด (ส่วนหัว & อินไลน์) ไปที่ด้านล่าง ({stripped_html} {js})
• รวมถึงหน่วย js แบบมีเงื่อนไข ({หลายแท็ก js})
• การรวมแท็ก js ภายนอกรวมถึงแท็ก "inline" js
• ย้ายแท็ก CSS ทั้งหมด (ส่วนหัว & อินไลน์) ไปที่ด้านล่าง ({stripped_html} {CSS})
• รวมถึงหน่วย CSS ตามเงื่อนไข ({หลายแท็ก css})
• รวมถึงแท็ก CSS ภายนอก
• รวมถึงแท็ก css แบบอินไลน์

ความเข้ากันได้

จาก Magento 1.5.x ถึง Magento 1.9.x

การกำหนดค่าแบ็กเอนด์

โมดูลทั้งหมด (Pagespeed_Js, Pagespeed_Css) ถูกปิดใช้งานตามค่าเริ่มต้น

พา ธ การกำหนดค่า: ระบบ> การกำหนดค่า> ขั้นสูง> เพจสปีด

มันทำงานอย่างไร ?

ง่าย ๆ ในการแยกกระแส html สุดท้ายในเหตุการณ์ "controller_front_send_response_before"