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.
auto_awesome What this module does
AI-generated from the code · Odoo 13.0Lets you add a small block of critical CSS to each website page so the page paints faster and scores better on Google PageSpeed. The rest of the CSS is loaded later, after the first paint.
This module adds a new field called Critical CSS to every website page. You can fill it in from the page properties dialog in the website editor (a new Critical CSS tab) or from the backend form of website pages.
When a page has critical CSS and the visitor is not a website designer, Odoo puts that CSS directly in the page head so it is applied before the first paint. All other stylesheets are deferred: they are loaded with a print media trick and switched to normal once loaded, so they no longer block the first rendering.
Business rules and automatic behaviour: - The critical CSS is only injected for published website pages that actually have content in the field. - Website designers (users in the Website Designer group) keep seeing the normal, non-deferred CSS, so editing the site is not affected. - When you save the field, any surrounding <style> tags are automatically removed and empty values are stored as nothing.
The module touches the website page model (website.page) and the rendering engine (ir.qweb). It adds a tab in the website page properties dialog and a field in the backend page form.
Depends on
Models and fields (2)
- ir.qweb · extends an existing model
- website.page · extends an existing modelcritical_css (Critical CSS)
Text generated by AI (DeepSeek) from reading the Odoo 13.0 code on GitHub; it may contain mistakes, so check the code before deciding. View the code on GitHub
Availability by version
Reviewed: 2026-11-03Confirmation status: 1 confirmed, 8 with no information of 9 versions.
Sources · Odoo 13.0
Confirmed on 2026-11-03 in branch 13.0 of OCA/website.
terminal Installation and usage
OCA documentation · Odoo 13.0Usage
Source · Odoo 13.0To 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 package and generate it on your local.
To test improvement of FCP score, use for example Lighthouse, which is build into Chrome browser.
No verified information in OCA: Installation, Configuration.
Installation instructions, the distribution package, dependencies and configuration steps are not shown because they have not yet been verified in the module documentation for any version.
Data imported from GitHub: this sheet reflects the latest catalog review, not a live lookup. Always check the module documentation and staging before installing in production.