Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Allow to pass width/height attributes to the logo component
See original GitHub issueIs your feature request related to a problem? Please describe.
To avoid CLS (https://web.dev/i18n/en/cls/) the Volto logo component should allow passing a width and height attribute.
Describe the solution you’d like
- Add a width and height option to the Volto logo component (https://github.com/plone/volto/blob/master/src/components/theme/Logo/Logo.jsx) to be passed as an option for optimizations
- Add loading=eager attribute to make sure the logo is always loaded at first (most likely the case anyways)
- Add decoding=sync attribute to make sure the image is decoded synchronously (most likely the case anyways)
- Add width/height/loading/decoding options to Icon component as well: https://github.com/plone/volto/blob/master/src/components/theme/Icon/Icon.jsx
- Preload logo as part of the header to further optimize the loading process:
<head>
...
<link rel="preload" as="image" href="https://.../logo.svg" />
</head
Issue Analytics
- State:
- Created a year ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Setting Height And Width On Images Is Important Again
To prevent layout shifts and improve performance scores, we need to always set width and height attributes on our images.
Read more >Apply width and height attributes to allow responsive image ...
Assuming the images are responsive with img { width: 100%; height: auto; } set in the CSS, the images should take the width...
Read more >How to Add width/height to Images in WordPress - Webgaku
By adding the width and height attributes to the img element in HTML, you can specify the display size of the image. The...
Read more >Customizing the Logo Component to Take In a Custom Size ...
So first thing I want to do is in render say constant size is equal to an object and then I want to...
Read more >Use explicit width and height on image elements - GTmetrix
These height and/or width attributes are not declared anywhere i.e., in the HTML, in the CSS, specific stylesheets, etc. The height and width...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@davisagli @tiberiuichim I’d propose splitting this up in two tasks. This ticket is more about a solution for integrators that want to customize the Volto Header.jsx to optimize. If we have a solution that works well, we can move on and think about how to find a solution for computing the width/height automatically. Maybe we want to combine this with an option to upload a logo TTW.
FYI: I added another optimization that I could imagine to include in Volto core, which is preloading the logo component in the header to optimize the loading process. Though, we could also move that into a separate ticket…
@davisagli as per today we do not stream the response. Most probably in the future we’ll do that and take full advantage of React 18 data fetching SSR streaming architecture.