Author: |
Sunflower IT,Odoo Community Association (OCA) |
License: |
AGPL-3 |
Branch: |
13.0 |
Repository: |
acsone/website |
Dependencies: |
website |
Languages: |
HTML (369, 57.1%),
JavaScript (21, 3.3%),
Python (109, 16.9%),
XML (68, 10.5%),
and
reStructuredText (79, 12.2%) |
Other repositories: |
Change2improve/website,
OCA/website,
Rad0van/website,
aurestic/website,
brain-tec/website,
and
kmee/website |
<h1 class="title">Website Critical CSS</h1>
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/website/tree/13.0/website_critical_css"><img alt="OCA/website" src="https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/website-13-0/website-13-0-website_critical_css"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/186/13.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<p>This module can improve the Google PageSpeed score of individual website pages.</p>
<p>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.</p>
<p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents">
<ul class="simple">
<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
<li><a class="reference internal" href="#known-issues-roadmap" id="id2">Known issues / Roadmap</a></li>
<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
<li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
</ul>
</li>
</ul>
</div>
<a name="usage"></a>
<h2><a class="toc-backref" href="#id1">Usage</a></h2>
<p>To use this module:</p>
<blockquote>
<ul class="simple">
<li>Go to Website -> Pages and select a page to optimize</li>
<li>Clear out any current contents of the 'Critical CSS' field</li>
<li>Find out the public facing URL of this page</li>
<li>Generate Critical CSS for this URL while selecting the right widths for
Desktop and Mobile views</li>
<li>Paste the blob in the 'Critical CSS' field.</li>
</ul>
</blockquote>
<p>To generate critical CSS you have a couple of options:</p>
<blockquote>
<ul class="simple">
<li>Use a free online Critical CSS generator. At the time of writing
there are: Sitelocity, Pegasaas, web.dev, Corewebvitals.io, ...</li>
<li>Install the npm [critical](<a class="reference external" href="https://github.com/addyosmani/critical">https://github.com/addyosmani/critical</a>)
package and generate it on your local.</li>
</ul>
</blockquote>
<p>To test improvement of FCP score, use for example Lighthouse, which is
build into Chrome browser.</p>
<a name="known-issues-roadmap"></a>
<h2><a class="toc-backref" href="#id2">Known issues / Roadmap</a></h2>
<ul class="simple">
<li>Support automatic critical CSS generation when page layout is
changed, when the <cite>critical</cite> tool is installed on server.</li>
<li>Investigate possible incompatibility with <cite>web_company_color</cite>
Both are overriding the same function in <cite>ir.qweb</cite></li>
</ul>
<a name="bug-tracker"></a>
<h2><a class="toc-backref" href="#id3">Bug Tracker</a></h2>
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/website/issues">GitHub Issues</a>.
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
<a class="reference external" href="https://github.com/OCA/website/issues/new?body=module:%20website_critical_css%0Aversion:%2013.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
<p>Do not contact contributors directly about support or help with technical issues.</p>
<a name="credits"></a>
<h2><a class="toc-backref" href="#id4">Credits</a></h2>
<a name="authors"></a>
<h3><a class="toc-backref" href="#id5">Authors</a></h3>
<ul class="simple">
<li>Sunflower IT</li>
</ul>
<a name="contributors"></a>
<h3><a class="toc-backref" href="#id6">Contributors</a></h3>
<ul class="simple">
<li>Dan Kiplangat <<a class="reference external" href="mailto:dan@sunflowerweb.nl">dan@sunflowerweb.nl</a>></li>
<li>Tom Blauwendraat <<a class="reference external" href="mailto:tom@sunflowerweb.nl">tom@sunflowerweb.nl</a>></li>
</ul>
<a name="maintainers"></a>
<h3><a class="toc-backref" href="#id7">Maintainers</a></h3>
<p>This module is maintained by the OCA.</p>
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
<p>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.</p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/website/tree/13.0/website_critical_css">OCA/website</a> project on GitHub.</p>
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>