Folks,
I’m wondering if anyone could shed some light on a small issue I encounter with PageSpeed Insights for my site. My site is primarily Source based with the addition of BWD’s Limelight lightbox and a single instance of a Flexifont stack. PageSpeed returns 100% scores on Accessibility, Best Practices and SEO - and these are what matter to me the most. However, I keep encountering an LCP error when trying to judge Performance (Desktop and Mobile). By my reading the LCP error relates to my header section which consists of single Container Plus stack showing a background image and a single SVG stack with a logo. The other Performance metrics listed seem to be okay but I can’t figure out what triggers the LCP error. I’ve tried adding both preload and fetch priority code for my header image using the RW code editor but this doesn’t seem to cure the error. Any ideas? - see attached page speed image.
I have seen this error before.
IMHO it either means that it cant find any Large Contentful Pain areas or it just a bug (or both).
So if it can’t find large areas that take time to display, then how can it work out the score for how long it takes to display the largest one. So it’s fast so the Lighthouse Catch22 is that if you can’t say exactly how fast, then it cant be called fast.
However, I wonder if it is your SVG logo which doesn’t appear to have an obvious height. <ayve try setting a maz height or convert to a png mage and try that.
Hey Gary,
Thanks for looking at this and for the suggestion. I’ll add the size setting to the svg (or convert to a png) and see how that works out.
BTW, my site incorporates a bit of what I’ve learned from buying your projects - especially 23, 27, 28, 29 and 31 - so thanks for that too.
1 Like
Thank you, Gary. Your intuition and analysis were correct. LCP bug or not, swapping out the SVG of my logo for a png version and setting the width and height attributes seems to have resolved the issue. Tangentially, it’s elevated my Source site to the vaunted 100 club in PageSpeed ;-)
Thanks again.
2 Likes
SVG’s have many advantages but they sometimes benefit from being sized correctly within the SVG code as opposed to setting a width or height or aspect ratio outside of the SVG in teh stack settings.
The other thing I have noticed a few times is that for a complex SVG such as your logo, the image can work better as a PNG in that the browser can load a space for the png, because it gets that info from the width and height information and then the png is loaded at leasure without needing to load first or calculate anything.
The SVG version needs loading and then processing before the browser can figure out how much space to allocate for it. There can be a lot of calculations required to draw such a logo.
Even worse are the SVG’s page dividers like the grass page divider where every blade of grass is a complex shape that needs calculating for the screen width and then drawn individually. A png makes so much more sense for such an SVG.
I also started to use custom Markdown bullet SVGs that when you have lots of bullet points, were better served as PNGs. The png is loaded once for the whole site whereas the SVG needs processing to draw its shape over and over for every bullet point.
Anyway, glad you got it sorted.
3 Likes
The best answer for complex custom bullets would be to put them into a font, as the glyph will be cached and reused, rather than redrawn each time (and the ideal answer would be to include this in the font used for the text, but this needs to be done with a text editor).
