Some styles not loaded after activating Inline and Defer CSS

  • Resolved Adam

    (@jarfar)


    6 years, 7 months ago

    In CSS section, we have activated everything except ‘inline all css’ and ‘Inline and Defer CSS’.

    Everything works fine but when we activate ‘Inline and Defer CSS’, even with empty css, some styles are missing. Can you please tell if this is common bug? If not what could be a reason of this?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Adam

    (@jarfar)

    6 years, 7 months ago

    After more digging I found what cause the problem. There are 3 optimized stylesheets included in header. But on load only one of them have ‘rel’ attribute set to ‘stylesheet’ when others stay as ‘preload’, even after the page is loaded.

    Any idea how to fix this?

    edit:
    This can be fixed by snippet below but I believe this should be handled by AO.

    $(window).one('load', function() {
  $('link[rel="preload"]').attr('rel', 'stylesheet');
});
    • This reply was modified 6 years, 7 months ago by Adam.
    • This reply was modified 6 years, 7 months ago by Adam.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years, 7 months ago

    When “inline & defer CSS” is active as per the HTML the linked CSS comes with rel="preload" but there is an onLoad handler (JS) to switch to rel="stylesheet" as soon as the file is loaded. When on a browser that does not support rel="preload" yet (firefox for example) the page has extra JS at the bottom that will handle the preloading/ loading of the stylesheets.

    So yes, this should be handled by AO, no idea why this doesn’t work in your case Adam. Can you share your site’s URL so I can take a look?

    frank

    Thread Starter Adam

    (@jarfar)

    6 years, 7 months ago

    Sure, but I don’t want to share the link publicly. How can I share the link under the table?

    ps. The idea to use onload snippet inline per element is probably bad. The order of JS event handlers execution couldn’t be guaranteed so in practice postponed styles may load in any order and CSS is order sensitive. This is probably why I have to fix some styles after activating AOFT.
    https://wordpress.org/support/reply/12228541/edit/

    edit:
    My styles get overridden by AOTF styles because they were the last in the head. I moved them to the beginning of the head and it solves styles overridden problem. The only issue left is this onload not executing.

    I also add AOTF style by myself, by adding it to wp_head. This lets me manage different AOTF styles per page and/or with other conditions. I still use ‘Inline and Defer CSS’ option but with empty textfield.

    I use Mac Chrome 78.0.3904.108.

    • This reply was modified 6 years, 7 months ago by Adam.
    • This reply was modified 6 years, 7 months ago by Adam.
    • This reply was modified 6 years, 7 months ago by Adam.
    • This reply was modified 6 years, 7 months ago by Adam.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years, 7 months ago

    you can mail me at futtta-at-gmail-dot-com 🙂

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

The topic ‘Some styles not loaded after activating Inline and Defer CSS’ is closed to new replies.