Empty style blocks and critical path CSS

  • Resolved Gal Baras

    (@galbaras)


    4 years, 9 months 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 - 16 through 30 (of 42 total)
  • Thread Starter Gal Baras

    (@galbaras)

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

    In a mobile-first world, that’s rather inappropriate.

    Also, this doesn’t actually explain why it shoves the small-screen styles in there, given that they don’t apply.

    WP Fastest Cache handles link tag media attributes just fine. Why not just do the same (both for file combination and for CCSS)?

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    It uses 479 x 812 for mobile

    handles link tag media attributes just fine. Why not just do the same (both for file combination and for CCSS)?

    I will relay this to our developers.

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    Any progress?

    Plugin Support Hai Zheng?

    (@hailite)

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

    I am working on this known bug about media condition. Will update once done.

    Plugin Support Hai Zheng?

    (@hailite)

    @galbaras Hi, the fix is in v3.3-rc9. Can you give it a try and let us know if the above issue is still an issue or not? Thanks. You can use beta test to install it.

    Thread Starter Gal Baras

    (@galbaras)

    Great stuff. Seems to be working OK.

    The only problem I have left now is that inline style blocks appear after the combined CSS file, and some of them override styles in incorrect order, so the cached/optimised page doesn’t look like the live one.

    Examine, for example, the styling for the logo in the header.

    I’ve looked for a setting to combine inline styles, but couldn’t find it, so please let me know if there is one. Otherwise, please create this feature.

    Thanks again!

    Thread Starter Gal Baras

    (@galbaras)

    Should I start a new thread for this, or can we just keep going?

    Styles must be kept in order of appearance by the plugin, no matter which processing is done to them, and this includes both external stylesheets and inline style blocks.

    Plugin Support Hai Zheng?

    (@hailite)

    In v3.3-rc20, the orders are respected. Please try it using preview server. Preview server has the latest CCSS code deployed.

    
diff --git a/src/cloud.cls.php b/src/cloud.cls.php
index dd7dea03..00f46783 100644
--- a/src/cloud.cls.php
+++ b/src/cloud.cls.php
@@ -11,8 +11,8 @@ class Cloud extends Base
 {
        protected static $_instance;

-       const CLOUD_SERVER = 'https://api.quic.cloud';
-       const CLOUD_SERVER_DASH = 'https://my.quic.cloud';
+       const CLOUD_SERVER = 'https://api.preview.quic.cloud';
+       const CLOUD_SERVER_DASH = 'https://my.preview.quic.cloud';

        const SVC_D_NODES                       = 'd/nodes';
        const SVC_D_SYNC_CONF           = 'd/sync_conf';
    Thread Starter Gal Baras

    (@galbaras)

    I’m now using the latest master version from Github with the preview CCSS server, and the home page is showing the mobile styles again. Do I need to test some other way?

    Plugin Support Hai Zheng?

    (@hailite)

    Can you try latest commit w/ production CCSS server? All the CCSS updates are already merged into production.

    Thread Starter Gal Baras

    (@galbaras)

    I’m seeing escaped text in the CCSS style block. It seems url-encoded, but some of it must also be encrypted somehow before being encoded.

    Please check the site now.

    Thread Starter Gal Baras

    (@galbaras)

    @hailite I know this is now an old thread, but the site still doesn’t look right and the CCSS block still causes styles to be processed in the wrong order.

    Compare the styles of the left-aligned photo on https://dev.get-business-online.com/behappyinlife/?nocache with https://dev.get-business-online.com/behappyinlife/.

    Plugin Support Hai Zheng?

    (@hailite)

    @galbaras
    Apologize for the late response. Didn’t check forum often due to dev and debug work.

    Can you explain a bit more about url-encoded?

    The reason your header menu is gone is due to the order change of inline CSS .genesis-nav-menu{display:none} and individual CSS files b4 and after optm. This makes me thinking maybe we need to extract inline CSS into the combined CSS file and drop it from original HTML. How do you think?

    Thread Starter Gal Baras

    (@galbaras)

    Hmmm… the styles are no longer encoded. Are there multiple CCSS servers? Was anything changed recently?

    Yes, please. Keeping the order of styles is very important, and inline styles that appear above stylesheet links before optimisation move below the combined stylesheet after optimisation, which changes the order.

    Is there a setting for this? If there is, I can’t find it.

    If there isn’t, maybe it can be an option, at least initially.

    Plugin Support Hai Zheng?

    (@hailite)

    v3.4 used a new CCSS engine on same servers. Good to know no more encode issue.

    Yes we need to keep CSS orders. Will provide a commit later.

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