Good but counterproductive in some areas

Hi there,

Thanks for your in-depth review of your experience with Jetpack Boost.

Website optimization is complicated, and not all solutions are right for all sites, but information like this will help us improve Jetpack Boost over time.

I would be interested to learn more about which element(s) were most important to your LCP score, and how Critical CSS affected it. Would you be willing to share the URL of the site you had negative results with?

If you are uncomfortable sharing that information in a public forum, please drop me an email at [email protected], and I’ll take a look.

Hi @thingalon
Thanks for your reply.

I’d be happy to work the problem with you and help improve the plugin. Jetpack Boost is a seriously powerful plugin. It addresses 3 critical issues that other paid plugins struggle to resolve.

The site is https://www.ashbybasketball.co.uk. I will need to renable the Jetpack Boost plugin as after experimenting I deactivated it.

The scores are pretty good anyway but the area I have struggled to improve is LCP – This goes for every site I have on my server – All running the same theme and optimisations to the standard shown. A different above the fold design has helped other sites pass testing without any further optimisations but the site linked above has been tougher due to the above the fold design having a large image.

Turning on Critical CSS lowers the score. I think this is because it stops the logo being the item identified as the Largest item on the page. This is actually correct – The logo Srcset currently has an error in it which I am waiting for a fix for from the theme developer. This means after critical CSS is turned on. The LCP item becomes the main banner image.

However the act of adding critical CSS above the fold should dramatically reduce the initial page load scores and it does not have this affect.

Scores – Part way through my experiments with the plugin – I did see a jump in score to 98/100 and 99/100 on what looked like a complete test run – I then made a small change to the settings and back again and the score could not be replicated.

Overall with all settings in Jetpack Boost activated – Scores fell from 90-92/100 to high 80s/100 with worse LCP and SI. Even though the render blocking warning was totally removed.

Please let me know if you would like me to re-activate Jetpack Boost and I’ll work with you on the issue. This would be the final bit of the puzzle when optimising this theme which I use for most of my customers.

• This reply was modified 3 years, 4 months ago by Thomas Jarvis.

Hey @thomasjarvisdesign,

Apologies for my slow reply, and thank you so much for being willing to share information about your site!

I’ve taken a look, and I think I know why Critical CSS wasn’t helpful to your site.

Your LCP seems to occur after your logo image (https://www.ashbybasketball.co.uk/wp-content/uploads/2017/08/Ashby-Aztecs-basketball-logo-156×156.png) loads. According to a Lighthouse report, your logo image doesn’t have an explicit width or height set (in your HTML or CSS), so it can’t figure out the overall layout of your front page until it loads the image.

It’s a shame browsers aren’t smart enough to infer the size of the image from its filename. ??

If you are familiar with CSS, it may be worth adding some custom CSS to your site (via Appearance > Custom CSS) which specifies the width and height of your logo image, allowing browsers to finalize the page layout before the logo image finishes loading.

I’m always on the lookout for new ways that Jetpack Boost can help users out, so thank you for letting me look at your site as a case study. I hope my tip helps you get that little bit of extra performance out of your site. ??

• This reply was modified 3 years, 4 months ago by Mark (a11n).

I’ve added some critical CSS manually to deal with the lack of image dimensions, uploaded a smaller image and added preload to the logo but still seeing the logo as the LCP element even though it is not the smallest item on the page.

I think you are right. The CSS files generated by the theme are merged and minified but this means they are render blocking so it wont be able to determine the layout of the above the fold section until the main CS is loaded.

Performance scores have improved by about 2 points. Now seeing a maximum of between 91 and 94 / 100 with a slight improvement in LCP and SI.

Now seeing an improvement by excluding the grid.css file from script merging. This controls the layout and has reduced the LCP down to 2.8….Getting Close!

I am going to try manually generating some critical css when I get the chance – Just to deal with the layout issues – Rather than using a generator – To test if this resolves the problem.

Having reactivated Jetpack boost temporarily and regenerated the critical css. The LCP is now detected as the cookie popup. But the performance figures for LCP are worse by about 1 second and the Speed index is worse by about 1 second.

Looking at a couple of other sites on my server I think I have found the cause of the problem.

I think this is something to do with the fade-in animation on the main banner image. It means that the banner image is not loaded right away. So the only other image element on the page is the Logo – Which is being picked up as the LCP.

On another website where the fade-in is not present – It correctly identifies the LCP element.

Not sure I am going to be able to fix this without help from the theme developer as this will apply to all websites built with their theme.

The other site is here: https://www.burdenbasket.co.uk.

I have revised my review.