web-dev-qa-db-fra.com

Différer l'analyse de JavaScript - Google Page Speed

Tous mes fichiers JavaScript sont déjà en bas, mais Google Page Speed ​​propose cette suggestion pour améliorer la vitesse:

Différer l'analyse de JavaScript

88,6 Ko de JavaScript sont analysés lors du chargement initial de la page. Différez l'analyse de JavaScript pour réduire le blocage du rendu de la page. http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js (76.8KiB) http: //websiteurl/js/plugins.js (11.7 KiB) http: // websiteurl/ (109B de JavaScript intégré)

Ceci est le mon HTML (exemple)

<html>
<head>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
    <script src="js/plugins.js"></script>
    <script>$(document).ready(function() {
            $("#various2").fancybox({
                'width': 485,
                'height': 691,
            });
        });</script>
    </body>
    </html>

Que dois-je faire pour augmenter les performances en utilisant différer?

Est-ce seulement pour Google Chrome ou pour tous?

javascriptjqueryperformancegoogle-pagespeed
15
Jitendra Vyas

Si vous recherchez des performances de page, vous devez avant tout déplacer ces scripts vers le bas de votre page pour permettre le chargement des autres éléments.

Utilisez également DNS prefetch en tête pour définir le domaine de base pour google-code.

<link rel="dns-prefetch" href="//ajax.googleapis.com">

Comme il ne s'agit que d'un petit morceau de code, vous pouvez simplement l'ajouter à votre fichier plugins.js en bas, puis reporter le fichier plugins.

<script src="js/plugins.js" defer></script>

C’est ce que je ferais de toute façon, tous mes sites sont optimisés pour 98 et 97 respectivement en yslow et en vitesse de page.

J'espère que ça aide.

-V

7
Vince Kronlein

Ajoutez la balise <script type="text/javascript" defer="defer"> comme ça, ça marche pour moi.

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>
1
Umesh Kumar

Je vois que c’est une vieille question, mais comme je cherchais moi-même une bonne réponse, je vais partager la méthode que j’utilise actuellement.

En ce qui concerne Javascript en ligne, je modifie tous les attributs type en text/deferred-javascript, ou quelque chose de similaire, afin que le code contenu dans la balise de script ne soit pas évalué lors du chargement de la page. J'attache ensuite une fonction à l'événement page onload; ladite fonction trouve tous les scripts correspondant au type ci-dessus et évalue le code qu'il contient à l'aide de eval(). Je sais qu'en général, eval() est mauvais, mais cela semble être utile ici.

Pour les fichiers Javascript externes, je fais quelque chose de très similaire. Au lieu d'ajouter les balises de script à la page, je les enregistre et les insère une par une après le chargement de la page.

Un problème que je rencontre est que si l'un des fichiers Javascript différés en ligne contient une erreur (par exemple une erreur d'analyse), les scripts suivants ne sont pas chargés (mais cela peut dépendre de mon implémentation actuelle).

1
idrarig

Bonjour, nous avons récemment créé un cadre de travail opensource appelé "cadre élégant" qui vous aide à créer une application Web rapide. Nous avons réussi à obtenir une vitesse de page de 100% dans Google, sur les ordinateurs de bureau comme sur les mobiles, sur toutes les pages: vous pouvez le vérifier à:

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

il y a beaucoup de choses que vous pouvez apprendre en consultant la source de la page, même si vous ne comprenez pas quelque chose, merci de le commenter afin que je puisse vous aider.

jusqu'à présent, vous pouvez essayer cette méthode:

// Load script element as a child of the body
function loadJS(src, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    script.src = src;
    document.body.appendChild(script);
}
// Load style element as a child of the body
function loadCSS(href,callback) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    if (element.readyState) {  //IE
        element.onreadystatechange = function () {
            if (element.readyState == "loaded" || script.readyState == "complete") {
                element.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        element.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    element.href = href;
    document.body.appendChild(element);
}
// Load All Resources
function loadResources() {
    // css
    loadCSS("/compressed/code-mirror-style.css?please1");
    loadCSS("/compressed/all.css?please2");

    // js
    loadJS("/compressed/code-mirror.js", function () {
        loadJS("/compressed/common.js", function () {
            $("[data-lang]").each(function () {
                var code = $(this).addClass("code").text();
                $(this).empty();

                var myCodeMirror = CodeMirror(this, {
                    value: code,
                    mode: $(this).attr("data-lang"),
                    lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'),
                    readOnly: true
                });
            });
        });
    });
}

// Check for browser support of event handling capability
if (window.addEventListener) {
    window.addEventListener("load", loadResources, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadResources);
} else {
    window.onload = loadResources
}
0
Fareed Alnamrouti

C'est probablement une réponse/suggestion générique pour quand il rencontre un certain niveau de performance.

Bien que, il mentionne spécifiquement jQuery, un plugin et 109 octets de JavaScript intégré. Avez-vous du JavaScript en ligne? Placez-vous également votre JavaScript inclut au bas du <body>?

Exemple

Chargement de l'article sur la performance

EDIT:

Basé sur le HTML récemment posté ...

En guise de test, supprimez ces deux éléments pour voir si cela fait une différence:

<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->



<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>


En outre, le message d'avertissement mentionne 109 octets de JS en ligne, mais je ne vois rien de tel dans le code HTML que vous avez publié.

0
Sparky