如何延迟加载 css 文件(用于谷歌速度洞察)

Question

我试图在谷歌页面速度洞察上获得100/100的分数。但它一直告诉我一些 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>

当然是我自己的文件路径。

但是对于Google PageSpeed Insights来说，这不起作用。

Answer 1

你能分享你正在优化的网站的链接吗？

您确定您的页面未缓存在某处吗？

有两种方法对我有用：

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=preload 在链接标记中，您需要包含以下 polyfill：

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

我写了一篇关于将页面从 pagespeed 59 优化到 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

Answer 2

你可以在页面加载后使用 ajax/jQuery 加载 CSS。这将允许您随时加载不重要的 CSS，例如，使用 setTimeout .

例：

document.addEventListener('DOMContentLoaded', () => {
    setTimeout($('head').append("<'link rel="stylesheet" href="your_css_file.css" type="text/css" />"), 3000); 
});

编辑：请删除链接词("链接"(前面的"字符"。它入在那里，以便堆栈溢出可以显示代码。否则它会显示"...追加("<>"...(。

在上面的示例中，CSS 只会在页面完全加载后 3 秒加载。

我在我的一些页面中这样做了，并在不影响用户界面或布局的情况下获得了 100% 的页面速度，因为我在该方法中使用的 CSS 文件是次要的，例如 sweetalert。