Skip to main content

Website Critical CSS to improve FCP score

Project description

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

This module can improve the Google PageSpeed score of individual website pages.

In particular, it improves the score for First Contentful Paint (FCP). It does so by allowing to configure a blob of ‘Critical CSS’ for each page, which is the only CSS that will be loaded before first paint. Any other CSS is delayed.

Table of contents

Usage

To use this module:

  • Go to Website -> Pages and select a page to optimize

  • Clear out any current contents of the ‘Critical CSS’ field

  • Find out the public facing URL of this page

  • Generate Critical CSS for this URL while selecting the right widths for Desktop and Mobile views

  • Paste the blob in the ‘Critical CSS’ field.

To generate critical CSS you have a couple of options:

  • Use a free online Critical CSS generator. At the time of writing there are: Sitelocity, Pegasaas, web.dev, Corewebvitals.io, …

  • Install the npm [critical](https://github.com/addyosmani/critical) package and generate it on your local.

To test improvement of FCP score, use for example Lighthouse, which is build into Chrome browser.

Known issues / Roadmap

  • Support automatic critical CSS generation when page layout is changed, when the critical tool is installed on server.

  • Investigate possible incompatibility with web_company_color Both are overriding the same function in ir.qweb

Bug Tracker

Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed feedback.

Do not contact contributors directly about support or help with technical issues.

Credits

Authors

  • Sunflower IT

Contributors

Maintainers

This module is maintained by the OCA.

Odoo Community Association

OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

This module is part of the OCA/website project on GitHub.

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distributions

No source distribution files available for this release.See tutorial on generating distribution archives.

Built Distribution

File details

Details for the file odoo13_addon_website_critical_css-13.0.2.0.1-py3-none-any.whl.

File metadata

File hashes

Hashes for odoo13_addon_website_critical_css-13.0.2.0.1-py3-none-any.whl
Algorithm Hash digest
SHA256 baf8d5a56174209a9c5b4d706cb3f1cf138f65f7370205b9137c57b88170b14d
MD5 444ed1abaa285e18e428aea3e8d6bcf6
BLAKE2b-256 b11bceba94dbf13a0f4f11f0d5c953c8e9c1b8960c85a6e6a865de57f19a1b08

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page