PageSpeed ​​- Éliminez le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison

Je cours magento 1.9et j'utilise le RWD sliderqui vient avec Magento 1.9 sur la page d'accueil.

Google PageSpeedn'aime pas cela et dit:

Éliminez le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison

Comment puis-je le faire pour ce fichier de script java qui appelle le curseur:

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

Je résous le problème de suppression du blocage de rendu JavaScript sur Magento-1.9.x comme suit:

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

ou

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

conseils: il peut se situer sur le thème de base

app \ design \ frontend \ base \ default \ layout \ page.xml sur la ligne: 38,

Si vous utilisez le chemin différent du thème actif ex pour rwd comme app \ design \ frontend \ base \ default \ layout \ page.xml

La technique décrite par "Mohan Gs" ne fonctionnera pas ici.

En raison du chemin js, /media/js/il semble qu'il utilise la fusion js . Cela signifie que tous les fichiers js ajoutés par la manière standard xml

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

sera fusionné dans un grand pour /media/js/<hash>.js.

Les fichiers js de Magento sont ajoutés

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

de cette façon aussi.

Il existe également de nombreux modèles utilisant js en ligne, qui dépendent des objets / fonctions définis par les fichiers head js.

À ce stade, ne suffit-il pas de déplacer uniquement les fichiers head js vers le bas. Vous devez déplacer toutes les déclarations js en ligne après la tête js et avant </body>aussi.

Dans tous / beaucoup de cas, il est impossible de séparer les js en ligne des modèles car ils utilisent des variables spécifiques au modèle.

Vous ne pouvez utiliser qu'une méthode générale comme l'analyse du code HTML final et déplacer ces éléments ensemble et dans le bon ordre.

Jetez donc un œil à l'extension Pagespeed .

Ce code indique d'attendre le chargement du document entier, puis de charger le fichier externe 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>

Ce sont les étapes que vous devez suivre.

1. Copiez le code ci-dessus.

2. Collez le code dans votre code HTML juste avant la </body>balise (près du bas de votre fichier HTML).

3. Remplacez le defer.jspar le nom de votre fichier JS externe.

4. Assurez-vous que le chemin d'accès à votre fichier est correct. Exemple: si vous venez de mettre defer.js, le fichier defer.jsdoit être dans le même dossier que votre fichier HTML.

Pour plus de détails, reportez - vous à cet article

Voici une extension open source pour résoudre ce https://github.com/mediarox/pagespeed

Caractéristiques actuelles

• Déplacez toutes les balises Javascript (tête et ligne) vers le bas. ({stripped_html} {js})
• y compris les unités js conditionnelles ({plusieurs balises js})
• y compris les balises js externes, y compris les balises js "en ligne"
• Déplacez toutes les balises CSS (head & inline) vers le bas. ({stripped_html} {css})
• y compris les unités css conditionnelles ({plusieurs balises css})
• y compris les balises css externes
• y compris les balises css en ligne

Compatibilité

De Magento 1.5.x à Magento 1.9.x.

Configuration du backend

Tous les modules (Pagespeed_Js, Pagespeed_Css) sont désactivés par défaut.

Chemin de configuration: Système> Configuration> AVANCÉ> Pagespeed

Comment ça fonctionne ?

Analyser simplement le flux HTML final sur l'événement "controller_front_send_response_before".