今天,我尝试使用Google PageSpeed Insights检查我的网站,其建议是:“消除首屏内容中的渲染阻止CSS”。据我了解,最好在页面顶部包含所有CSS(例如,在标记中),然后在页面稍后包含其他内容的样式。在此建议的文档中是以下示例构造:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">
但是问题是HTML W3验证器会引发错误(“杂散起始标签链接”),这与我尝试在标签中包含时相同。因此,问题是:将CSS包含到页面中的更好方法是什么(使用推荐的构造是否正常?
最佳答案
将CSS放在头部,如果可以,请合并CSS并相应地标记CSS文件(例如,media =“ print”)。
https://varvy.com/pagespeed/render-blocking-css.html这是一个很好的资源,在其中解释了您可以做的更多事情,但是请记住,例如,内联css无法缓存,如果再次请求它会使页面变慢。
您可以做的另一件事是在页面上未提及是通过javascript动态插入CSS:创建一个链接元素,并将其插入dom-ready的头部。
关于javascript - 如何在页面中适当包含CSS文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41845726/