Html 在折叠CSS之上进行优化
我想修正“消除折叠内容上方的渲染阻塞JavaScript和CSS”要求以获得更好的分数，但我不太确定解决此问题的最佳方法是什么Html 在折叠CSS之上进行优化,html,css,optimization,google-pagespeed,Html,Css,Optimization,Google Pagespeed,我想修正“消除折叠内容上方的渲染阻塞JavaScript和CSS”要求以获得更好的分数，但我不太确定解决此问题的最佳方法是什么 如何才能最好地平衡新访问者和返回访问者的页面负载 什么时候应该异步加载CSS，什么时候不应该 我应该只为小屏幕使用内联CSS吗 相关介绍： 例子 由于内联大量CSS会导致后续访问的页面加载速度变慢，因此我可以基于cookie为经常访问的用户提供不同的版本。为了检测上面的CSS，我可以使用本文中的bookmarklet:paul.kinlan.me/detecting
- 如何才能最好地平衡新访问者和返回访问者的页面负载
- 什么时候应该异步加载CSS，什么时候不应该
- 我应该只为小屏幕使用内联CSS吗
<!DOCTYPE HTML>
<html>
<head>
<title>New Visitor</title>
<style><!-- insert above the fold css here --></style>
<noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
<!-- insert content here -->
<script>
// load css
var node = document.createElement('link');
node.rel = 'stylesheet';
node.href = 'style.css';
document.head.appendChild(node);
// set cookie
var exp = new Date();
exp.setTime(exp.getTime() + 3600 * 1000);
document.cookie = 'returning=true; expires=' + exp.toUTCString() + '; path=/';
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Returning Visitor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- content here -->
</body>
</html>
新访客
//加载css
var节点=document.createElement（'link'）；
node.rel='stylesheet'；
node.href='style.css'；
document.head.appendChild（节点）；
//设置cookie
var exp=新日期（）；
exp.setTime（exp.getTime（）+3600*1000）；
document.cookie='returning=true；expires='+exp.toutString（）+'；路径=/'；
<!DOCTYPE HTML>
<html>
<head>
<title>New Visitor</title>
<style><!-- insert above the fold css here --></style>
<noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
<!-- insert content here -->
<script>
// load css
var node = document.createElement('link');
node.rel = 'stylesheet';
node.href = 'style.css';
document.head.appendChild(node);
// set cookie
var exp = new Date();
exp.setTime(exp.getTime() + 3600 * 1000);
document.cookie = 'returning=true; expires=' + exp.toUTCString() + '; path=/';
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Returning Visitor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- content here -->
</body>
</html>
回访者
这种方法有什么问题吗？存在过度优化的问题。您的示例方法增加了不必要的复杂性。您应该看到的是头部部分的最小样式表，它将使折叠上方的所有内容都有意义，并符合设计和布局（但不一定100%尊重它）
对于页面的其余部分，只需在页面末尾加载CSS的其余部分，就可以了。如果对你来说重要的是在折叠之上，那么你加载的第一个CSS也是如此。其他一切都可能延迟。“为了获得更好的PageSpeed Insights分数”-首先，我会问自己：我的页面是否真的需要优化，或者你在那句话中所写的一切都是为了分数而优化，这并不是因为对用户有任何实际好处？如果您只使用一个外部样式表，那么性能的提高将是微不足道的，因此，除非您正在构建下一个Facebook，否则您将浪费在优化它上的时间。还有很多更重要的事情要做，比如说一个页面确实需要优化，所有更重要的事情都已经完成了。如何在关键呈现路径中优化CSS，不仅可以获得更好的页面速度分数，还可以获得实际页面加载时间，甚至页面排名？