跳转到主要内容

网站关键CSS以改进FCP得分

项目描述

Beta License: AGPL-3 OCA/website Translate me on Weblate Try me on Runbot

此模块可以提高单个网站页面的Google PageSpeed得分。

特别是,它改进了首次内容填充 (FCP) 的得分。它通过为每个页面配置一个“关键CSS”块来实现,这是在首次绘制之前加载的唯一CSS。其他任何CSS都将延迟。

目录

用法

要使用此模块

  • 转到网站 -> 页面并选择要优化的页面

  • 清除“关键CSS”字段中的任何当前内容

  • 找出此页面的公开URL

  • 为桌面和移动视图选择正确的宽度,为该URL生成关键CSS

  • 将块粘贴到“关键CSS”字段中。

要生成关键CSS,您有几个选择

  • 使用免费的在线关键CSS生成器。在撰写本文时,有:Sitelocity、Pegasaas、web.dev、Corewebvitals.io、……

  • 安装npm [critical](https://github.com/addyosmani/critical)包并在本地生成。

要测试FCP得分的改进,请使用例如内置在Chrome浏览器中的Lighthouse。

已知问题/路线图

  • 当页面布局更改时,当服务器上安装了critical工具时,支持自动生成关键CSS。

  • 调查与web_company_color的可能不兼容性。这两个都覆盖了ir.qweb中的同一功能。

错误跟踪器

错误在GitHub Issues上跟踪。如果在那里发现问题,请检查您的错误是否已被报告。如果您是第一个发现的,请通过提供详细且受欢迎的反馈来帮助我们解决这个问题。

请勿直接联系贡献者以获取支持或技术问题帮助。

鸣谢

作者

  • 向日葵IT

贡献者

维护者

本模块由OCA维护。

Odoo Community Association

OCA,即Odoo社区协会,是一个非营利组织,其使命是支持Odoo功能的协作开发并促进其广泛使用。

本模块是GitHub上OCA/website项目的一部分。

欢迎您贡献。要了解如何贡献,请访问https://odoo-community.org/page/Contribute

项目详情


下载文件

下载适用于您平台的文件。如果您不确定选择哪个,请了解有关安装包的更多信息。

源代码分发

此版本没有可用的源代码分发文件。请参阅生成分发存档的教程

构建分发

由以下机构支持