Autoptimize CSS render blocking

I understand that but what do I do with the other file I have two. In the YouTube video, all the files are put into one. There is no explanation for my situation. I apologize if I’m being stupid but I don’t get it.

I understand that but what do I do with the other file I have two. In the YouTube video, all the files are put into one. There is no explanation for my situation.

I *think* you’ll have to run it two time and combine the resulting CSS of the two.

I have the same issue for my website. For my website google page insights are showing no issues for desktop; however on the mobile results it is showing render blocking javascripts for below link

https://www.dentistreebangalore.com/wp-content/cache/autoptimize/js/autoptimize_1b28c83630b37f696a7fc30fde06a095.js

and showing Optimize CSS delivery of following
https://www.dentistreebangalore.com/wp-content/cache/autoptimize/css/autoptimize_404f74ae119cca98e8edecffecebd5f0.css

I have regenerated critical css from critical path generator; however I am still getting the problem

PS :- I am not a technical person and built all my website through watching youtube videos, any help in simple language will be much appreciated

hey @danishsq;
for the JS: something (another plugin?) is removing the defer attribute from autoptimize’s JS, you’ll have to find out who the culprit is and stop that.

for the CSS; seems your critical CSS is not OK (it’s huge by the way), try generating it elsewhere (see the links in the FAQ)

Happy Holi!
frank

Thanks Frank!! Happy holi to you too ??

I had Async Javascript plugin installed which was creating the issue of rendering .js file above the fold. I have removed the plugin and that has resolved the issue.

However, the CSS issue is still thr. This time I used the below link to generate critical path css

https://www.sitelocity.com/critical-path-css-generator

Now on the results page I have two boxes – Critical Path CSS and Load combined CSS file after page load

Should I combine both and update in Autoptimize ? Appreciate your support!!

Now on the results page I have two boxes – Critical Path CSS and Load combined CSS file after page load. Should I combine both and update in Autoptimize ?

no, you should only copy/ paste teh “critical path css” @danishsq

I tried with above link also ; however the below script is still appearing in Google page speed results ? Can you provide some insights as how to remove this now ?

These are the three scripts I see under Optimize CSS Delivery

1) https://www.dentistreebangalore.com/wp-content/cache/autoptimize/css/autoptimize_404f74ae119cca98e8edecffecebd5f0.css

2) https://fonts.googleapis.com/css?family=Bree+Serif:300,400&subset=latin

(Under Autoptimize menu I selected remove google fonts, not sure why this script is still appearing)

3) https://www.dentistreebangalore.com/?sccss=1&ver=4.9.4

for (1) all depends on the critical css which can be hard to get right, I’ve had to tweak it myself in some cases tot please google.

for (2) could be your theme (or a plugin) calling Google Fonts in a manner that AO does not see it, you’ll need to dig to find out what is adding it where and how

for (3); migrate your custom css from “simple custom css” to wordpress’ core “additional css” in appearance -> customize -> additional css

Do you think the premium solution of generating critical CSS will help through below link to resolve these issues ?

https://criticalcss.com/

Or Do you know any developer forum or support forum which can provide insights on getting resolution to these issues. As earlier mentioned I have zero technical knowledge in figuring this out myself so need some support to resolve the issues.

Do you think the premium solution of generating critical CSS will help through below link to resolve these issues ?

it might but no guarantees (they do have a nice money-back policy if I’m not mistaking ?? )

I have figured out the root cause of 2nd issue it is getting caused due to font selected in the static slide of Smart Slider Plugin ? Any Inputs you can give to correct that ?

what fonts can you choose from? is there something like “system font” or “browser font” or so?

I am able to fix all other issues except the autoptimize one, for Font issue I have chosen “Arial” as my header font which resolved the issue and I removed the custom CSS to resolve the third issue

Now on the page speed insight results I see these two error

https://www.dentistreebangalore.com/wp-content/cache/autoptimize/css/autoptimize_88687ef8f6f6e82b1e4dafe2f15b1614.css

https://www.dentistreebangalore.com/wp-content/cache/autoptimize/css/autoptimize_88687ef8f6f6e82b1e4dafe2f15b1614.css

Both are same, not sure why it is reflecting twice on the results. Could you please look into this issue and provide the solution to fix this last one ?

Both are same, not sure why it is reflecting twice on the results

that’s known GPSI issue @danishsq, cfr. https://github.com/filamentgroup/loadCSS/issues/110

Could you please look into this issue and provide the solution to fix this last one ?

afraid that’s a bit out of the scope of my free support @danishsq, sorry. have you given criticalcss.com a try?

Yes I have tried critical css; however that is also not working in eliminating this scripts and reducing the score of page speed insights.

What will be the charge to look into this issue and fix the issue.

The another one I wanted to ask is coming from one of the Doctor appointment widget which is placed on Smart Slider. That is creating a render block Javscript on the page. How to fix that and whether u can fix that in you chargeble support

https://www.practo.com/bundles/practopractoapp/js/abs_widget_helper.js

So In total I want the above two Autoptimize .css files fixed and the above .js file fixed for my website.

PS: I have a very small local business which is catering to very limited number of people therefore the budget is very limited.