问题标签 [critical-css]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

30 问题
Newest
Active
Bountied
318
Unanswered
0 投票
0 回答
1645 浏览

pagespeed - 如何最小化初始导航的关键请求深度？

我正在处理 woff2 文件类型的类似问题并成功完成。

问题是，woff2 文件存在于服务器中，并且能够在以下位置引用它：

<link rel="preload" href="fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>.

我从 PageSpeed Insights 得到的只是下图的内容：

在此处输入图像描述

我该如何解决这个初始路径？

0 投票
0 回答
1123 浏览

reactjs - 使用 Create React App 时如何隔离关键 CSS

由于无法编辑 webpack 配置文件，解决渲染阻塞 CSS 并仅使用 Create React App 加载关键 CSS 的最佳方法是什么？

0 投票
1 回答
331 浏览

css - 当第一个页面视图是最重要的时候，只内联关键的 CSS，或者整个 15kb 的 CSS？

我想知道将我的 CSS 分成两部分是否是个好主意，一个内联关键部分和一个延迟外部部分。

我的整个 CSS 是 15kb（缩小）。在线“Critical Path CSS Generator”分析器给我的关键 CSS 是 1kb，但是当我检查我的代码时，我真的相信需要 5kb 的 CSS 才能在 1920x1080 的屏幕上渲染所有折叠内容。所以，我首先关心的是，当需要三分之一的 CSS 作为关键 CSS 时，是否值得拆分 CSS，或者我应该内联整个 CSS，因为它不是那么大（15kb）？

另一方面，我在这里关注的是我们整个网站的一部分，它鼓励用户采取行动，而行动是转到网站的另一部分，那里有另一个 CMS。所以，对于我说的这一部分，每个用户的页面浏览量并没有那么高：大约 70% 的人在这里只打开一个页面，而 92% 的人打开不到 4 个页面。因此，我猜在我们的情况下，拥有一个缓存的外部 CSS 可能不太重要。最后，我感觉第一页浏览量是最重要的；如果我们可以稍微提高它的速度，即使它降低了下一页的速度，那也是值得的。但是，我不知道当使用 HTTP/2 时，使用内联 CSS 而不是外部 CSS 是否真的会影响速度。

那么，你有什么建议？拆分我的 CSS 并仅内联关键部分更好，还是简单地内联整个文件？谢谢您的帮助。

0 投票
0 回答
688 浏览

javascript - 从服务器端渲染的 React 应用程序中删除渲染阻塞样式

我使用 chrome Lighthouse 工具对我的 React 应用程序进行了审核，它检测到我的应用程序有一些渲染阻塞 css 文件。我通过运行覆盖进行了进一步调查，发现我的应用程序有大约 50% 的未使用代码（CSS 和 JS）。

我尝试了各种插件，例如：Critical、Penthouse、webpack-critical、webpack-plugin-critical、html-critical-webpack-plugin react-snap，以从应用程序中删除关键 css，但没有一个有效，主要是因为所有插件这应该有助于期望应用程序使用 HTMLExtractPlugin。但是，这不适用于我，因为我的整个应用程序都呈现在服务器上并提供给客户端。

这是我服务器上的渲染功能：

HTML 组件

Webpack 配置

有没有办法在服务器端渲染的 React 应用程序上删除渲染阻塞样式？

谢谢你。

0 投票
1 回答
154 浏览

css - 关键/延迟 CSS 实现

Google PageSpeed Audits 建议将首屏内容的关键 CSS 添加到 中的<style>标签中<head>，并将其余部分推迟到内容加载后。

虽然我不同意这种做法，但实施它的正确方法是什么？

我对使用它有一些保留意见：

  • FOUC（单个元素或整个页面使用visibility: hidden）
  • 首屏内容过多，无法使用最少的内联 CSS 进行样式设置，以防止看到 FOUC
  • 在到达内容本身之前，额外的页面加载权重
  • 内联 CSS 没有缓存，这意味着每次页面加载时都必须重新下载

我不使用 CSS 框架，所以无论如何也没有臃肿的 CSS 可供下载。

0 投票
1 回答
622 浏览

css - Gulp 和关键 CSS - TypeError：无法读取未定义的属性“内容类型”

我在 Gulp 中运行我的构建，并在生成关键 css 文件时在我的终端中不断收到以下错误。

  1. 错误是什么意思？
  2. 如何解决错误？
  3. 如果这是我的 gulp 文件中的语法问题 - 是否有办法在运行命令时或使用验证器时在终端中找到该行并引用该问题？

下面是关键 css 的 gulp 任务以及处理它引用的 css 和 sass 文件的任务。

0 投票
1 回答
2211 浏览

reactjs - 为 nextjs 项目设置关键 CSS 并删除不需要的 CSS 的正确方法

我有一个 NextJS 项目设置-> https://github.com/stefanre1/nextjs-setup

我想知道从 Tailwindcss 中删除不需要的 css 并向每个页面添加关键 css 的正确方法是什么。

我曾尝试关注一些博客以达到同样的效果，但没有成功。

显然我已经删除了我尝试过的东西，因为它不起作用。现在在存储库中保留最少的代码。

任何帮助或建议都会有所帮助。

我已经尝试从这里添加到头部的解决方案，但它按预期添加了所有 CSS。我也试过这个

0 投票
2 回答
1095 浏览

wordpress - 如何将 Ajax Gravity Form 的内联 jQuery 脚本移动到页脚？

为了将延迟添加到 jquery 链接，我想将 Ajax Gravity Form 的内联 jQuery 脚本移动到页脚。

我该怎么做？

在此处输入图像描述

0 投票
0 回答
892 浏览

webpack - Webpack html-critical-webpack-plugin

在添加插件之前，一切正常，没有任何错误（优化器、最小化器等）。然后，我安装了 html-critical-webpack-plugin 以便在 html 中内联关键 css 并延迟非关键 css，终端中也没有错误。但是，输出是一个完全独立的 html 文件，仅包含关键/非关键 css，没有任何 index.js 导入。

有谁知道如何将此插件与其余设置结合使用？

webpack.prod.js

index.js

0 投票
0 回答
227 浏览

javascript - 获得“首屏”/渲染“首屏”的关键元素的高性能方法？

简短的问题

我如何（尽可能可靠地）计算“首屏”内容在视觉上完整的时间，包括应用外部 CSS 和字体以及加载的任何图像。

完整问题

抱歉，这个问题有很多内容，我只是想表明我已经解决了这个问题以及我所处的位置，所以它最终没有成为“我该怎么做”类型的问题并关闭 insta！

我正在尝试确定渲染“首屏”内容所需的所有资源是否已完全下载到客户端浏览器中。

这是纯粹使用浏览器 API（即不使用屏幕截图时间线）模拟SpeedIndex的更大目标的一部分。

我需要收集什么

  1. 出现在页面首屏上方的所有元素。
  2. 确保已加载所有相关资产。
  3. 此外，这些数据正在发送到服务器进行分析，因此我想尽可能地尝试将其保留在一个请求中。

我无法克服的挑战

  1. 必须运行多次获取首屏元素的函数
  2. 确保所有关键资产实际上都加载在非常慢的连接上。
  3. 如果网络流量很高，请确保该功能确实运行，如果网络上从来没有一个安静的 2 秒窗口（可能是由于每秒轮询服务器的老式聊天），它永远不会触发。

首先，这不一定是完美的，它是一个近似值，但我越准确越好！

我目前这样做的方式是使用PerformanceObserver在下载所有资源时列出它们。

第二个我得到一个 2 秒的窗口，没有完成任何请求，我假设关键的 CSS 已经下载并开始查看页面上的图像。

getRects我在函数中使用页面上的背景图像获取所有图像和元素的尺寸，然后使用等getBoundingRect()计算它们是否出现在折叠上方。window.innerHeight

这些是下载时要检查的候选对象（以及之前的资源列表等）

这一点很好（尽管任何缩小搜索范围的提示，所以我不会遍历所有内容都会很棒），但我的问题出在加载缓慢的网站上。如果请求之间的间隔超过 2 秒（这可能发生在连接特别慢或服务器距离用户很远的情况下），那么我将无法获得完整的数据。

我的解决方法是监视进一步的网络请求（再次等待请求之间的 2 秒延迟）并重新运行该函数以收集上述折叠内容。如果站点在滚动时使用延迟加载，这显然不能很好地工作，因为请求可以在整个页面生命周期中不断触发。

由于在一个非常重的页面上收集元素的维度可能会占用大量 CPU，再加上需要将此数据发送到服务器进行分析，因此我试图找到一种更可靠的方法来确保加载所有关键内容。或者一种只开火getRect一次但确保所有初始加载完成的方法。

假设如果有效负载足够小（例如小于 1kb），任何数据操作都可以稍后在服务器上完成

我考虑过的事情

  1. 寻找任何<links>等<scripts>并检查它们是否已加载。问题来自于动态添加的链接以及外部资源（即链接在另一个样式表中的样式表）。这可能会更强大，但会变得非常复杂。
  2. 设置检查之间的时间（我正在等待的安静时间）更长。这显然会使流量大的网站问题变得更糟，因为“安静时间”可能永远不会发生。
  3. 用于MutationObserver监视页面并再次等待安静时间。但是，据我所知，如果页面具有任何交互性，这会更频繁地被触发？
  4. 我知道我的方法会过度报告正确内联其 CSS 的网站，这不是问题。

作为解决这个难题的一种方式，我是否走在正确的轨道上，或者是否有一些我可以根据window.performance数据（或类似的 API）使用的简单公式让我说“所有折叠元素都已加载和渲染”。

我希望这很清楚，但任何问题都只是问，因为我知道这个问题有很多可以简单地回答“我如何检查所有关键资源是否已加载”。


12345678910