keepact

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 ??

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…

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!!!

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!!!

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… ??

Hi Frank. The problem persists. I found the critical part of my css and put in the empty field in option “Inline and defer”, but GooglePageSpeed ??continue saying that there is a .css file Render Blocking (always the same!!!). When I disable the option “save static css/js files” (the last ), the type of the file that appears in GooglePageSpeed have the same name but is .php. In my html i have only one .css file, i can’t understand! Weird…

Sorry Frank, the first time I had not read right. Now I understand that I need to put the critical part of my css in the empty field in option “Inline and defer” of your plugin (I thought that the plugin did it automatically). I’ll do it and come back here with the result after trying find the critical css with the FAQs tools. I’m confuse if this .css file created by the plugin is normal or some kind a bug occurred.

Thank you for the great support!

This is the file that appears in GooglePageSpeed and inside of my cache in Autoptimizer folder:

autoptimize_390cb77b404dfcabcd3ed4771df7da77.css

Hi Frank. I think I solved the problem. Although I have only 8 installed plugins, the EWWW Image Optimizer was causing the issue with the background images. Now everything is working normally, but… I noticed that in GooglePageSpeed ??there is a .css file created by Autoptimize Plugin that is not included in my html witch is Render Blocking, however, I saw this css file in my cache in Autoptimize folder. It is normal for the plugin to create a second css file?

I think the tags that you saw are from plugin “Simple Lightbox”. I deactivated the plugin and all tags from them are gone.

I read some things about Autoptimize API’s but have not changed anything . Do you have any configuration suggestions? The only active option now is “Optimize CSS” and “Inline and Defer”

I’m not using anything for JS files to test where is the incompatibility. I disabled the Cloudflare Rocket Loader but nothing happened. Is really strange only this images not appears…

https://surfilmes.com/filmes-de-surf/

I put three combinations but don’t working for any of my categories:

.category-6 .section-title {
   background: url('https://surfilmes.com/wp-content/uploads/2016/05/foto-categoria-filmes.jpg');
   background-position: 50% 62%;
   background-size: cover;
}

.category-35 .section-title {
   background: url(https://surfilmes.com/wp-content/uploads/2016/05/foto-categoria-producao.jpg);
   background-position: 50% 59%;
   background-size: cover;
}

.category-36 .section-title {
   background: url("https://surfilmes.com/wp-content/uploads/2016/05/foto-categoria-series.jpg");
   background-position: 50% 62%;
   background-size: cover;
   color: Azure;
}

I have this in my stars rating (this code work well because the stars appears)

.rating-5 {
    width: auto;
    display: inline-block;
    height: 3.625rem;
    overflow: hidden;
    padding: 0.4375rem 0px 0px 14.9125rem;
    margin: 0.3125rem 0;
    text-align: left;
    background: url('https://surfilmes.com/wp-content/uploads/2016/05/stars-rating.png') left 7px no-repeat;
}

When i disabled the function “defer and inline” everything back to normal.

I only have one question: how work the “Inline CSS Minifications” because I activated and do not see any change in my html code, besides, i continue receiving the notice of Google Pagespeed saying that .css created by the plugin is Render Blocking. I believe if the function was running something new would appear in my code ? Any idea?

How can I make the plugin run async? I did the test and the plugin usually works if is not included in javascript that the W3 Total Cache creates. I believe that using the function async I can make it all work normally without get Render Blocking Script. Can you help me with that?