Whilst doing some of our regular performance checks across our client sites, we had spotted some Core Web Vitals scores slipping below our normally-high levels for one of these, in particular on Product Listing Pages (PLP).

Ever since becoming fully invested in Hyva we have regularly been able to maintain 90+ performance scores across all of our sites - and if the client has enough resources to brim their SEO and marketing metrics - even hitting the mythical fireworks!

The client in question was built on a well-optimised Hyva theme and had an immediate positive uplift in their metrics as a result of this (as always!). After a few months of small bug fixes and functionality requests from the client everything was still running well and using the site as a "human buyer" was a great experience - but Google Lighthouse was starting to feel different on some areas of the site...

As well as the glaring performance score drop (though still higher than any Luma-based shops), there had clearly been some issues introduced to knock down the SEO and Best Practices scores. We started to dig down to find out what the big hit was from. Anyone trying to balance CWV scores with a useable site with a good interface knows it can be near impossible to get perfect scores without adversely affecting the human-interactions.

The single biggest factor in the performance drop in this case was Content Layout Shift, with the analyzer tool singling out the "column.main" element as the offender, this is a core file and contains all the product items and images so shouldn't normally appear here. It was difficult to spot any actual issues as a user, even when throttling the site speed so we could effectively watch it load in slow motion.

However, using the timeline tool in Google Lighthouse we could see the filters were being moved to the top of the page for mobile. The filters were rendered by Smile Elasticsuite module, rather than the core Magento/Hyva options. 

Delving into a template file within this module:

    Hyva_SmileElasticsuite/templates/catalog/layer/view.phtml    

We were able to find the culprit - a script that would run when the page loaded to check the screen size, and if it was a "mobile size" - shift the filters above the product list rather than it rendering after it (no good for mobile). The idea is fair enough but the execution was causing the problematic Content Layout Shift.

The Fix

Rather frustratingly, the desired effect of this script this could be achieved exclusively with Tailwind CSS classes, without the need for a disruptive piece of Javascript. We implemented this fix by copying the module file to the clients theme and the CLS complaint from Google was immediately rectified!

Whilst on the project we also fixed a couple of other small advisories that had appeared in Lighthouse - one caused by the Cookie Notice and another by the clients Paypal finance banner. The former was a non-descriptive link anchor, and the PayPal banner issue was resolved by deferring its display until user interaction - unnoticeable to the user but Google loves it! We have used this method for a long time but it's also recommended by the Hyva docs too.

The Result