Critical CSS is not working

  • Resolved linxie

    (@linxie)


    6 years, 11 months ago

    Hi there,
    I’m struggling to get the critical css to generate properly (I’ve had to switch this option off so long as we have visitors on our site)
    Basically what happens is: it adds padding to the top of all the pages of roughly 545px (can’t remember exact number now).
    I’ve tried generating the ccss on the front end and in the background to no avail.
    When I use the option to run the queue manually, I get the following error: Failed to post via WordPress: Too many frequent errors
    The debug log shows the following:

    07/13/19 10:30:50.235 [105.184.168.142:60905 1 N9V] [IAPI] posting to : https://eu.wp.api.litespeedtech.com/ccss
07/13/19 10:30:51.000 [105.184.168.142:60905 1 N9V] [IAPI] failed to decode post json: Too many frequent errors
07/13/19 10:30:51.002 [105.184.168.142:60905 1 N9V] [CSS] empty ccss

    The additional padding also appears to be random… sometimes the padding is there, sometime it isn’t.

    Note: I’m using beaver builder page builder
    Please let me know if you need additional information

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • stanley@litespeed

    (@stanleylitespeed)

    6 years, 11 months ago

    Hi @linxie, the site you provided is not reachable, could you please check.

    Thread Starter linxie

    (@linxie)

    6 years, 11 months ago

    Hi Stanley,
    It might be the firewall… what’s your IP?

    Thread Starter linxie

    (@linxie)

    6 years, 11 months ago

    This might help – Report Number: DORCSIJW

    AppsON Hosting

    (@appson)

    6 years, 11 months ago

    You can use https://wp.api.litespeedtech.com/ips for the list of IPs used.

    Quickly passing your CSS file https://exclusiveweb.co.za/min/8c000.css through a CSS linter reveals you have an error on line 6752. 

    @media only screen and (max-width:768px) {
    .fl-builder-content .fl-module-content-slider .fl-slide-0 {
        background-color: #fc44444 !important
    }
}

    The error is with the background-color code #fc44444, which is not valid. HEX should be six, and not seven characters in length.

    If you fix that error and purge CCSS then process CCSS again, it should work.

    Thread Starter linxie

    (@linxie)

    6 years, 11 months ago

    I’ve found the issue with the padding being added – it was an issue with beaver builder and the fixed header, so I’ve just disabled the fixed header so long.

    After going through all the CSS, I’ve removed any issues it had with the use of !important and fixed that Hex value, but I’m still getting the same error when trying to manually run the cron to generate the CCSS.

    We’ve added that list of IPs to our whitelist now, so you should have no issues accessing the site.

    AppsON Hosting

    (@appson)

    6 years, 11 months ago

    The error message Failed to post via WordPress: Too many frequent errors happens when the CCSS fails to often, you are rate limited for a period of time to prevent your site from requesting CCSS again and again when it keeps failing.

    I can see that your site homepage CCSS is generated, which shows it’s working now after fixing the CSS error. You just had to wait a short period of time for your site to be allowed to send more CCSS requests to the API.

    ————

    Checking your page https://exclusiveweb.co.za/web-hosting/, I can see /*CssSyntaxError: /min/aa7bf.css:1:138747: Unknown word*/, again running https://exclusiveweb.co.za/min/aa7bf.css through a CSS linter picks up a lot of errors.

    I will list a few below:
    line: 4800

    .fl-node-5d1d91338fd14 .pp-pricing-table .pp-pricing-table-col.pp-pricing-table-highlight .pp-pricing-table-column .pp-pricing-featured-title {
    background-color: #ccc;
    color: #
}

    line: 4838

    .fl-node-5d1d91338fd14 .pp-pricing-table .pp-pricing-table-column .pp-pricing-table-duration {
    font-size: 12px;
    color: #
}

    line: 4845

    .fl-node-5d1d91338fd14 .pp-pricing-table .pp-pricing-table-column .pp-pricing-table-features {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #;
    text-transform: none;
    text-align: center;
    min-height: 0px
}

    There’s many more if you search that file for color: #; you will find around 182 errors.

    Thread Starter linxie

    (@linxie)

    6 years, 11 months ago

    It appears the plugin I’m using for the pricing table is causing this so I will need to remove it and just hand code the pricing table.
    Thanks for your help sorting this out.

    AppsON Hosting

    (@appson)

    6 years, 11 months ago

    A lot of the time with plugin generated CSS issues they arise from configurable options, where there are empty inputs.

    Check to see if it’s not as simple as filling them empty input boxes with a valid colour value to resolve the errors.

    If this is an issue with the table plugin https://www.ultimatebeaver.com/modules/table, you should report it to the author, and they can then push a fix to resolve this for you and all the rest of their customers.

    Thread Starter linxie

    (@linxie)

    6 years, 11 months ago

    Thanks, it’s the both pricing packages and the tables further down.

    I’ve found a quick fix (giving those colours values didn’t work):
    I saved the comparison tables as a module, removed them from the affected pages, ran the ccss, then added them back after the ccss generated. The errors aren’t resolved, but because there were less errors, the ccss generated without issue.

    I will need to get in touch with Power Pack and Ultimate Beaver about these errors.

    Thanks again for all your help, it is most appreciated, and I can finally rest easy now that I have ccss for all my pages.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Critical CSS is not working’ is closed to new replies.