Investigation into the cause of LiteSpeed Cache’s inability to generate UCSS and countermeasures

glacier, ice, winter, snow, mountain, thaw, water, landscape, nature

The LiteSpeed Cache plugin usage for the day was restored at 14:00 JST.Much of it was used to generate VPI, but a little remained, so we investigated the cause of UCSS not being generated.The cause was an error in the CSS during optimization.

Page Language Swicher

UCSS read error in LiteSpeed Cache

In my March 2 article, I wrote about an error that UCSS was not loading.

The UCSS generation today, March 3, was still not loaded.

You can check the situation where an error occurs when loading UCSS even if it is generated using the Chrome Developer Tools.

UCSS generation error

Failure to generate UCSS.We will investigate the cause of this problem.

Location of error messages

If the generation of the UCSS fails, an error message is included in the UCSS file.

The UCSS file for the LiteSpeed Cache plugin is located at /wp-content/litespeed/ucss.The contents of the UCSS file generated this time were as follows

/* [ERROR] Unknown word (.125rem}.google-auto-placed:before{    d): Please fix this css error and then try again. The problem may be around this string, normally right after it. If nothing else, you can find out which css file contains this css string and exclude it from css combine. */

UCSS was not generated due to an error in the “.google-auto-placed:before” section.

This reminded me that I had added a “.google-auto-placed:before” setting in the Twenty Twenty Five child theme.

CSS
.google-auto-placed:before {
   display: block;
   font-size: var(--wp--preset--font-size--small) !important;
   content: "Sponsored Link";
   text-decoration: none;
   margin-bottom: 0.3em;
}
Child theme style.css

By this part, I had added a “Sponsored Link” indicator above the Google AdSense ads.It was working properly, but it seems that an error occurred during optimization.

Confirmation that UCSS is generated after modification

When I comment out this CSS and regenerate the UCSS, the UCSS is now properly generated and loaded.

QUIC.cloud UCSS loaded

There is not much left to optimize the page, so we will only check the loading today.

Disturbed areas displayed by UCSS

The following locations are displayed incorrectly with the UCSS not yet adjusted.

  • WPFront Scroll Top arrow is not displayed
  • WPB Accordion Menu or Category category expansion plus sign at the beginning of the line instead of at the end (wpb-submenu-indicator class is not reflected)
  • Top menu (hamburger menu) installed with WP Mobile Menu does not open
  • Background does not change when selecting WP Mobile Bottom Menu

The part of the display that was not disturbed is in the following location.

  • Blogcard for WP
  • X (formerly Twitter) Block
  • Rinker’s Product Introduction Block

We will now check and adjust one by one.

Musubi

If the LiteSpeed Cache plugin fails to generate UCSS, an error message will be logged in the UCSS file itself.This can be used as a starting point to investigate the cause of the problem.

In this case, the “.google-auto-placed:before” set in the Twenty Twenty Five child theme failed to optimize and UCSS could not be generated.

This CSS was placed because I wanted to add a display above the Google AdSense ads.By commenting out this section, the UCSS was successfully generated and loaded.

Display disturbances will inevitably occur.The only way to deal with them is individually, and we will address them one by one.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *