From d80b8cbc28b6e9d16608f9ecfcf4b360d0c792c7 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 23 Sep 2022 10:06:37 +0000
Subject: [PATCH] [IMP] web, website: reserve some space for the navbar logo

Setting width *and* height attributes allows to reserve some space to
avoid layout shift during page loading. Of course, CSS rules set the
height the user chose, while the width is set to 'auto'. But while the
image is loading, it is best to already reserve some width to reduce
layout shift (like making the menu move or even re-render itself into a
"+" menu).

The chosen values for the space reservation are the ones of the default
logo and theme, but it does not really matter as long as they are
coherent. While the image is being loaded, the chosen user height is
still applied and the 'auto' width rule induces a width that respects
the aspect ratio set by the width and height attributes. That could be a
problem if the real logo has a larger height than width, in which case
the layout shift would be increased because of the arbitrary values set
as width and height, but in most cases, this should reduce it.

This also allows to gain some page speed scoring.

Examples:

=# Logo 200 x 100, height set to 50

Before this commit
- while loading: width = 0, height = 50
- once loaded: width = 200 / 100 * 50 = 100, height = 50
-> layout shift of 100 - 0 = 100

After this commit
- while loading: width = 95 / 40 * 50 = 118.75, height = 50
- once loaded: width = 200 / 100 * 50 = 100, height = 50
-> layout shift of 100 - 118.75 = -18.75

=> Shift of 18.75px to the left, way better than shift of 100px to the
   right

=# Logo 100 x 100, height set to 50

Before this commit
- while loading: width = 0, height = 50
- once loaded: width = 100 / 100 * 50 = 50, height = 50
-> layout shift of 50 - 0 = 50

After this commit
- while loading: width = 95 / 40 * 50 = 118.75, height = 50
- once loaded: width = 100 / 100 * 50 = 50, height = 50
-> layout shift of 50 - 118.75 = -68.75

=> Shift of 68.75px to the left, kinda the same as a shift of 50px to
   the right.

=# Logo 100 x 200, height set to 50

Before this commit
- while loading: width = 0, height = 50
- once loaded: width = 100 / 200 * 50 = 25, height = 50
-> layout shift of 25 - 0 = 25

After this commit
- while loading: width = 95 / 40 * 50 = 118.75, height = 50
- once loaded: width = 100 / 200 * 50 = 25, height = 50
-> layout shift of 25 - 118.75 = -93.75

=> Shift of 93.75px to the left, worse than shift of 25px to the right
   but the case of having a 'portrait' logo is considered less common
   than having a 'landscape' logo. Ideally, we should choose the
   arbitrary values related to the most common aspect ratio.

closes odoo/odoo#101149

X-original-commit: 73786c5c45202914e02325c19a2afaa47d31c341
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 addons/web/models/ir_qweb_fields.py        |  2 ++
 addons/website/views/website_templates.xml | 22 +++++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/addons/web/models/ir_qweb_fields.py b/addons/web/models/ir_qweb_fields.py
index f3625e9f967..84df197c439 100644
--- a/addons/web/models/ir_qweb_fields.py
+++ b/addons/web/models/ir_qweb_fields.py
@@ -89,6 +89,8 @@ class Image(models.AbstractModel):
         atts["itemprop"] = itemprop
         atts["class"] = classes
         atts["style"] = options.get('style')
+        atts["width"] = options.get('width')
+        atts["height"] = options.get('height')
         atts["alt"] = alt
         atts["data-zoom"] = src_zoom and u'1' or None
         atts["data-zoom-image"] = src_zoom
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 75ba856347e..3b62982d805 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1347,7 +1347,27 @@
 <template id="option_header_brand_logo" inherit_id="website.placeholder_header_brand" name="Header Brand Logo" active="True">
     <xpath expr="//*[@id='o_fake_navbar_brand']" position="replace">
         <a href="/" t-attf-class="navbar-brand logo #{_link_class}">
-            <span t-field="website.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name"/>
+            <!--
+            Note: setting width *and* height attributes allows to reserve some
+            space to avoid layout shift during page loading. Of course, CSS
+            rules set the height the user chose, while the width is set to
+            'auto'. But while the image is loading, it is best to already
+            reserve some width to reduce layout shift (like making the menu move
+            or even re-render itself into a "+" menu).
+
+            The chosen values for the space reservation are the ones of the
+            default logo and theme, but it does not really matter as long as
+            they are coherent. While the image is being loaded, the chosen user
+            height is still applied and the 'auto' width rule induces a width
+            that respects the aspect ratio set by the width and height
+            attributes. That could be a problem if the real logo has a larger
+            height than width, in which case the layout shift would be increased
+            because of the arbitrary values set as width and height, but in most
+            cases, this should reduce it.
+
+            This also allows to gain some page speed scoring.
+            -->
+            <span t-field="website.logo" t-options="{'widget': 'image', 'width': 95, 'height': 40}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name"/>
         </a>
     </xpath>
 </template>