“Inline and Defer CSS” causes loading problems.

  • Resolved annamp

    (@annamp)


    9 years ago

    Hello,

    I am using autoptimize plugin and I am totaly satisfied.
    As PageSpeed Insights result for mobiles is 47/100, I tried to eliminate render blocking by using autoptimize inline and defer css option. I used https://jonassebastianohlsson.com/criticalpathcssgenerator/ to create critical path css but when the page is loading, you see the page without css for a few seconds. Moreover the other pages have appearance issues.

    site: https://www.miltostsenekos.com

    I would appreciate any help.

    Thank you in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Frank Goossens

    (@futtta)

    9 years ago

    that typically is due to the critical CSS not being sufficient to render the page @annamp, try generating it with another tool maybe and/ or tweak it manually?

    hope this helps,
    frank

    Thread Starter annamp

    (@annamp)

    9 years ago

    Thank you for the quick response.

    Can you please suggest me another tool?

    Anna

    Thread Starter annamp

    (@annamp)

    9 years ago

    I have also noticed 2 css files one for media all and another one for media screen , for which of these I have to genererate the critical css path? I guess fot the both of them.

    Plugin Author Frank Goossens

    (@futtta)

    9 years ago

    for other tools, have a look in AO’s FAQ.

    for how to generate, have a look at this video maybe;

    Thread Starter annamp

    (@annamp)

    9 years ago

    thank you for your replay.

    I have already watched this video and I found it very useful.

    I generated critical css path for both css and some issues have solved but remains the problem with the other pages css and appearance, could you please tell me where can I find the next lecture which refers to this?

    Plugin Author Frank Goossens

    (@futtta)

    9 years ago

    no links to lectures I’m afraid.

    what you can do;
    * try creating critical CSS for Homepage & other pages and combine those (i.e. extract CSS rules for normal pages that are not in the HP one and add it to the HP CSS)
    * if you’re into development you could try to hook into AO’s API to inject different above the fold CSS for different pages
    * if you’re willing to pay for a premium solution, criticalcss.com offers an autoptimize “power-up” that has a UI that allows you to create rules for which crit. css to add where (cfr. https://www.youtube.com/watch?v=S5sjZRWsgrM)

    hope this helps,
    frank

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

The topic ‘“Inline and Defer CSS” causes loading problems.’ is closed to new replies.