“在首映内容中消除渲染阻止CSS”-Java 学习之路

151

我've been using Google PageSpeed insights to try and improve my site'的性能，到目前为止，它延迟脚本直到页面完全加载，我所要做的就是内联该特定功能并将完整脚本移动到页面末尾 . 这很有效 .

但是现在我发现自己瞪着核对清单上剩下的一个黄点：“在首映内容中消除渲染阻止CSS” .

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

因此，无论如何，Google建议内联上层内容所需的关键样式 . 麻烦是......好吧，看一下这个截图：http://prntscr.com/1qt49e

正如你所看到的......所有内容都是首屈一指的！人们讨厌滚动，尤其是涉及加载许多页面的游戏 . 因此，我将网站设计为适合一个屏幕（假设分辨率足够好） . 所以这意味着...所有的风格都适用于上面的内容！那么......有什么解决方案吗？或者我是否在那个近乎完美的分数上坚持那个黄色标记？

6 回答

178
之前已经提出过相关问题：What is “above-the-fold content” in Google Pagespeed?

首先，你必须注意到这都是关于' mobile pages ' .
因此，当我正确解释您的问题和截图时，这是 not for your site!

相反 - 在他们的指导方针中做一些谷歌建议的事情会让事情变得更糟，而不是更好的'normal'网站 .
并非所有来自谷歌的东西都是"holy grail"，因为它来自谷歌 . 如果你看一下他们的HTML标记，他们自己就不是一个好的榜样 .

我能给你的最好建议是：
- 设置CSS中替换元素的宽度和高度，以便浏览器可以布局元素，而不必等待替换的内容！
另外，为什么你使用不同的CSS文件，而不只是一个？
附加请求比少量数据量更糟糕 . 在第一次请求之后，无论如何都要缓存CSS文件 .

应该经常照顾的事情是：
- 尽可能减少请求数量
- 保持您的整体页面重量尽可能低
并且不要让大脑知道如何获得100％的Google的PageSpeed Insights工具......！ ;-)

增加1：以下是Google向我们展示的页面，以及他们为Optimize CSS Delivery推荐的内容 .

如前所述，我认为这既不现实也不认为对于"normal"网站来说是有意义的！因为主要是当你有 responsive web design 时，最确定你使用媒体查询和其他布局样式 . 因此，如果你不是首先加载你的CSS并以阻塞的方式加载 FOUT （ Flash Of Unstyled Text ） . 我真的不相信这是"better"至少比渲染页面多几毫秒！

Imho Google正在开始一个新的“炒作”（当我在Stackoverflow上查看有关它的所有问题时）...！
回复于 2024-05-05T05:21:19+08:00
13
我如何在Google Page Speed上获得99/100（适用于移动设备）

TLDR：在 <style></style> 标签之间压缩并嵌入整个css脚本 .

我一直在追逐那个难以捉摸的100/100分数，现在大约一周 . 和你一样，剩下的最后一项是消除“渲染阻塞css以上的折叠内容” .

当然有一个简单的解决？不 . 我试过Filament group's loadCSS解决方案 . 我喜欢太多.js .

css的 async 属性怎么样（比如js）？它们不存在 .

我准备放弃了 . 然后它突然出现在我身上 . 如果链接脚本阻止了渲染，那么如果我将整个css嵌入到头部中会怎么样 . 这样就没有什么可以阻止了 .

在我的样式标记中嵌入1263行CSS似乎绝对错误 . 但我给了它一个旋转 . 我首先使用以下方法对其进行压缩（并将其作为前缀）：

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ See the NPM postcss package .

现在它只是一条无空间css的长线 . 我在主页上的 <style>your;great-wall-of-china-long;css;here</style> 标签中填写了css . 然后我重新分析了页面速度的见解 .

I went from 90/100 to 99/100 on mobile!!!

这违背了我（也许你）的一切 . 但它解决了这个问题 . 我只是在我的主页上使用它现在，包括压缩的css以编程方式通过PHP包含 .

YMMV（您的里程可能会有所不同）等待您的css长度 . 谷歌可能会为您提供太多的内容 . But don't assume; test!

注意事项
- 我现在只在我的主页上这样做，所以人们在我最重要的页面上得到一个快速渲染 .
- Your css won't get cached. 我不是太担心 . 第二个是他们在我的网站上的另一个页面，.css将被缓存（见注1） .
回复于 2024-05-05T05:21:19+08:00
3
一些可能有用的提示：
- 昨天我在CSS优化中遇到过这篇文章：CSS profiling for ... optimization
  关于CSS的许多有用信息以及CSS导致最多性能消耗的信息 .
- 我在Googe Chrome（Canary）开发工具的"hidden secrets"上看到了关于jQueryUK的以下演示：DevTools Can do that . 查看Time to First Paint，重绘和昂贵的CSS部分 .
- 此外，如果您使用的是像requireJS这样的加载器，您可以查看一个名为require-CSS的CSS加载器插件，它使用CSSO - 一个也进行结构优化的优化器，例如 . 合并具有相同属性的块 . 我使用了几次，它可以在不同情况下保存相当多的CSS .
关闭问题：我为你正在加载的所有小图标创建一个精灵的第二个@Enzino . 文件大小非常小，并不能保证每个图标的服务器往返 . 还要记住浏览器可以执行的并发http请求总数 . 因此，对大量小图标的请求也是"render-blocking" . 虽然一个空页与你的相比，我喜欢duckduckgo加载的例子 .
回复于 2024-05-05T05:21:19+08:00

请查看以下页面https://varvy.com/pagespeed/render-blocking-css.html . 这帮我摆脱了 "Render Blocking CSS" . 我使用以下代码删除“ Render Blocking CSS ” . 现在在谷歌页面速度洞察力我没有得到与渲染阻止CSS相关的问题 .

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

回复于 2024-05-05T05:21:19+08:00

6

我也一直在努力使用这个新的pagespeed指标 .

虽然我没有找到实用的方法让我的分数回到％100，但我发现有一些有用的东西 .

将所有css组合成一个文件有很大帮助 . 我所有的网站都恢复到％95 - ％98 .

我能想到的唯一另一件事是在第一页上内联所有必要的css（看起来大部分都是 - 至少对我的页面而言）以获得甜蜜的高分 . 虽然它可能有助于您的速度得分，但这可能会使您的页面加载速度变慢 .

回复于 2024-05-05T05:21:19+08:00
8

考虑使用包从css文件自动生成内联样式 . 一个好的是Grunt Critical或Critical css for Laravel .

回复于 2024-05-05T05:21:19+08:00

“在首映内容中消除渲染阻止CSS”

6 回答

我如何在Google Page Speed上获得99/100（适用于移动设备）

注意事项

相关问题