“在上面的内容中消除渲染阻挡CSS” [英] "Eliminate render-blocking CSS in above-the-fold content"

问题描述

我一直在使用Google PageSpeed洞察力来尝试改善我的网站的效果，到目前为止，它已证明非常成功。推迟脚本的东西工作得很漂亮，因为我已经有一个内部版本的jQuery的 .ready（）推迟脚本，直到页面完全加载，所有我不得不做是内联该特定功能，并将完整脚本移动到页面的结尾。效果很好。

I've been using Google PageSpeed insights to try and improve my site's performance, and so far it's proven extremely successful. Things like deferring scripts worked beautifully, since I already had an in-house version of jQuery's .ready() to defer scripts until the page had loaded fully, all I had to do was inline that particular function and move the full scripts to the end of the page. That worked great.

但现在我发现自己看到清单上的一个剩下的黄点：在上层内容中消除渲染阻止CSS。

But now I find myself glaring at the one remaining yellow dot on the checklist: "Eliminate render-blocking CSS in above-the-fold content".

我的CSS的设置方式是有一个全局 _。css 文件包含适用于页面结构，或在整个站点的多个或两个地方使用。大多数页面都有一个关联的CSS文件（例如， party.php 有 party.css 该特定页面。所有CSS文件被无限缓存，因为我将 / t = FILEMTIME 附加到文件名（以后用.htaccess删除它们），以保证文件在更改时更新。

The way my CSS is set up is to have one global _.css file containing styles that apply to the page structure in general, or are used in more than one or two places across the site. Most pages then have an associated CSS file (for instance, party.php has party.css) containing styles specific to that particular page. All CSS files are cached indefinitely, as I append /t=FILEMTIME to filenames (and later remove them with .htaccess) in order to guarantee that files are updated when they are changed.

因此，无论如何，Google建议使用非首屏内容所需的关键样式。问题是...好，看看这个屏幕截图： http://prntscr.com/1qt49e

So anyway, Google recommends inlining critical styles needed for above-the-fold content. Trouble is... well, take a look at this screenshot: http://prntscr.com/1qt49e

如你所见... 全部的内容是折叠！人们讨厌滚动，特别是在涉及加载许多页面的游戏。所以我设计的网站适合在一个屏幕上（假设一个足够好的分辨率）。因此，这意味着...全部的样式适用于首屏内容！所以...有什么解决方案？

As you can see... ALL of the content is above-the-fold! People hate scrolling, especially on a game that involves loading many pages. So I designed the site to fit on one screen (assuming a good enough resolution). So that means... ALL of the styles apply to above-the-fold content! So... is there any solution? Or am I stuck with that yellow mark on an otherwise near-perfect score?

推荐答案

之前已提出相关问题：

首先，您必须注意到这是关于移动网页的。
因此，当我正确解释您的问题和屏幕截图时，这是不是您的网站！

Firstly you have to notice that this is all about 'mobile pages'.
So when I interpreted your question and screenshot correctly, then this is not for your site!

的谷歌在他们的指导建议的事情会比正常的网站更糟糕。

不是来自谷歌的一切都是圣杯，只是因为它来自谷歌。

On the contrary - doing some of the things advised by Google in their guidelines will things make worse than better for 'normal' websites.
And not everything that comes from Google is the "holy grail" just because it comes from Google. And they themselves are not a good role model if you have a look at their HTML markup.

我可以给你的最好的建议是：

The best advice I could give you is:

• 在CSS中替换元素上设置宽度和高度，以便浏览器可以布局元素，而不必等待替换的内容！

此外，为什么要使用不同的CSS文件，而不只是一个？

额外的请求比少量数据量。

Additionally why do you use different CSS files, rather than just one?
The additional request is worse than the small amount of data volume. And after the first request the CSS file is cached anyway.

应该总是处理的事情是：

The things one should always take care of are:

• 尽可能减少请求数量


• 尽可能降低总页面权重

不要让你的大脑了解如何获得Google的PageSpeed Insights工具的100％...！ ; - ）

And don't puzzle your brain about how to get 100% of Google's PageSpeed Insights tool ...! ;-)

补充1：这是Google向我们展示的网页，他们推荐 优化CSS投放 。

Addition 1: Here is the page on which Google shows us, what they recommend for Optimize CSS Delivery.

如前所述，我不认为是不现实的，也不是一个正常网站有意义！因为主要是当您有响应式网页设计时，最肯定的是您使用媒体查询和其他布局样式。因此，如果你不会先加载CSS，并以阻塞的方式，你会得到一个 FOUT （ Flash of Unstyled Text ）。我真的不相信这是更好比至少几毫秒来呈现页面！

As said before, I don't think that this is neither realistic nor that it makes sense for a "normal" website! Because mainly when you have a responsive web design it is most certain that you use media queries and other layout styles. So if you are not gonna load your CSS first and in a blocking manner you'll get a FOUT (Flash Of Unstyled Text). I really do not believe that this is "better" than at least some more milliseconds to render the page!

Imho Google开始一个新的炒作（当我有看一下关于它的所有问题在Stackoverflow）...！

Imho Google is starting a new "hype" (when I have a look at all the question about it here on Stackoverflow) ...!

这篇关于“在上面的内容中消除渲染阻挡CSS”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！