Load CSS Asynchronously and Critical CSS causing problems

One more thing I wanted to mention is that I am sure that this is being done by the Critical CSS Services as on inspecting the element on the browser I can see that this rule has been inlined.

div.et_pb_section.et_pb_section_0 {
    background-position: center right;
    background-image: url(https://cdn.exposuresop.com/wp-content/uploads/2019/08/Kolhapur.jpg) !important;

What I am failing to understand is how did the critical CSS find the link to this image as it is not mentioned on that page. If I come across anything else I will post here

Hi,

Could you please try , go to CCSS setting, there is an option to set CCSS per URI , add / into that field , purge all , and purge all – Critical CSS

then regenerate the CCSS again , see how it goes

Best regards,

Thank you so much, that just solved my problem. Adding the urls separately for each page is generating the correct critical css on a per page basis. @qtwrk I wanted to ask, after critical css is generated if I go ahead and make changes to a page in which critical css is inlined will the critical css be automatically regenerated for that page after my page modifications are complete.

Hi,

you may need to explicitly do purge all - Critical CSS in order to purge CCSS cache and regenerate them

Best regards,

Hi @qtwrk That worked perfectly. Thanks so much for helping out. Does purging all Critical CSS mean that all the CSS for all the URLs will need to be calculated again and will those calculation then cost CCSS Resources. Is there an option to purge CCSS on a per page/post basis?