[Resolved] Logo missing after installing jetppack boost & adding font-display:swap

[Liis]

Hi,

I did some performance work today and I installed jetpack boost and added to code snippets the font-display:swap code.

I only activated “Optimize CSS Loading” & “Defer Non-Essential JavaScript” features from jetpack boost, not the lazy loading feature.

After installing these steps, my sites logo has gone missing. I had it previously added from customize -> site identity -> logo, and it was not there anymore. After it went missing, I added it again from the same path and it appears, however, running jetpack boost again it disappears.

What to do? My site is veganavenue.com

[David]

Hi there,

thats very peculiar, as there is no HTML being output for the Logo. So i assume when you return to the Customizer > Site Identity – the logo field is empty ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

I actually do see it now in customizer.. but I can’t see the logo on homepage. And now I can see it on some inner pages.. peculiar

Edit I tried in completely new browser & incognito and can’t see the homepage logo, inner pages seems to be working

[David]

If you edit the Home Page, in the sidebar settings, are there any of the Disable Elements options checked ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

only “content title”

[David]

And in Appearance > Elements are there any Layout Elements ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

no, only two hooks

Edit. Let me also add that I think the inner pages’ logo is missing the height & width or something similar since I am getting very high cumulative layout shift since this change

[David]

Can you exclude images from JetPack Boost using a CSS Class? If so add: is-logo-image
It may be worth also opening a support topic with JetPack whilst we look at this.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

Mysteriously the logo is back on the homepage too now. I reran jetpack a couple of times and seems to be now there..

However, the CLS problem remained. Any quick tips how to add the height & width to the logo that it wouldn’t cause shifting?

[David]

I checked the logo – which is now showing on all pages i tested 🙂 and it has the width and height attributes.
The issue will be related to the display=swap property. You can see the font shift after load. I personally rarely ever use that setting, unless i can ensure the font a) is loading really fast and/or b) is very similar to a system font.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

I see here some of it being because of the logo: https://www.webpagetest.org/result/220717_BiDc1V_7JQ/?view=webvitals

Image 1 before shift large logo: https://pasteboard.co/DibYz8yVbs3Y.jpg
image 2 after shift small logo: https://pasteboard.co/jWjeez415bce.jpg

Essentially menu goes under the logo, then logo resizes and menu jumps back to right place on top next to logo. But you are right big part of it is because of the font swap, have to remove that. But I believe the logo is still a problem

Thank you for your outstanding help 🙂

[David]

Is it possible to exclude the logo from lazy loading ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

Im looking for a solution to exclude the logo and LCP image from lazy loading, any ideas how to achieve this? I don’t have any plugin that does lazy loading

[David]

Sorry – i should have looked closer, the logo isn’t being lazy loaded.
Can you disable the Critical CSS option in Jetpack so i can take a closer look ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liis]

yes, its disabled now

[Author]

Posts