diff --git a/website_critical_css/README.rst b/website_critical_css/README.rst new file mode 100644 index 0000000000..93ead3cc47 --- /dev/null +++ b/website_critical_css/README.rst @@ -0,0 +1,108 @@ +==================== +Website Critical CSS +==================== + +.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github + :target: https://github.com/OCA/website/tree/13.0/website_critical_css + :alt: OCA/website +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/website-13-0/website-13-0-website_critical_css + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png + :target: https://runbot.odoo-community.org/runbot/186/13.0 + :alt: Try me on Runbot + +|badge1| |badge2| |badge3| |badge4| |badge5| + +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** + +.. contents:: + :local: + +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 +~~~~~~~~~~~~ + +* Dan Kiplangat +* Tom Blauwendraat + +Maintainers +~~~~~~~~~~~ + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +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. diff --git a/website_critical_css/__init__.py b/website_critical_css/__init__.py new file mode 100644 index 0000000000..31660d6a96 --- /dev/null +++ b/website_critical_css/__init__.py @@ -0,0 +1,3 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +from . import models diff --git a/website_critical_css/__manifest__.py b/website_critical_css/__manifest__.py new file mode 100644 index 0000000000..b7605f81d1 --- /dev/null +++ b/website_critical_css/__manifest__.py @@ -0,0 +1,14 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +{ + "name": "Website Critical CSS", + "version": "12.0.1.0.0", + "author": "Sunflower IT,Odoo Community Association (OCA)", + "website": "https://github.com/OCA/website", + "license": "AGPL-3", + "category": "Website", + "summary": "Website Critical CSS to improve FCP score", + "depends": ["website"], + "data": ["views/website_page.xml", "views/templates.xml"], + "installable": True, +} diff --git a/website_critical_css/i18n/website_critical_css.pot b/website_critical_css/i18n/website_critical_css.pot new file mode 100644 index 0000000000..d13de3128a --- /dev/null +++ b/website_critical_css/i18n/website_critical_css.pot @@ -0,0 +1,32 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * website_critical_css +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 13.0\n" +"Report-Msgid-Bugs-To: \n" +"Last-Translator: \n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#. module: website_critical_css +#. openerp-web +#: code:addons/website_critical_css/static/src/xml/page_properties.xml:0 +#: model:ir.model.fields,field_description:website_critical_css.field_website_page__critical_css +#, python-format +msgid "Critical CSS" +msgstr "" + +#. module: website_critical_css +#: model:ir.model,name:website_critical_css.model_website_page +msgid "Page" +msgstr "" + +#. module: website_critical_css +#: model:ir.model,name:website_critical_css.model_ir_qweb +msgid "Qweb" +msgstr "" diff --git a/website_critical_css/models/__init__.py b/website_critical_css/models/__init__.py new file mode 100644 index 0000000000..7a985839b7 --- /dev/null +++ b/website_critical_css/models/__init__.py @@ -0,0 +1,4 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +from . import website_page +from . import ir_qweb diff --git a/website_critical_css/models/ir_qweb.py b/website_critical_css/models/ir_qweb.py new file mode 100644 index 0000000000..d5cadec416 --- /dev/null +++ b/website_critical_css/models/ir_qweb.py @@ -0,0 +1,38 @@ +from odoo import models + +from odoo.addons.website.models.ir_qweb import AssetsBundleMultiWebsite + + +class AssetsBundleCriticalCSS(AssetsBundleMultiWebsite): + def to_node( + self, + css=True, + js=True, + debug=False, + async_load=False, + ): + response = super(AssetsBundleCriticalCSS, self).to_node( + css=css, + js=js, + debug=debug, + async_load=async_load, + ) + if not (css): + return response + new_response = [] + for item in response: + if not (item and item[0] == "link"): + new_response.append(item) + else: + attr = item[1] + attr["media"] = "print" + attr["onload"] = "this.media='all'" + new_response.append(("link", attr, None)) + return new_response + + +class IrQWeb(models.AbstractModel): + _inherit = "ir.qweb" + + def get_asset_bundle(self, xmlid, files, env=None): + return AssetsBundleCriticalCSS(xmlid, files, env=env) diff --git a/website_critical_css/models/website_page.py b/website_critical_css/models/website_page.py new file mode 100644 index 0000000000..c19d86fb43 --- /dev/null +++ b/website_critical_css/models/website_page.py @@ -0,0 +1,36 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). +import re + +from odoo import api, fields, models + + +class WebsitePage(models.Model): + _inherit = "website.page" + + critical_css = fields.Text("Critical CSS") + + @api.model + def get_page_info(self, id): + return self.browse(id).read( + [ + "id", + "name", + "url", + "website_published", + "website_indexed", + "date_publish", + "menu_ids", + "is_homepage", + "website_id", + "critical_css", + ], + ) + + def write(self, vals): + if "critical_css" in vals: + # strip wrapping spaces or style tags + css = (vals.get("critical_css") or "").strip() + lstrip = re.compile(r"^<\s*style\s*>\s*", re.IGNORECASE) + rstrip = re.compile(r"\s*<\s*style\s*>$", re.IGNORECASE) + vals["critical_css"] = re.sub(lstrip, "", re.sub(rstrip, "", css)) or None + return super(WebsitePage, self).write(vals) diff --git a/website_critical_css/readme/CONTRIBUTORS.rst b/website_critical_css/readme/CONTRIBUTORS.rst new file mode 100644 index 0000000000..cb606ac20f --- /dev/null +++ b/website_critical_css/readme/CONTRIBUTORS.rst @@ -0,0 +1,2 @@ +* Dan Kiplangat +* Tom Blauwendraat diff --git a/website_critical_css/readme/DESCRIPTION.rst b/website_critical_css/readme/DESCRIPTION.rst new file mode 100644 index 0000000000..0a36c48b8f --- /dev/null +++ b/website_critical_css/readme/DESCRIPTION.rst @@ -0,0 +1,5 @@ +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. diff --git a/website_critical_css/readme/ROADMAP.rst b/website_critical_css/readme/ROADMAP.rst new file mode 100644 index 0000000000..bb4e85f48b --- /dev/null +++ b/website_critical_css/readme/ROADMAP.rst @@ -0,0 +1,4 @@ +* 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` diff --git a/website_critical_css/readme/USAGE.rst b/website_critical_css/readme/USAGE.rst new file mode 100644 index 0000000000..ae821d42e6 --- /dev/null +++ b/website_critical_css/readme/USAGE.rst @@ -0,0 +1,18 @@ +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. diff --git a/website_critical_css/static/description/icon.png b/website_critical_css/static/description/icon.png new file mode 100644 index 0000000000..3a0328b516 Binary files /dev/null and b/website_critical_css/static/description/icon.png differ diff --git a/website_critical_css/static/description/index.html b/website_critical_css/static/description/index.html new file mode 100644 index 0000000000..455db78b3b --- /dev/null +++ b/website_critical_css/static/description/index.html @@ -0,0 +1,459 @@ + + + + + + +Website Critical CSS + + + +
+

Website Critical CSS

+ + +

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.

+
+
+
+ + diff --git a/website_critical_css/static/src/js/page_properties.js b/website_critical_css/static/src/js/page_properties.js new file mode 100644 index 0000000000..44d6ea99bb --- /dev/null +++ b/website_critical_css/static/src/js/page_properties.js @@ -0,0 +1,25 @@ +odoo.define("website_critical_css.page_properties", function(require) { + "use strict"; + + var contentMenu = require("website.contentMenu"); + var PagePropertiesDialog = contentMenu.PagePropertiesDialog; + + PagePropertiesDialog.include({ + xmlDependencies: PagePropertiesDialog.prototype.xmlDependencies.concat([ + "/website_critical_css/static/src/xml/page_properties.xml", + ]), + + save: function() { + var values = { + critical_css: this.$("#critical_css").val(), + }; + this._rpc({ + model: "website.page", + method: "write", + args: [[this.page_id], values], + }); + + return this._super.apply(this, arguments); + }, + }); +}); diff --git a/website_critical_css/static/src/xml/page_properties.xml b/website_critical_css/static/src/xml/page_properties.xml new file mode 100644 index 0000000000..c754826c30 --- /dev/null +++ b/website_critical_css/static/src/xml/page_properties.xml @@ -0,0 +1,29 @@ + + diff --git a/website_critical_css/views/templates.xml b/website_critical_css/views/templates.xml new file mode 100644 index 0000000000..607b96360f --- /dev/null +++ b/website_critical_css/views/templates.xml @@ -0,0 +1,19 @@ + +