Question

我一直关注并使用Google Pagespeed Insights检查程序。我接近100％;虽然我知道洞察力检查中列出的所有建议都是建议，而且根据每个需求都不远，我需要知道将缩小的CSS捆绑直接放在每个页面上的<style></style>标记之间的一般共识是什么做1x <link href=...>文件。

澄清一下，我所说的是这样做：

<html>
<head>
<style>
<?php include('/path/to/compiledMinified.css');
</style>
</head>

输出到这样的东西：

<html>
<head>
<style>
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight.........
</style>
</head>

现在Google Pagespeed Insights得分从81（黄色）一直到96（绿色）。

所讨论的缩小的CSS具有所有全局CSS样式，fontawesome，bootstrap和其他一些东西都吞成了一个缩小的CSS文件。

这方面的缺点很明显，CSS不会被浏览器缓存，需要在<head>页面之间的网站的每个页面上下载。另一方面，网站上的页面无论如何都不大，并且可能保存HTTP请求以提高性能。

但是你从未听说过它吗？在<style>标记之间的<head></head>标记之间粘贴引导等等。

什么是正确的方式＆＃39;这样做？

Answer 1

我认为没有正确的方法可以做到这一点。你永远不应该用这么大的文件做内联样式。我强烈建议你坚持使用外部文件。

如果你坚持自己的想法 - 我认为没有比把它放在两者之间更好的方法了

在标签之间内联缩小CSS文件而不是HTTP <link />到它们

1 个答案: