Google PageSpeed Insight CSS Javascript "katlamanın üstünde" sorunu kullanılarak CDN

Web sayfam için yerel geri dönüş desteği ile CDN kaynaklarını kullanmaya çalıştım. Ancak, artık "ekranın üst kısmı" içeriğinde jquery ve Bootstrap için render-blocking JavaScript ve CSS CDN kaynaklarından kurtulamıyorum. Google PageSpeed Insight CSS Javascript "katlamanın üstünde" sorunu kullanılarak CDN

Ben Googleın Rehberinin sopa çalıştı ama benim sorunu çözmedi:

<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: ".yn CDN komut dosyalarımı yüklemek için" async/defer "özniteliğini kullanmaya çalıştım. Ama benim yerel geri dönüş komut dosyası bana jquery async yükleme bitmişti önce yürütülmektedir çünkü bana "Uncaught ReferenceError: $ tanımlı değil" hata verir gibi çalışmadı. jQuery kütüphanesi kullanarak

kaynak

2016-04-04 HelloWorld0815

yer onları sadece kapanış gövde etiketinden önce ('') sayfanızın en altında. Bu senin problemini çözecek. O zaman gerekli değil. Ve asla "" dışında. btw; css başa yerleştirilebilir, sadece javascript sayfanın altına yerleştirilmelidir. – giorgio

Komut dosyası, gövde etiketini kapatmadan önce zaten. CSS'yi kafasına taşıdı, ancak yine de aynı Pagespeed sorununu alıyor. – HelloWorld0815

(iç sayfasını kullanarak kafa bölümü) alt bilgi bölümü ve özel kod başlangıç jquery kodu yukarıda kat içerik
% 40 CSS kodu altında <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>

içerir

kaynak

2017-06-28 11:31:47

Google PageSpeed ​​Insight CSS Javascript "katlamanın üstünde" sorunu kullanılarak CDN

cevap

İlgili konular

Google PageSpeed Insight CSS Javascript "katlamanın üstünde" sorunu kullanılarak CDN