Product Design, Manufacturing & Innovation Resources
家 » 在线工具 » 关键路径 CSS 生成器

关键路径 CSS 生成器

This will analyse any URL given and concatenate the CSS needed to display the “above the folder” HTML rendering, i.e. the “关键 CSS” or “关键 CSS 路径“。

一个不错的工具,正在运行 工作 没有它就很难做到。而且它直接返回一个已经压缩过的 CSS 版本。

You 必须 then incorporate this code into the head of your page(s), either manually, or with a dedicated plugin, or any cache or optimizer plugin.

这样就可以更快地渲染初始可见区域的顶部部分,而无需加载外部 CSS 文件。

  • 这会提升你的谷歌指标吗?很可能
  • 它会提升一次性访客的体验吗?很可能
  • 它能提升回头客的体验吗?不能(因为它会增加每个添加此 CSS 的页面的大小,而不是只将其添加到只加载一次的外部文件中)。

提示1: 清除服务器或插件缓存后,请立即清除所有服务器或插件缓存。

技巧二: if going into that optimization route, in order to have the most suited CSS, it worth to make this trick once per every notably different group of page you have in your site, each one using likely a very different CSS (ex: forum pages, normal posts, custom post types …).

技巧三: 由于此 CSS 纯粹是静态代码(有意为之),因此每次对页面 CSS 进行重大更改时,都应该更新它。

学科: 网站性能优化、网站开发、搜索引擎优化、WordPress开发。
WP Rocket 是 Penthouse 的免费替代品。
关键路径 CSS 生成器与 Penthouse 和 WP Rocket 的比较
关键路径 CSS 生成器顶层公寓WP Rocket
形式和用途: 这是一个来自 Core Web Vitals 的在线 CSS 生成器。您只需输入网址,设置移动端和桌面端的视口尺寸,即可获得关键的 CSS 代码,并将其粘贴到标题下方 `` 标签内的样式标签中。它还提供了三种延迟加载原始样式表的方法。形式和用途: Penthouse 是一个 Node 库,被誉为最初的关键路径 CSS 生成器。你可以通过 URL 和 CSS 字符串或文件调用它,它会返回关键路径的 CSS。可选参数包括视口宽度和高度(默认为 1300 x 900)、强制包含、强制排除以及超时时间。形式和用途: 这是一个付费的 WordPress 缓存插件。“移除未使用的 CSS”选项在“文件优化”和“优化 CSS 交付”中启用,插件会自动插入生成的 CSS。
CSS 的生成方式: 该工具在自定义 Node 平台上的 Chrome 浏览器中加载页面,检查多个视口,找到渲染可见区域的样式表部分,然后清理并压缩它们。CSS 的生成方式: 它通过 Puppeteer 驱动无头 Chromium,多个作业可以共享一个浏览器实例。CSS 的生成方式: WP Rocket 会将页面 URL 发送到外部 API,该 API 会访问页面并生成所需的 CSS。生成结果以 gzip 压缩文件的形式存储,并插入到 id 为 wpr-usedcss 的 style 元素中,位于 title 标签之后。该 CSS 每 30 天重新生成一次。
自动化和维护: 输出结果需要手动粘贴。该工具目前处于测试阶段,如果失败,页面建议 5 分钟后重试。自动化和维护: 您可以自己编写脚本,例如在构建步骤中,并将结果写入文件。自动化和维护: 当访问未缓存的页面时,缓存生成过程开始。失败的尝试最多会重试 5 次,每次重试间隔时间都会增加。
要求: 使用 npm 或 yarn 部署 Node.js,并通过 Puppeteer 实现无头 Chrome 浏览器。在 Linux 系统上,可能需要安装一些系统库,例如 libnss3。要求: 需要公开访问的网站、正常运行的 WP-Cron 以及允许插件机器人用户代理的服务器或防火墙。该插件无法在启用 .htaccess 身份验证的情况下运行,并且必须禁用 Cloudflare 的机器人防护模式。
许可证和费用: 该页面称其为免费在线工具,并且没有列出使用次数限制。许可证和费用: 该代码采用 MIT 许可证。许可证和费用: 付费方案按年计费,费用根据站点数量(1个、3个或50个)而定。14天试用期结束后将自动扣款,除非您取消订阅。

涵盖的主题: 关键路径、CSS 生成器、URL 分析、压缩 CSS、首屏、HTML 渲染、优化、性能指标、用户体验、服务器缓存、插件集成、静态代码、Web 性能、页面渲染、外部 CSS、网站优化、响应式设计 ISO/IEC 25010、ISO/IEC 9126、ISO 9241、ISO/IEC 27001 和 ISO 8601。

更多的 网络与网站 tools

请推荐您最喜欢的在线工具:

您是否知道有比上面列出的网站更好、更互补或可以替代的网站?

> 在此处提出建议 <

第十年 周年纪念日

只有注册会员才能免费获取完整尺寸的图片和下载内容。

> 登录 <