PageSpeed ​​- Loại bỏ JavaScript và CSS chặn kết xuất trong nội dung trong màn hình đầu tiên

Tôi đang chạy magento 1.9và tôi đang sử dụng RWD sliderMagento 1.9 trên trang chủ.

Google PageSpeedkhông thích điều này và nói:

Loại bỏ JavaScript và CSS chặn kết xuất trong nội dung trong màn hình đầu tiên

Làm thế nào tôi có thể làm điều đó cho tệp tập lệnh java này gọi thanh trượt:

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

Tôi giải quyết Xóa vấn đề JavaScript chặn kết xuất trên Magento-1.9.x như sau:

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

hoặc là

<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>

gợi ý: nó có thể định vị trên chủ đề cơ sở

ứng dụng \ design \ frontend \ base \ default \ layout \ page.xml về dòng: 38,

Nếu bạn sử dụng đường dẫn chủ đề khác nhau, ví dụ như rwd là app \ design \ frontend \ base \ default \ layout \ page.xml

Kỹ thuật như được mô tả bởi "Mohan Gs" sẽ không hoạt động ở đây.

Bởi vì đường dẫn js /media/js/có vẻ như anh ta sử dụng js hợp nhất . Điều đó có nghĩa là, tất cả các tệp js được thêm theo cách chuẩn xml

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

sẽ được hợp nhất thành một /media/js/<hash>.js .

Tập tin js lõi Magento được thêm vào

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

cách này cũng vậy

Ngoài ra còn có nhiều mẫu sử dụng js nội tuyến, wich phụ thuộc vào các đối tượng / hàm được xác định bởi các tệp js head.

Tại thời điểm này, nó không đủ để chỉ di chuyển các tệp js đầu xuống phía dưới. Bạn phải di chuyển tất cả các khai báo js nội tuyến sau đầu js và trước</body> đó.

Trong tất cả / nhiều trường hợp không thể tách js nội tuyến khỏi các mẫu vì chúng đang sử dụng các biến cụ thể của mẫu.

Bạn chỉ có thể sử dụng một phương pháp chung như phân tích cú pháp html cuối cùng và di chuyển những thứ này lại với nhau và theo đúng thứ tự.

Vì vậy, có một cái nhìn vào phần mở rộng Pagespeed .

Mã này cho biết chờ toàn bộ tài liệu tải, sau đó tải tệp bên ngoài 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>

Đây là những bước mà bạn cần phải làm theo.

1. Sao chép mã trên.

2. Dán mã vào HTML của bạn ngay trước </body>thẻ (gần cuối tệp HTML của bạn).

3. Thay đổi defer.jstên của tệp JS bên ngoài của bạn.

4. Đảm bảo đường dẫn đến tệp của bạn là chính xác. Ví dụ: nếu bạn chỉ đặt defer.js, thì tệp defer.jsphải nằm trong cùng thư mục với tệp HTML của bạn.

Để biết thêm chi tiết, tham khảo Điều này

Đây là phần mở rộng nguồn mở để giải quyết https://github.com/mediarox/pagespeed

Các tính năng hiện tại

• Di chuyển tất cả các thẻ Javascript (đầu & nội tuyến) xuống dưới cùng. ({tước_html} {js})
• bao gồm các đơn vị js có điều kiện ({nhiều thẻ js})
• bao gồm các thẻ js bên ngoài bao gồm các thẻ js "nội tuyến"
• Di chuyển tất cả các thẻ CSS (đầu & nội tuyến) xuống dưới cùng. ({tước_html} {css})
• bao gồm các đơn vị css có điều kiện ({nhiều thẻ css})
• bao gồm các thẻ css bên ngoài
• bao gồm các thẻ css nội tuyến

Khả năng tương thích

Từ Magento 1.5.x đến Magento 1.9.x.

Cấu hình cuối cùng

Tất cả các mô-đun (Pagespeed_Js, Pagespeed_Css) bị tắt theo mặc định.

Đường dẫn cấu hình: Hệ thống> Cấu hình> NÂNG CAO> Pagespeed

Làm thế nào nó hoạt động ?

Phân tích đơn giản luồng html cuối cùng trong sự kiện "control_front_send_response_b Before".