Inline an ddefer CSS problem

  • Resolved adriennberta

    (@adriennberta)


    8 years, 8 months ago

    Dear Optimizing Matters,

    i have the next problem.
    The Google inside speed wrote me, that it needs to decrease the size of html above the fold content. I tried to use function Inline and Defer CSS, I generated the css code and paste it, but it is broked the page, so I deleted the css and switched of this function, but after in the Google Insed Speed test appeared an new recommmanded thing:
    there is an inhibit source at the page, which makes delay the loading of page:
    http://….hu/wp-content/cache/autoptimize/css/autoptimize_04b2663…..
    How could I solve this. Google writes it needs it optimize, but how?

    Thank you so much in advance,
    Adrienn

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    there is an inhibit source at the page, which makes delay the loading of page

    I’ve never seen that warning on GSPI I’m afraid @adriennberta, no idea what it is about. can you share your URL so I can have a look?

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    Dear Optimizing Matters,

    thank you so much for your quick help!

    The url exactly is: http://bor-ker.hu/wp-content/cache/autoptimize/css/autoptimize_04b28634e4c220a3a8a6e2290f18e0d2.css

    Thank you so much,Adrienn

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    Hey Adrienn;
    I see these warnings:

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Prioritize visible content

    Both of which should be fixable with “inline & defer” provided you apply the correct critical CSS. Getting the correct critical CSS might take some trial and error on different sites though, best is to try different tools and if need be tweak it yourself to make GPSI happy 😉

    frank

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    Hy Frank,

    thank you so much for your answer!
    But now, there is not switch on this option (inline & defer), so that is why I don’t undertsand.

    And which ‘Both of..’ do you think?
    There is now one of from ‘inline @defer’ option, just in the CSS admin window.

    Sorry for my disundertsanding.:-)

    Thank you so much in advance for xóyour help!
    Adrienn

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    well, “inline & defer” is the solution for those warnings, not the reason for it. so go ahead and (re-)try “inline & defer”, have a look at this video (not mine) for more info;

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    Dear Frank,

    thank you so much!:-)
    I wachted it, I know it.
    My steps:
    1. I could make appear the above link ( http://bor-ker.hu/wp-content/cache/autoptimize/css/autoptimize_04b28634e4c220a3a8a6e2290f18e0d2.css) proposed optimizing by Google Insight Speed by the ticking the elements ‘Also aggregate inline CSS?’ and ‘Inline all CSS?’.
    2. But after the Google Insight Speed wrote me yet to decrease the size of html.
    3. I did Inline and Defer CSS by the instructions of this link: https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option;
    The result number and color of Google Insight Speed improved, but the reccomended things also grown: apeared two new proposed optimizing css:
    http://bor-ker.hu/wp-content/cache/autoptimize/css/autoptimize_88b4172f4766dcd4088ed2d150b71afd.css
    http://bor-ker.hu/wp-content/cache/autoptimize/css/autoptimize_88b4172f4766dcd4088ed2d150b71afd.css

    I ask you, if I have to just insert 2 created critical paths from this 2 css to Inline and Defer CSS field exactly after the critical path css from <style type=”text/css” media=”all”> and ending </style> tags?

    I hope, that I could explain well.:-)
    Thank you so much for your help in advance,

    Adrienn

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    no, you don’t have to critical css for that file. I had a quick look and it looks like the critical css doesn’t contain styles for the slider (which is JS-based). I guess by adding those styles (manually) you could make Google happy (or happier at least 😉 ).

    frank

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    Dear Frank, Thank you so much!
    I took out the ticking from also aggregate inline CSS?, now 2 prposed otpimizing css desapeared from Goggle Inside Speed result, but….

    By using JS optimizer, the Woof product filter plugin in the woocommerce webshop is totalment broken, it does not work the filter, none of them.
    There are many js in this plugin.
    I tried to exlude all js,but the main page did not load in in this case well. And I tried exlude some of theme, but nothing changed.
    Did you ever met this 2 plugin conflict? Wich js have I to exlude to work well, maybe you know.

    Thank you so much, Adrienn

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    Did you ever met this 2 plugin conflict?

    No experience with that, no. What JS errors do you see on the browser console?

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    Dear Frank, I see this:
    Uncaught ReferenceError: jQuery is not defined
    at (index):250
    autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:8 JQMIGRATE: Migrate is installed, version 1.4.1
    autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:454 Uncaught TypeError: woof_submit_link is not a function
    at woof_radio_direct_search (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:454)
    at HTMLInputElement.<anonymous> (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:451)
    at HTMLInputElement.dispatch (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:3)
    at HTMLInputElement.r.handle (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:3)
    at Object.trigger (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:3)
    at Object.a.event.trigger (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:8)
    at HTMLInputElement.<anonymous> (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:3)
    at Function.each (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:2)
    at a.fn.init.each (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:2)
    at a.fn.init.trigger (autoptimize_565e4bb3301bf7eeb1ab119640ba2373.js:3)

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    Uncaught ReferenceError: jQuery is not defined

    well, let’s start off by making sure jquery is excluded from AO optimization (default js/jquery/jquery.js, verify your page source when not optimizing JS to make sure this is correct)?

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    Thank you so much for your quick help!
    I tried it, but it is not working.:-(

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 8 months ago

    I see with exluding js/jquery/jquery.js this:

    autoptimize_b433f682ddb0787fa203e70e907351d3.js:2 JQMIGRATE: Migrate is installed, version 1.4.1
    autoptimize_b433f682ddb0787fa203e70e907351d3.js:448 Uncaught TypeError: woof_submit_link is not a function
    at woof_radio_direct_search (autoptimize_b433f682ddb0787fa203e70e907351d3.js:448)
    at HTMLInputElement.<anonymous> (autoptimize_b433f682ddb0787fa203e70e907351d3.js:445)
    at HTMLInputElement.dispatch (jquery.js:3)
    at HTMLInputElement.r.handle (jquery.js:3)
    at Object.trigger (jquery.js:3)
    at Object.a.event.trigger (autoptimize_b433f682ddb0787fa203e70e907351d3.js:2)
    at HTMLInputElement.<anonymous> (jquery.js:3)
    at Function.each (jquery.js:2)
    at a.fn.init.each (jquery.js:2)
    at a.fn.init.trigger (jquery.js:3)

    • This reply was modified 8 years, 8 months ago by adriennberta.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    8 years, 8 months ago

    I’ve checked on http://bor-ker.hu/borvidekek/balatonfured-csopaki-borvidek/ and I don’t see those errors? Might be due to you being logged on, can you check?

    Thread Starter adriennberta

    (@adriennberta)

    8 years, 7 months ago

    Dear Franc, I checked it, it is ok, no error, but why I had to do it?

    If I see well, it is an jquery error. If I cache JS by autoptimize, the WOOF plugin is broken.
    Now I ticked just Optimize JavaScript Code, and exluded jquery.js.
    Now the plugin work well, but in this case I can not to use the option Also aggregate inline JS, because if I tick it, the plugin is broken, not works. And plus this way the page became slower.
    And now the Google Insight Speed writes: Remove Remove Render-Blocking JavaScript:
    http://bor-ker.hu/wp-includes/js/jquery/jquery.js
    But if I exlude it, I can not remove it…???
    And there is a new recommended thing by Google: Enable Compression: http://bor-ker.hu/?wc-ajax=get_refreshed_fragments (for this solve I need tick the option of Also aggregate inline JS, but I can not, because it brokes the plugin function…???
    Do you can help me?
    Thank so much, Adrienn

Viewing 15 replies - 1 through 15 (of 16 total)
1 2

The topic ‘Inline an ddefer CSS problem’ is closed to new replies.