Google PageSpeed Insight CSS Javascript "über die Falte" Problem mit CDN

Ich habe versucht, CDN Ressourcen mit lokalen Fallback Unterstützung für meine Webseite zu implementieren. Aber jetzt kann ich nicht rendern blockierende JavaScript und CSS CDN-Ressourcen für jquery und Bootstrap in den "over-the-Fold" Inhalt loswerden.Google PageSpeed Insight CSS Javascript "über die Falte" Problem mit CDN

Ich versuchte Googles Richtlinien zu halten aber es hat mein Problem nicht lösen:

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper">...</div> 
 
    <!-- jQuery CDN --> 
 
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
 
    <!-- jQuery local fallback --> 
 
    <script> 
 
    window.jQuery || document.write('<script src="./assets/scripts/jquery-2.2.2.min.js"><\/script>') 
 
    </script> 
 
    <!-- Bootstrap JS CDN --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</script> 
 
    <!-- Bootstrap JS local fallback --> 
 
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="./assets/scripts/bootstrap.min.js"><\/script>')}</script> 
 
    <!-- Bootstrap CSS local fallback --> 
 
    <div id="bootstrapCssTest " class="hide "></div> 
 
    <script> 
 
     $(document).ready(function() { 
 
     if ($('#bootstrapCssTest').is(':visible') === true) { 
 
       $("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">'); 
 
     } 
 
     }); 
 
    </script> 
 
    </body> 
 
</html> 
 
<!-- Bootstrap CSS CDN --> 
 
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">

UPDATE: Ich habe versucht, das "async/defer" -Attribut zum Laden meiner .js CDN-Skripte zu verwenden. Aber es hat nicht funktioniert, da mein lokales Fallback-Skript mir "Uncaught ReferenceError: $ ist nicht definiert" Fehler, weil sie ausgeführt werden, bevor jQuery asynchronen Laden beendet wurde.

Quelle

2016-04-04 HelloWorld0815

platzieren Sie sie kurz vor dem schließenden body tag ('') ganz unten auf Ihrer Seite. Das wird dein Problem beheben. Kein Async benötigt dann. Und niemals außerhalb der ''. BTW; CSS kann in den Kopf gelegt werden, nur Javascript sollte am Ende der Seite platziert werden. – giorgio

Skript ist bereits vor dem Schließen des Body-Tags. Das CSS wurde in den Kopf geschoben, aber immer noch das gleiche Seitengeschwindigkeits-Problem. – HelloWorld0815

Mit jQuery Bibliothek umfasst Fußbereich und unter benutzerdefiniertem Code Start jquery Code
40% CSS-Code in Above-the-fold-Gehalt (Kopfteil mit interner Sheet) <style type="text/css">...</style>

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper">...</div> 
 
    <div id="bootstrapCssTest" class="hide"></div> 
 
    <!-- jQuery CDN --> 
 
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
 
    <!-- jQuery local fallback --> 
 
    <script src="../scripts/jquery-2.2.2.min.js"></script> 
 
    <!-- Bootstrap JS CDN --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
 
    </script> 
 
    <!-- Bootstrap JS local fallback --> 
 
    <script src="../scripts/bootstrap.min.js"></script> 
 
    <!-- Bootstrap CSS local fallback --> 
 
    <script> 
 
    $(document).ready(function() { 
 
     if ($('#bootstrapCssTest').is(':visible') === true) { 
 
     $("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">'); 
 
     } 
 
    }); 
 
    </script> 
 
    <!-- Bootstrap CSS CDN --> 
 
    <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css "> 
 
</body> 
 
</html>

Quelle

2017-06-28 11:31:47

Google PageSpeed ​​Insight CSS Javascript "über die Falte" Problem mit CDN

Antwort

Verwandte Themen

Google PageSpeed Insight CSS Javascript "über die Falte" Problem mit CDN