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


15

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

Jawaban:


14

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


Di mana Anda menambahkan itu? di mana file xml magento?
styzzz

@styzzz, ya dan juga file header / footer. lebih baik menemukan google disarankan diblokir js
matinict

@styzz ia temukan di aplikasi tema dasar \ desain \ frontend \ basis \ default \ tata letak \ page.xml tentang baris: 38 ,. Jika Anda menggunakan jalur aktif tema berbeda ex for rwd sebagai app \ design \ frontend \ base \ default \ layout \ page.xml
matinict

1
Aku mengikutimu. Ini memecahkan masalah dalam wawasan halaman Google tetapi memberikan banyak kesalahan dalam Konsol di Google chrome
Shoeb Mirza

@MDSHOEBMIRZA maka itu tidak menyelesaikan masalah
Stevie G

5

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 .


Maaf - saya masih tidak tahu apa yang harus dilakukan. File mana yang harus saya edit? Apakah Anda mengatakan bahwa kita harus mengedit file XML dan memindahkan baris yang memanggil JS ke bagian lain? Saya dapat mengedit file XML, tetapi saya tidak yakin yang mana, dan di mana harus memindahkan baris yang disebut skrip JS. Tolong beritahu saya.
styzzz

Jawaban saya harus menjelaskan, bahwa Anda tidak dapat memindahkan panggilan xml javascript ke bagian lain. Ini akan menyebabkan kesalahan. Anda dapat mencoba ekstensi yang disebutkan.
Steven Fritzsche

Halo Steven, saya mencoba modul Anda. Tidak ada yang berubah. Tidak ada javascript atau css yang dipindahkan. Juga admin akhir konfigurasi Pagepeed menunjukkan 404
Sandeep

@ Tetap: Ini bukan tempat untuk komentar Anda. Harap buat laporan / masalah terperinci di github .
Steven Fritzsche

4

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


1

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


Pergi ke GitHub dan menemukan bahwa skrip terakhir diperbarui pada 23 Sep 2015. Selain itu tidak disebutkan tentang Magento 2. Apakah akan berfungsi untuk magento 2 atau tidak? Jika Anda tidak memiliki rekomendasi / saran lain?
marikamitsos
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.