Archived topic
Logo missing after installing jetppack boost & adding font-display:swap
45 replies · Started by Liis on July 17, 2022
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
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 ?
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
If you edit the Home Page, in the sidebar settings, are there any of the Disable Elements options checked ?
only "content title"
And in Appearance > Elements are there any Layout Elements ?
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
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.
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?
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.
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 :)
Is it possible to exclude the logo from lazy loading ?
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
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 ?
yes, its disabled now
