简体繁体 English

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

[英]Can I put my external css files at the end of the html page to prevent render blocking?

原文 2017-07-14 06:11:14 8 4 javascript/ jquery/ html/ css/ render-blocking

I have done google page speed test. 我已经完成了Google页面速度测试。 In the report it suggests me to remove render blocking css resources in above the fold content. 在报告中，它建议我删除折叠内容上方的渲染阻止CSS资源。 I came to know that I have 14 external CSS files which causes delay in loading my page. 我知道我有14个外部CSS文件，这会导致页面加载延迟。 So can I put my CSS files at the end of the HTML tag or is there any other way to do it? 那么我可以将CSS文件放在HTML标记的末尾，还是有其他方法可以呢？

4 个解决方案

Above the fold content means, what you presently seeing on the screen without scrolling down.the styles for the above the fold content is necessary for the initial load, other styles can be download later.so what you can do, have two style sheets one contain the styles for the initial page load and the other style sheet will have the rest of the styles.the second style sheet you can include through javascript 折叠内容上方表示您当前在屏幕上看到的内容而无需向下滚动。折叠内容上方的样式对于初始加载而言是必需的，其他样式可以在以后下载。因此您可以做的是拥有两个样式表包含用于初始页面加载的样式，其他样式表将具有其余样式。您可以通过javascript包含的第二个样式表

How to optimize you css files for better performance 如何优化CSS文件以获得更好的性能

instead of having so many external files ,combine those in to a single file.this will reduce the number of request to the server 而不是拥有太多外部文件，而是将这些文件合并到一个文件中。这将减少对服务器的请求数量
Minify your css files (This will remove the unwanted space) 缩小您的CSS文件（这将删除不需要的空间）
Remove unused css. 删除未使用的CSS。 you might have used a front end framework like twitter bootstrap and foundation.there are lot of addons to identify the list of unused css. 您可能使用了诸如twitter bootstrap和foundation之类的前端框架。有很多插件可以识别未使用的CSS列表。

Doing what you suggested will load a site which is not styled and then after the css has been loaded the site will get styling which will give a jerky / bad UX. 按照您的建议进行操作将加载未样式化的网站，然后在加载CSS之后，该网站将获得样式化，这将给用户带来生涩/不良的用户体验。 Instead you can inline (or add inside head tag) the first fold content, ie the CSS that is required to style the first part of the website you see without scrolling. 取而代之的是，您可以内联（或在head标签内添加）第一折内容，即，无需滚动即可为您看到的网站第一部分设置样式的CSS。 Then in production mode merge all your css files into a single file with a dns-prefetch if your source is a trusted source. 然后在生产模式下，如果您的源是受信任的源，则将所有css文件合并为具有dns-prefetch的单个文件。 Also if your are using a react app bundled via webpack you can try implementing code splitting to load bundles pertaining to the route. 另外，如果您正在使用通过Webpack捆绑的react应用，则可以尝试实施code splitting以加载与该路线有关的捆绑。 Split your vendor css/js files and your app files so that browser cache can be leveraged. 分割供应商的css / js文件和应用程序文件，以便可以利用浏览器缓存。

Udacity has this free course here which can give you a better idea of how to optimise your page speed time. Udacity 在这里有此免费课程，可以使您更好地了解如何优化页面速度。

You can do that and it will load faster, but while it is being loaded, it will be unstyled. 您可以执行此操作，它将加载得更快，但是在加载时，将不设置样式。 If this is ok for you, then go ahead and do it. 如果您认为可以，请继续进行。 However, if you ask me you can categorize your CSS styles/files to urgent and not so urgent. 但是，如果您问我，您可以将CSS样式/文件分类为紧急而不是紧急。 If your page loads for like 5 seconds and meanwhile everything is unstyled, then you might think that the result is not very good in terms of UX. 如果您的页面加载了大约5秒钟，同时所有内容都未设置样式，那么您可能会认为就UX而言，结果不是很好。 So, pick up the styles you absolutely want to load at the start and put the rest at the end. 因此，请从一开始就选择绝对要加载的样式，然后将剩下的样式放在最后。

Putting it at the end of the file would cause the browser to first display all your html wihtout any styling. 将其放在文件末尾会导致浏览器首先显示所有HTML样式。 Which I personally find unsatisfactory. 我个人觉得不满意。

Try to rather merge your css files together to use only one big minified file so the browser only needs to load one file for css. 尝试将CSS文件合并在一起，以仅使用一个较大的缩小文件，因此浏览器仅需要为CSS加载一个文件。