有效地加载CSS在我的页面 [英] Loading CSS in my page eficiently

问题描述

这是我的问题。

我使用Google Page Speed Insights分析我的网页。
它告诉我删除我的css链接在头部（浮动线），因为它阻止我的页面加载。

I am analyzing my page with Google Page Speed Insights. An it's telling me to remove my css link in the head (above floating line) because its blocking my page load.

现在我有一个简单的链接在我的文档头部：

Right now I have a simple link in the head of my document:

<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" /> 
 </head>

我尝试将链接行放在文档的底部。就在页面结束之前。

I have try to place the link line at the bottom of the document. just before the end of the page.

<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" /> 
</body> 

Ran Insight。

Ran Insight again.

2个用于Insight结果的选项卡。通过将css链接放在文档的en，我在移动选项卡上得分为100％。然而，我仍然得到相同的消息在计算机部分，如果没有母校，我放置它仍然得到加载浮线以上。我不明白，因为我可以看到页面加载没有css的一小部分秒。

There is 2 tabs for Insight result. By placing the css link at the en of the document I score 100% on the mobile tab. However I still get the same message on the computer part as if no mater where I place it is still getting loaded above the floating line. I don't understand because I can see the page being loaded without the css for a fraction of second.

所以我想知道加载我的css的最好方法是什么？

So I'm wondering what would be the best way to load my css?

样式标签？

我应该在元素上添加样式标签吗？

Should I add a style tag on the elements? <-- I would rather not.

这是什么最好的方式加载我的css？

So whats the best way to load my css?

谢谢。

推荐答案

Insight会始终考虑加载外部 CSS文件效率较低，因为 Google Developers - OptimizeCSSDelivery

IMHO, Insight will always consider loading external CSS file as less efficient, because, from Google Developers - OptimizeCSSDelivery

优化CSS投放

当PageSpeed Insights检测到某个网页包含呈现拦截外部样式表时，延迟第一次渲染的时间。

Optimize CSS Delivery
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.

这对于小的CSS代码可能是真的，但是对于大的代码这不是真的，这样做的另一个缺点是，如果你决定要更改CSS中的某些内容，则需要转到每个页面并执行更改，而不是一次更改。

This might be true for small CSS code, but for large ones this is not true, another disadvantage of doing this is if you decided to change something in your CSS, then you'll need to go to every single page and do the change instead of changing it one time.

除此之外，外部CSS文件不同的内联代码，也考虑到网页的大小会增加或每一页，因为你包括它内联的每一页。

Beside, external CSS files could be cached unlike inline code, also considering the webpage size will increase or each page because you included it inline in every page.

元素上的样式标签？ < - 我宁愿不要

Should i add a style tag on the elements? <-- I would rather not

Never !,这会让你很难在维护和推广你的CSS，最高优先级，所以你会碰到你的头靠在墙上想知道为什么改变外部文件中的CSS或在头部分没有生效。

Never!, this will give you hard time in maintaining and generalizing your CSS, and will have the top priority so you'd bang your head against the wall wondering why changing the CSS in external file or in the head section is not taking effect.

这篇关于有效地加载CSS在我的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！