Empty style blocks and critical path CSS

  • Resolved Gal Baras

    (@galbaras)


    5 years ago

    I’ve practically turned on every optimisation feature, including async loading of CSS and critical path CSS generation. I now see a couple of issues:

    1. There are several empty STYLE blocks in the HEAD
    2. The “litespeed-optm-css-rules” style block is empty
    3. There is no other evidence of inline CSS that isn’t there in the unoptimised page (add /?nocache to the URL to compare)

    The code looks the same whether critical CSS generation is done in the foreground or in the background.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 42 total)
  • Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Please enable advance debug log , it should log the reason why you didn’t get the CCSS rule.

    I am not exactly sure what is your second question , but if you want to compare page without LSCWP, please try ?LSCWP_CTRL=before_optm

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    For some reason, my list of questions got messed up. Sorry about that.

    I turned on advanced debugging with CCSS generation in the foreground.

    The only mention of CCSS in the debug log is “[CSS] existing ccss /home/gboldev/public_html/behappyinlife/wp-content/cache/ccss/front.css”, nothing is bypassed that shouldn’t be and there are no errors.

    Did you want to look at the log? I’m not sure I want to post it here.

    I’ve configured /?nocache to bypass everything, including optimisation. Didn’t know about the built-in option. Thanks.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Could you please try:

    1. remove everything inside /wp-content/cache/

    2. purge all , purge CCSS cache

    3. try again on CCSS rule , and also logs.

    Best regrads,

    Thread Starter Gal Baras

    (@galbaras)

    First, I saw this:

    /*CssSyntaxError: /behappyinlife/min/95588.css:1:49734: Unexpected }*/

    However, I couldn’t find a “min” directory anywhere.

    After finding and fixing the error, I got this:

    
02/20/20 08:50:49.323 [61.68.187.13:58317 1 leL] [CSS] Generating:  --- array (
  'home_url' => 'https://dev.get-business-online.com/behappyinlife',
  'url' => 'https://dev.get-business-online.com/behappyinlife',
  'ccss_type' => 'front',
  'user_agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36',
  'is_mobile' => 0,
)
02/20/20 08:50:49.323 [61.68.187.13:58317 1 leL] [IAPI] posting to : https://as.wp.api.litespeedtech.com/ccss
02/20/20 08:50:49.743 [61.68.187.13:58317 1 leL] [IAPI] failed to decode post json: Too many frequent errors
02/20/20 08:50:49.749 [61.68.187.13:58317 1 leL] [CSS] empty ccss
    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    /*CssSyntaxError: /behappyinlife/min/95588.css:1:49734: Unexpected }*/

    this is the issue , syntax error.

    in order to find the source file , please disable CSS combine and CSS minify

    purge all , and purge CCSS , re-do the previous process again

    then you will see this in real file path.

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    Keep reading my previous note. There is no error anymore.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    /*CssSyntaxError: /behappyinlife/min/95588.css:1:49734: Unexpected }*/ according to this , you have a syntax error in some CSS

    and the /min/ is CSS minified/combined file , it will alter the file name, you need to disable CSS optimization and re-try the debug log again , then it will log out the actual , real , CSS file in question.

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    After finding and fixing the error, I got this:

    
02/20/20 08:50:49.323 [61.68.187.13:58317 1 leL] [CSS] Generating:  --- array (
  'home_url' => 'https://dev.get-business-online.com/behappyinlife',
  'url' => 'https://dev.get-business-online.com/behappyinlife',
  'ccss_type' => 'front',
  'user_agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36',
  'is_mobile' => 0,
)
02/20/20 08:50:49.323 [61.68.187.13:58317 1 leL] [IAPI] posting to : https://as.wp.api.litespeedtech.com/ccss
02/20/20 08:50:49.743 [61.68.187.13:58317 1 leL] [IAPI] failed to decode post json: Too many frequent errors
02/20/20 08:50:49.749 [61.68.187.13:58317 1 leL] [CSS] empty ccss
    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Too many frequent errors

    there was a rate limit that if same site requested with problematic CSS several times , it will be blocked for certain period of time.

    Please try again.

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    This just happened after 3 days of no access (it’s a dev site that only I use). How long does the block last?

    Oh, and why is this not done locally? It’s posting to https://as.wp.api.litespeedtech.com/ccss, which may or may not be available when the site is.

    According to the Optimize page, it takes 15 seconds for the API server to return the CCSS, which seems like a LONG time. This also means that the load on the API sever may become an issue for websites (small issue, but still).

    Thread Starter Gal Baras

    (@galbaras)

    In the meantime, I’ve found and fixed the error(s) and gotten valid CCSS in the page.

    Thread Starter Gal Baras

    (@galbaras)

    It appears that CCSS generation is ignoring my stylesheet exclusion

    I’ve excluded “woocommerce-smallscreen.css” to “CSS Excludes” on the Tuning page, and this stylesheet is being loaded separately.

    However, the critical path CSS includes the following style, which only appears in that file:

    
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
}

    If you compare https://dev.get-business-online.com/behappyinlife/books-products/ to the same URL with “?nocache”, you will see that the cached/optimised page has no right margins on the first and second product blocks due to the inline inclusion of this style.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    According to the Optimize page, it takes 15 seconds for the API server to return the CCSS, which seems like a LONG time. This also means that the load on the API sever may become an issue for websites (small issue, but still).

    yes, that’s why there is foreground and background setting for CCSS generation.

    Here’s How it Works:

    1. A Visitor sends a request to the Client Server
    2. If there’s no Critical CSS, the Client Server will send a Critical CSS request to LiteSpeed’s remote Critical CSS (or, CCSS) Server
    3. The CCSS server will retrieve content+assets from the Client Server, and then generate Critical CSS
    4. The CCSS Server then sends the generated Critical CSS back to the Client Server
    5. The Client Server serves the content with the Critical CSS to the Visitor

    The excluding CSS is only excluding it from being combined or minified , but user still see that CSS content , so does the generator, that’s why it ignores your exclude setting.

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    yes, that’s why there is foreground and background setting for CCSS generation.

    Consider a situation when the CCSS cache was cleared and a visitor comes before the background job was processed. In this case, CCSS should be generated in the foreground with a higher priority, so that it completes faster.

    Background jobs can wait, but visitors shouldn’t.

    In fact, I’m not sure why the plugin even offers foreground regeneration. Background should be the only method, with a high-priority foreground fallback for the rare occasions when that’s needed.

    This will make the first visitor after a CCSS clear wait a little bit, and prevent the flicker for every subsequent visitor.

    The excluding CSS is only excluding it from being combined or minified , but user still see that CSS content , so does the generator, that’s why it ignores your exclude setting.

    Actually, this depends on the width of the browser window, and it’s incorrect to assume that the user will always see the effects of this CSS.

    That file is included with media="min-width: 768px" and should be wrapped in a media query when combined.

    This is a problem with file combination, and excluding the file was a workaround, but apparently, that’s still not enough.

    Not handling the media attribute of included stylesheets is a fundamental problem with the plugin and needs to be fixed.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    why the plugin even offers foreground regeneration

    well , just to keep the option open.

    there are site with pages has very small CSS code, which doesn’t delay a lot , like 1 or 2 seconds at most, which some site owner wants it that way.

    Currently our CCSS generator is using a fixed size 1366 x 768 as the common size.

    Best regards,

Viewing 15 replies - 1 through 15 (of 42 total)
  • The topic ‘Empty style blocks and critical path CSS’ is closed to new replies.