2011-08-26 13 views
14

Tutti i miei file JavaScript sono già in fondo ma Google Page Speed ​​sta dando questo suggerimento per migliorare la velocità:Rimanda analisi del codice JavaScript - Google Page Speed ​​

Rimanda l'analisi del codice JavaScript

88.6KiB di JavaScript viene analizzato durante il caricamento iniziale della pagina. Rinviare analizzando JavaScript per ridurre il blocco del rendering della pagina. http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js (76.8KiB) http://websiteurl/js/plugins.js (11.7KiB) http://websiteurl/ (109B di JavaScript inline)

Questa è la mia html (esempio)

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

Cosa devo fare per aumentare le prestazioni usando il differimento?

È solo per Google Chrome o per tutti?

+1

Quando si dice "la mia JavaScript è già in fondo" Si riferisce al tuo JS personalmente scritto, o stai anche contabili per la ' –

6

Se stai cercando prestazioni di pagina, prima di tutto devi spostare quegli script nella parte inferiore della pagina per consentire il caricamento delle altre risorse.

Anche utilizzare DNS prefetch nella testa per impostare il dominio di base per google-codice

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

Dal momento che questo è solo un piccolo pezzo di codice, si potrebbe semplicemente aggiungerlo ai tuoi plugins.js depositare presso la in basso, quindi rimanda il file dei plugin.

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

Questo è quello che farei in ogni caso, tutti i miei siti sono ottimizzati per 98 e 97, rispettivamente, in YSlow e pagina velocità.

Spero che aiuti.

-V

1

vedo questo è una vecchia questione, ma da quando ero alla ricerca di una buona risposta me stesso, ho intenzione di condividere il metodo che attualmente uso.

Per quanto riguarda Javascript in linea, ciò che faccio è modificare tutti gli attributi type in text/deferred-javascript o qualcosa di simile, in modo che il codice all'interno del tag dello script non venga valutato durante il caricamento della pagina. Quindi allego l'evento pagina onload; detta funzione trova tutti gli script che corrispondono al tipo sopra e valuta il codice all'interno usando eval(). So che in generale eval() è malvagio ma sembra essere utile qui.

Per file Javascript esterni, faccio qualcosa di molto simile. Invece di aggiungere i tag dello script alla pagina, li registro e li inserisco uno alla volta al termine del caricamento della pagina.

Un problema che sto avendo è che se uno dei Javascript in linea rinviati contiene un errore (ad esempio un errore di analisi), gli script successivi non vengono caricati (ma ciò potrebbe dipendere dalla mia attuale implementazione).

0

Ottengo lo stesso problema con Pagespeed - Immagino che Pagespeed Analyzer non controlli se il Javascript si trova alla fine del corpo.

0

Ciao, abbiamo creato un framework opensource nodejs chiamato "elegante framework" che ti aiuta a creare applicazioni web veloci e siamo riusciti a ottenere il 100% della velocità di google su desktop e dispositivi mobili in tutte le pagine: puoi verificarlo a :

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

c'è un sacco di cose che si possono imparare da esso visualizzando il sorgente della pagina anche se qualcosa non si può capire prega di commento in modo che io possa aiutare con

finora si può provare questo metodo:

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

Aggiungi tag <script type="text/javascript" defer="defer"> come quello che funziona per me.

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