qsm-odoo
d80b8cbc28
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>
Odoo
Odoo is a suite of web based open source business apps.
The main Odoo Apps include an Open Source CRM, Website Builder, eCommerce, Warehouse Management, Project Management, Billing & Accounting, Point of Sale, Human Resources, Marketing, Manufacturing, ...
Odoo Apps can be used as stand-alone applications, but they also integrate seamlessly so you get a full-featured Open Source ERP when you install several Apps.
Getting started with Odoo
For a standard installation please follow the Setup instructions from the documentation.
To learn the software, we recommend the Odoo eLearning, or Scale-up, the business game. Developers can start with the developer tutorials