如何推遲加載css文件（谷歌速度見解）

我想在Google Page Speed Insights上獲得100/100的分數。但它不斷告訴我一些css文件阻止了以上內容。如何確保在加載主內容後加載這些文件？這樣它就不會再出現在Page Speed Insights中了。如何推遲加載css文件（谷歌速度見解）

我嘗試使用jquery異步加載文件，但這種方式消息仍然在頁面速度工具彈出。

我試過如下：

<script> 
var loadMultipleCss = function(){ 
    //load local stylesheet 
    loadCss('myawesomestyle.css'); 

    //load Bootstrap from CDN 
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'); 

    //load Bootstrap theme from CDN 
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css'); 
} 

var loadCss = function(cssPath){ 
    var cssLink = document.createElement('link'); 
    cssLink.rel = 'stylesheet'; 
    cssLink.href = cssPath; 
    var head = document.getElementsByTagName('head')[0]; 
    head.parentNode.insertBefore(cssLink, head); 
}; 

//call function on window load 
window.addEventListener('load', loadMultipleCss); 
</script>

用我自己的文件路徑ofcourse。

但對於Google PageSpeed Insights，這不起作用。

來源

2017-06-16 twan

想不出你只需但他們之前吧？ –

@Jonasw不，當我嘗試時，它說我的CSS阻塞了內容，而我的JS被阻塞了。所以這個問題只會增加：P – twan

您能分享您正在優化的網站的鏈接嗎？

你確定你的頁面沒有被緩存到某個地方嗎？

有兩種方法爲我工作：

A）你可以只把樣式表標籤中的結束</html>標記之後。

B）另一種方法是把下面的鏈接標記成頭部分：

<link rel="preload" id="stylesheet" href="/assets/css/below.css" as="style" onload="this.rel='stylesheet'"> 
<noscript><link rel="stylesheet" href="/assets/css/below.css"></noscript>

與B法的缺點是，並非所有的瀏覽器都支持的rel =預壓中的鏈接標籤，你將需要包括下面填充工具：

<script> 
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */ 
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this); 

/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */ 
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this); 
</script>

我寫an article約從59的PageSpeed一個頁面優化到100，你可以在之前和之後看到如下分支：

前：https://github.com/storyblok/storyblok-express-boilerplate/blob/unoptimized/views/layouts/main.hbs

後：https://github.com/storyblok/storyblok-express-boilerplate/blob/master/views/layouts/main.hbs

來源

2017-06-18 21:51:43

太好了，謝謝。預加載方法對我很有幫助，當我修復CSS部分時，JS文件不再是問題。現在在手機和臺式機上都有100/100） – twan

如何推遲加載css文件（谷歌速度見解）

回答

相關問題