如何保持CSS阻止我的网站？ [英] How to keep CSS from render-blocking my website?

问题描述

我试图优化移动网页的加载速度，为此我使用的是网站：

本网站评估我的来源，并告诉我我可以改进什么。在我的网站上，我下载了一种字体：

 < link href =// fonts.googleapis.com/css?family= Open + Sans：400,700rel =stylesheet> 
  

而且显然这阻止了我的页面呈现。现在，如果这是JavaScript，我可以在标签中使用 async 字，它会解决问题，但这不是我正在加载的JavaScript文件！

有没有办法阻止这个资源阻塞我的浏览器并强制它等到它被下载？

解决方案

 < script> 
 
（function（）{
 var link = document.createElement（'link'）; 
 link.rel =stylesheet; 
 link.href =// fonts。 googleapis.com/css?family=Open+Sans:400,700; 
 document.querySelector（head）。appendChild（link）; 
}）（）; 
< / script> 
  

字体将在主渲染带外加载。当然，这意味着当字体完成加载时会有一个视觉上的变化......并且如果用户禁用了JavaScript，它根本不会加载字体。

< hr>

或者，正如dandavis指出的那样，您可以在结尾处使用样式元素， body ，就在结束< / body> 标记之前：

 <风格> 
 @import//fonts.googleapis.com/css?family=Open+Sans:400,700
< / style> 
  

这是无效的HTML，但是A）我从来没有见过一个关心的浏览器， B）展望它，看起来像HTML5规范的夜晚将允许 if 添加 scoped 属性：

 < style scoped> 
 @import//fonts.googleapis.com/css?family=Open+Sans:400,700
< / style> 
  

（范围属性从规范中拉出来。）

使用JavaScript的优点如下：

理论上，浏览器的预取扫描程序可能会找到样式元素，并提前开始下载（尽管如果将JavaScript放在 head 中）并不是特别有可能，并且 即使用户禁用了JavaScript，也能正常工作。 或者，您可以移动链接元素添加到 body 的最后，但目前这是无效的，范围属性不（但？）似乎适用。 （为什么它适用于样式而不是 link [rel = stylesheet] ？我不知道，也许它是只是一个尚未到达的问题...）

I am trying to optimize the loading speed of my mobile webpage, and for that effect I am using the website:

• https://developers.google.com/speed/pagespeed/insights

This website evaluates my source and tells me what I can improve. In my website I download a font:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

and aparently this is blocking the rendering of my page. Now, if this was JavaScript I could use the async word in the tag and it would fix the problem, but this is not a javascript file I am loading!

Is there anyway to keep this resource from blocking my browser and force it to wait until it is downloaded?

解决方案

You can do it with JavaScript:

<script>
(function() {
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700";
    document.querySelector("head").appendChild(link);
})();
</script>

The font will be loaded out-of-band with the main rendering. Of course, that means there will be a visual change when the font finishes loading...and if the user has JavaScript disabled, it won't load the font at all.

---

Or, as dandavis points out, you could just use a style element at the end of body, just before the closing </body> tag:

<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

That's invalid HTML, but A) I've never met a browser that cared , and B) Looking into it, it looks like the nightlies of the HTML5 spec will allow this if you add the scoped attribute:

<style scoped>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

(The scoped attribute got pulled from the spec.)

The advantages to this over using JavaScript are:

1. In theory, the browser's prefetch scanner might find the style element and start the download earlier (although this isn't particularly likely if you put the JavaScript in head), and

2. It works even if the user has JavaScript disabled.

Alternately, you could just move your link element to the end of body, but at present, that's invalid and the scoped attribute doesn't (yet?) seem to apply. (Why make it apply to style and not link[rel=stylesheet]? I have no idea, and perhaps it's simply a matter of not having got there yet...)

这篇关于如何保持CSS阻止我的网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！