[A la espera de la opinión de los usuarios] Content Template styles injected via JavaScript (base64) cause severe CLS

[Autor]

Mensajes

[chrisC-34]

Hi,

I'm seeing a significant Core Web Vitals problem on my site (www.classicalsource.com, Toolset Blocks 1.6.21) caused by the way Content Template styles are delivered to the front end.

The problem:

On single posts rendered through Content Templates (custom post types "cd" and "prom"), the block styles are not output as CSS. Instead, each page contains hidden <div class="tces-js-style-encoded"> elements holding base64-encoded CSS, which toolsetCommonEs.styleToHead() decodes and appends to the head at runtime. Because this happens after first paint, the page initially renders unstyled — container padding, borders and the star-rating block then snap into place and shove the layout.

Measured impact:

Google PageSpeed Insights (Lighthouse 13.4.1) on a CD review page: desktop Cumulative Layout Shift 0.776, performance score 76. On fast connections the shift is clearly visible to visitors. Mobile is less affected only because slower loading masks the timing.

What I've tried:

Re-saving the Content Templates does not change the output — the base64 blobs are regenerated in the same format. Notably, my Toolset WordPress Archive on the same site outputs its styles correctly as a static <style id="toolset-blocks-styling-fse"> block in the page, and those pages have no CLS problem — so the plugin clearly has a static output path; it just isn't used for Content Templates on single posts.

Workaround in place:

I have duplicated the decoded CSS into the theme Customiser's Additional CSS so pages render styled before the script runs. This works (CLS now 0.071, score 99) but it means every future template styling change has to be maintained in two places.

Request:

Please output Content Template styles as static CSS (as the archive rendering already does), or provide a supported setting/filter to disable the JavaScript injection. Happy to provide temporary admin access or any further diagnostics.

Example page: enlace oculto

Regards,

Chris Caspell

[Minesh]

Hello. Thank you for contacting the Toolset support.

Thank you for sharing your content and I've escalated the issue in front of our Devs and they will try to debug further and see if they can imrpove the loading the custom CSS added to content templates.

I'll get in touch with you as soon as I've any update on this issue. Please note that there is no ETA on it but I will keep you posted once I have any update on it.

[Minesh]

Can you please share couple of problem URLs where I can see the issue as well as please share duplicator copy of your site.

More info:
- https://toolset.com/faq/provide-supporters-copy-site/

If you do not know how to create duplicator package or somehow you have issues creating duplicator packagte, please share admin access details and problem URLs where I can see the issue.

I will login to admin and create duplicator package on your behalf.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.