我可以将我的外部css文件放在html页面的末尾以防止渲染阻塞？

我已经完成了谷歌网页速度测试。在报告中，它建议我删除折叠内容上方的渲染阻止CSS资源。我开始知道我有14个外部CSS文件，这会导致加载我的页面时出现延迟。那么我可以把我的CSS文件放在HTML标签的末尾，还是有其他方法可以做到这一点？我可以将我的外部css文件放在html页面的末尾以防止渲染阻塞？

来源

2017-07-14 Intern

[伪君子]（https://developers.google.com/speed/pagespeed/insights/?url=www.google.com&tab=mobile） –

将不同样式表的内容放在一个文件中？ – Cyclonecode

如果你把css放在文件中，它会加载得更快一些，但是当它加载时，所有的内容都是无风格的。 – fen1x

-3

在文件的结尾把它会导致浏览器首先显示所有的HTML wihtout任何造型。我个人觉得不尽人意。

尝试，而合并的CSS文件一起只使用一个大的缩小的文件，因此在浏览器只需要加载一个文件的CSS。

来源

2017-07-14 06:13:04 SVARTBERG

哈哈，为什么downvoting？我说的是不正确的吗？ – SVARTBERG

这应该是一个评论。 –

首屏内容的手段，你在屏幕上看到目前没有对屏内容滚动down.the风格是必要的初始负载，其他款式可以下载later.so你可以做什么，有两个样式表一个包含初始页面加载和其他样式表的样式将具有styles.the第二样式表的其余部分可以包括通过JavaScript

如何优化你的CSS文件中有更好的表现

的

代替具有这样米任何外部文件，结合那些为单个文件。这个会的请求数量减少到服务器
缩减大小的CSS文件（这将删除多余的空格）
删除未使用的CSS。你可能已经使用了像twitter bootstrap和foundation这样的前端框架。有很多插件来识别未使用的CSS列表。

来源

2017-07-14 06:26:41 codegeek

+1确保你还发送g-zip内容。真实生活表现 - 其中**包括可维护性** - 优先于谷歌自己的一些评分系统[他们似乎不关心他们的产品。]（https://developers.google.com/speed/pagespeed/洞察/？url = youtube.com＆tab = mobile） –

@Ihazkode是的，我发送g-zip内容 – Intern

@Intem，我们可以做很多事情来优化网站，在这个网站有非常好的文章https：// varvy .COM /的PageSpeed / – codegeek

做你的建议将加载未样式，然后CSS加载后的网站将获得的造型，这将给一个干/坏UX网站的内容。相反，您可以内联（或在头标签内添加）第一个折叠内容，即需要对网站第一部分进行样式设置而不滚动的CSS。然后在生产模式下将所有的css文件合并到一个文件中，如果您的源文件是可信来源，则文件的文件名为dns-prefetch。此外，如果您使用的是通过捆绑的WebPack一个反应应用程序，你可以尝试实施code splitting加载有关路线束。拆分供应商的css/js文件和您的应用程序文件，以便可以利用浏览器缓存。

Udacity有这个免费的课程here它可以让你更好地了解如何优化你的页面加速时间。

来源

2017-07-14 06:35:51

你可以做到这一点，它会加载速度更快，但被加载时，它会是无样式。如果这对你是好的，那就继续做吧。但是，如果你问我，你可以将你的CSS样式/文件分类为紧急，而不是那么紧急。如果您的页面加载时间为5秒，并且所有内容都是无风格的，那么您可能会认为结果在用户体验方面不是很好。所以，拿起你绝对要在开始时加载的样式，并将其余的放在最后。

来源

2017-07-14 11:28:52

我可以将我的外部css文件放在html页面的末尾以防止渲染阻塞？

回答

相关问题