PageSpeed ​​- Wyeliminuj JavaScript i CSS blokujące renderowanie w treści widocznej na ekranie

Pracuję magento 1.9i korzystam RWD sliderz Magento 1.9 na stronie głównej.

Google's PageSpeedtego nie lubi i mówi:

Wyeliminuj JavaScript blokujący renderowanie i CSS w treści widocznej na ekranie

Jak mogę to zrobić dla tego pliku skryptu Java, który wywołuje suwak:

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

Rozwiązuję Usuń problem z blokowaniem renderowania JavaScript w Magento-1.9.x w następujący sposób:

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

lub

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

wskazówki: może znajdować się w temacie podstawowym

app \ design \ frontend \ base \ default \ layout \ page.xml o linii: 38,

Jeśli używasz aktywnego motywu inną ścieżkę np. Dla rwd jako app \ design \ frontend \ base \ default \ layout \ page.xml

Technika opisana przez „Mohana Gsa” tutaj nie zadziała.

Z powodu ścieżki js /media/js/wygląda na to, że używa scalania js . Oznacza to, że wszystkie pliki js dodane standardowym sposobem xml

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

zostanie połączony w jeden duży /media/js/<hash>.js.

Dodano pliki Magento core js

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

także w ten sposób.

Istnieje również wiele szablonów wykorzystujących wbudowane js, które zależą od obiektów / funkcji zdefiniowanych w plikach head js.

W tym momencie nie wystarczy przenieść tylko pliki head js na dół. Musisz przenieść wszystkie deklaracje wbudowane js za głową js i przed nim </body>.

We wszystkich / wielu przypadkach nie jest możliwe oddzielenie wbudowanego js od szablonów, ponieważ używają one zmiennych specyficznych dla szablonu.

Możesz użyć tylko ogólnej metody, takiej jak parsowanie końcowego html i przenieść to razem w odpowiedniej kolejności.

Spójrz na rozszerzenie Pagespeed .

Ten kod mówi: poczekaj na załadowanie całego dokumentu, a następnie załaduj plik zewnętrzny 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>

Oto kroki, które musisz wykonać.

1. Skopiuj powyższy kod.

2. Wklej kod do kodu HTML tuż przed </body>tagiem (w dolnej części pliku HTML).

3. Zmień defer.jsnazwę na zewnętrzny plik JS.

4. Upewnij się, że ścieżka do pliku jest poprawna. Przykład: jeśli właśnie umieścisz defer.js, plik defer.jsmusi znajdować się w tym samym folderze co plik HTML.

Aby uzyskać więcej informacji, zapoznaj się z tym artykułem

Oto rozszerzenie open source do rozwiązania tego https://github.com/mediarox/pagespeed

Aktualne funkcje

• Przenieś wszystkie tagi Javascript (head & inline) na dół. ({stripped_html} {js})
• w tym jednostki warunkowe js ({wiele tagów js})
• w tym zewnętrzne tagi js, w tym tagi „wbudowane” js
• Przenieś wszystkie tagi CSS (head & inline) na dół. ({stripped_html} {css})
• w tym warunkowe jednostki css ({wiele tagów css})
• w tym zewnętrzne tagi css
• w tym wbudowane tagi css

Zgodność

Od Magento 1.5.x do Magento 1.9.x.

Konfiguracja backendu

Wszystkie moduły (Pagespeed_Js, Pagespeed_Css) są domyślnie wyłączone.

Ścieżka konfiguracji: System> Konfiguracja> ZAAWANSOWANE> Prędkość strony

Jak to działa ?

Po prostu przeanalizuj końcowy strumień HTML w zdarzeniu „kontroler-front_send_send_response_before”.