-
Posts
-
Hi Guys,
Having been reviewing my domains against Google’s new Web Vitals Tools. It appears that the logo uploaded via Enfold’s theme panel is excluded from the following by default:
Jetpack Lazy Load
Jetpack Free CDN (Image optimisation)
WP-Optimise (Caching plugin)
Also WP Super Cache which I no longer recommend.Is it possible to add the necessary classes or make is so caching and lazy load plugins can ‘see’ the logo? Most plugins currently ignore the logo and Google always suggests it as a way to improve performance.
Hey Thomas,
Thank you for the inquiry.
Do you have a reference from Google or a documentation that says it is better to lazy load the logo? We are not really sure if that is such a good idea because you want your logo to be immediately visible when the page load. And delaying it doesn’t really make that much impact in performance because of its file size.
If you really need to implement it, this documentation should help.
// https://jetpack.com/support/lazy-images/
You have to add the data-lazy-src attribute to the logo tag.
Best regards,
IsmaelHi Ismael,
Probably not explained this very well and you raise a very good point and I can understand the logic behind that – It makes no sense to lazy load it and actually using a CDN for this component is a little daft. I was just highlighting the plugins that currently cannot ‘optimise’ the logo. It looks like the caching engine can see the logo afterall.
It would be great if it was not ignored by the CDN – But I imagine changing the settings for this will also mean Lazy load picks it up by default which is silly and a bad idea.
GTMetrix counts it as an item that should be loaded from CDN. So it makes a small difference to the performance score. But you are right, there isn’t really much difference assuming the image is compressed properly prior to upload.
Web Vitals
After making some changes to the size of the logo (pixel size) to match the recommended size in the Web Vitals results, it is no longer an issue in web vitals. Web Vitals recommended a much larger sized image than the actual required size, so I just matched it. Actual size is 88px tall, Vitals asked for 240px tall for some reason.Sorry to have wasted your time on this and thank you for your response. Just going through the process of optimising for Web Vitals. Currently getting 79/100 for performance provided the server response time is at its best. Other enfold sites are scoring high 80s with a different above the fold design, but the latest round of improvements is being tested on my company site which I expect will allow most designs to score 90+
The Largest Contentful Paint LCP is the lowest score.
I have a full screen ALB color section with full screen background image which is the main cause for the LCP being high.
I have also raised a second Forum post relating to CSS and JS merging which also adds weight to LCP.Happy for this post to be deleted if necessary.
Hi,
Actual size is 88px tall, Vitals asked for 240px tall for some reason.
This is probably for retina devices or for screens with higher DPI. To display sharp images, these devices require the images to be larger than their calculated size in the page.
For the LCP, you might have to load the background image asynchronously or put a placeholder in the slider. Unfortunately, this is not available in the theme by default, so it will require custom modifications in the sliders.
Thank you for your patience.
Best regards,
Ismael
- You must be logged in to reply to this topic.