PageSpeed中的渲染拦截CSS - 单个文件

我正在测试前端的优化最佳实践。所以我已经学会了使用gulp和npm合并和缩小我的CSS和JS文件到单个all.min.css和js.min.cssPageSpeed中的渲染拦截CSS - 单个文件

在Google PageSpeed中，我警告“在上面消除渲染阻塞JavaScript和CSS折叠内容“。所以我在我的js脚本中添加了“async”。

<script async src="/dist/js/all.min.js"></script>

工作正常，但如何处理我的.css文件？

<link rel="stylesheet" href="/dist/css/all.min.css">

这是我的网站（33kb）中的单一css文件。它包括bootstrap，字体真棒，几个小库和我的style.css。

在html源代码中包含这个大文件是一个好习惯吗？我做错了什么？我想至少得到一次100分，但不要做出愚蠢，不实际的事情。

来源

2017-10-19 norr

您只需将CSS文件移动到页面的底部，以便HTML在CSS之前加载。

BE的，这可以引起无样式内容的闪光，

的无样式内容的闪光（FOUC，也闪烁无样式文本或FOUT的）1 [2]是其中出现一个网页的实例由于Web浏览器引擎在检索到所有信息之前呈现页面，所以在加载外部CSS样式表之前简单地使用浏览器的默认样式。

Source

来源

2017-10-19 21:33:34

你可以防止此通过简单地增加直列式'显示：无;上主体'，然后在后来加载的CSS文件'。体{显示：块; }' –

你得到了

<link rel="stylesheet" href="/dist/css/all.min.css">

在 <header>页面

。这是常见的做法。 Pagespeed Insights希望您将其删除，并将其放置在内容后面（在页面加载时不显示滚动的情况下，屏幕上显示的内容之后的“below-the-fold”=>）。例如将其放置在页脚中。

来源

2017-10-19 21:33:41

Google PageSpeed工具提供了一般准则，而不是实际的速度测量。因此，如果你没有达到完美的100分，你就不应该失眠。

这就是说，在没有“堵以上的倍渲染”送你的CSS的最佳方式：

添加所必需的上面屏内容作为内嵌样式的所有样式HTML头。例如：

<style> 
    #logo { 
     // ... 
    } 
    #navigation { 
     // ... 
    } 
    .hero-banner { 
     // 
    } 
</style>

负载其余样式（级联和你的情况精缩到一个文件中），异步，它是在结束标记之前通过延迟或异步JavaScript典型的做法。例如：

<script> 
    var deferstyles = document.createElement("link"); 
    deferstyles.rel = "stylesheet"; 
    deferstyles.href = "/dist/css/all.min.css"; 
    document.getElementsByTagName('head')[0].appendChild(deferstyles); 
</script>

来源

2017-10-19 21:54:22 tobiv

PageSpeed中的渲染拦截CSS - 单个文件

回答

相关问题