Background-images not working after "defer" css, even with "Minify" JS files off

I think you did not understand completing or I could not explain right. Yes, I know that the plugin creates a second .css file used when the “Inline and defer” is enabled, which is the file with the content of the empty field. But what is happening is that the plugin creates a third .css with the same content as the optimized .css and has exactly the same size. When I delete the file the plugin creates another again. I am getting crazy… ??

To be clear, I have a .css file in my html with the name:

autoptimize_734f0abb0813bd287d70258039b2abd4.css

And another .css file in GooglePageSpeed with the name:

autoptimize_390cb77b404dfcabcd3ed4771df7da77.css

But the autoptimize_390cb77b404dfcabcd3ed4771df7da77.css file is in the plugin folder, and it is always created as much as I delete it!

The .css file that is created after I fill the empty field in option “Inline and defer” is created with the correct content and not appear on GooglePageSpeed, as well as the file that is in my html. But it is the file that is only in the plugin folder is appearing. I will speak with my server service chat (ipage) if it is not a common problem of cache, but i think it is not.. For now i disabled the cache in Cloudflare CDN service and W3 Total cache plugin.

By the way, thanks for help me to find the correct part of my critical .css!!!

ok, so;
1. the aggregated, minimized full CSS for anonymous users is stored in autoptimize_390cb77b404dfcabcd3ed4771df7da77.css
2. as you’re logged in, you’re bound to have some different CSS, which results in another CSS-file that is linked in your HTML, that is autoptimize_734f0abb0813bd287d70258039b2abd4.css
3. the critical CSS you enter is stored in yet another file

and all of this is normal ??

now the reason why GPSI still complains about render-blocking CSS (and JS), is that you have some JS-based throbber on your screen while the page is being loaded to hide the page until all is downloaded so it can be rendered. this is opposite to what google wants you to achieve actually, which is to show the page immediately, with as little as possible being downloaded. that implies that as long as you’re using that loading-animation, doing inline&defer is pretty useless I’m afraid.

hope this clarifies,
frank

After 4 days… I made it!!!

If i use the javascript optimization function by your plugin the .css file block the rendering of my pages. I discovered that this occurs because the jquery.js need to be before the /head tag with Async (asynchronous). All the other scripts i put before the /body tag with defer. With this settings, everything work almost perfect, with only some pages appearing the .css file blocking the rendering.

I deleted all your code and put only the code from my background-images in the “Inline and defer” field and everything worked like magic!! (Crazy, don’t you think?)

Now i have only good scores:

– GooglePageSpeed: Mobile 97/94 Desktop
– Pingdom: 96 with 357 ms of loading time
– GTmetrix: Pagespeed score 99/99 Yslow score

* About the JS-based throbber: yes, i don’t like either but i don’t have the skills to make these changes. The problem is that i use a free premium theme with no support. I tried using the wp_deregister_script function with the JS handler but the page does not load. I think it is a core feature and requires more knowledge (or no?).

Thank you frank for explain how the plugin work, saved me a lot of time!!!

Great news keepact, congrats with your speedy site! ??

frank

Unfortunately, i thought everything was ok BUT… No, I was wrong again.

First, I was wrong about the inline CSS code with only the background images. I could even pass the test made by GooglePageSpeed ??but my site loads with horrible styles before the page loads completely. With the code that you gave me, everything works perfectly.

I may have achieved scores but the features of my website were not working properly on the phone. I found that when I delete the jquery.js from optimize everything flows correctly, GooglePageSpeed ??says that the .css file is not blocking the rendering of the page and the site’s features are ok (except for jquery.cs blocking the page rendering). When my JavaScripts that are in the footer are optimized before the /body tag as Defer and jquery.js is before the /head tag as Async, nothing blocks the page rendering, but the site does not work properly. When I change only the Defer function of JavaScripts that are in the footer for Async, everything on the site works correctly, however, the GooglePageSpeed ??accuses the critical inline css code that worked before does not work anymore. Do you have any explanation for that or I have to accept that I will always have a file blocking the rendering of my page?

Sorry for the time this problem persists…

I’m afraid that some themes/ plugins indeed require AO to be configured in such a way that is not optimal from a performance point of view keepact. So yeah that’s something you’ll have to accept, except if you’re willing to switch themes/ plugins off course ??

frank

Hi Frank. Your answer is true. As you said, the whole problem is around the preloader javascript. I did some tests and even with a regular note 74/90 in GooglePageSpeed?, my site loads extremely fast on mobile using 3G. In Pingdom test tools my site loaded in 350ms and got 95 in performance grade.

I also discovered that the jquery.js was not the problem, it was my connection to the internet when I was testing the site hahaha (sorry). Now I have only one .css file blocking the rendering of the page and two WebFonts from google, but i can’t see it affect the performance of my website. I guess I got a little obsessed with a good score in GooglePageSpeed ??and forgot what really matters…

Your plugin and support deserve 5 stars!! Thanks for your patience ??

Your plugin and support deserve 5 stars!!

there you go ??