PageSpeed ​​- Menghilangkan JavaScript yang diblokir render dan CSS dalam konten di atas-lipat

Saya menjalankan magento 1.9, dan saya menggunakan RWD slideryang datang dengan Magento 1.9 di halaman rumah.

Google PageSpeedtidak suka ini dan mengatakan:

Hilangkan render JavaScript dan CSS pemblokiran render dalam konten di atas-lipat

Bagaimana saya bisa melakukannya untuk file skrip java ini yang memanggil slider:

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

Saya mengatasi Hapus masalah JavaScript render-blocking di Magento-1.9.x sebagai berikut:

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

atau

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

petunjuk: itu dapat ditemukan pada tema dasar

app \ design \ frontend \ base \ default \ layout \ page.xml tentang baris: 38,

Jika Anda menggunakan tema aktif jalur berbeda ex untuk rwd sebagai app \ desain \ frontend \ base \ default \ layout \ page.xml

Teknik seperti yang dijelaskan oleh "Mohan Gs" tidak akan berfungsi di sini.

Karena jalur js /media/js/tampaknya ia menggunakan penggabungan js . Itu berarti, bahwa semua file js ditambahkan dengan cara standar xml

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

akan digabung dalam yang besar untuk /media/js/<hash>.js .

File js inti Magento ditambahkan

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

dengan cara ini juga.

Ada juga banyak template menggunakan js inline, yang tergantung pada objek / fungsi yang ditentukan oleh file head js.

Pada titik ini, apakah tidak cukup hanya memindahkan file head js ke bawah. Anda harus memindahkan semua deklarasi js inline setelah head js dan sebelumnya </body>juga.

Dalam semua / banyak kasus, tidak mungkin untuk memisahkan js inline dari templat karena mereka menggunakan variabel templat khusus.

Anda hanya dapat menggunakan metode umum seperti parsing html terakhir dan pindahkan semua ini dalam urutan yang benar.

Jadi lihat ekstensi Pagespeed .

Kode ini mengatakan tunggu seluruh dokumen dimuat, lalu muat file eksternal 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>

Ini adalah langkah-langkah yang perlu Anda ikuti.

1. Salin kode di atas.

2. Rekatkan kode dalam HTML Anda tepat sebelum </body>tag (dekat bagian bawah file HTML Anda).

3. Ubah defer.jske nama file JS eksternal Anda.

4. Pastikan path ke file Anda sudah benar. Contoh: jika Anda hanya meletakkan defer.js, maka file tersebut defer.jsharus berada di folder yang sama dengan file HTML Anda.

Untuk lebih jelasnya, lihat artikel ini

Ini adalah ekstensi open source untuk menyelesaikannya https://github.com/mediarox/pagespeed

Fitur saat ini

• Pindahkan semua tag Javascript (kepala & sebaris) ke bawah. ({stripped_html} {js})
• termasuk unit js kondisional ({beberapa tag js})
• termasuk tag js eksternal termasuk tag js "inline"
• Pindahkan semua tag CSS (kepala & sebaris) ke bawah. ({stripped_html} {css})
• termasuk unit css kondisional ({beberapa tag css})
• termasuk tag css eksternal
• termasuk tag css sebaris

Kesesuaian

Dari Magento 1.5.x ke Magento 1.9.x.

Konfigurasi Backend

Semua modul (Pagespeed_Js, Pagespeed_Css) dinonaktifkan secara default.

Jalur konfigurasi: Sistem> Konfigurasi> ADVANCED> Pagespeed

Bagaimana itu bekerja ?

Sederhana mengurai aliran html terakhir pada acara "controller_front_send_response_before".