Autoptimize and W3 Total Cache

Hey Jamie;
Disabling minify (under Performance -> General Settings -> Minify -> Minify: enable should be off) should suffice really.

hope this clarifies,
frank

Hello, Frank! Thank you for answer me @optimizingmatters. I check under Performance > General Settings > Minify > enable was off. I installed Autoptimize and I did only the following configurations:

Optimize JavaScript Code? enable

Aggregate JS-files? enable

Optimize CSS Code? enable

Aggregate CSS-files? enable

Also aggregate inline CSS? enable

Inline all CSS? enable

Minify excluded CSS and JS files? disable. I uncheck this because at a WordPress course that I am taking suggest uncheck for avoid possible problems that will be appears on WordPress and I newbie with these issues.

Under Extra tab, I leave at Google Fonts: Leave as in. On the WordPress course suggest enable this option:

Combine and load fonts asynchronously with webfont.js (deprecated).

But I don’t know if active it because this have (deprecated) indication. What is the meaning?

What do you recommend me?

I tested my site at Page Speed Insight and on Mobile the score had an improvement of 48 to 62, but on desktop had a decrease for 93 to 86.

What do you recommend me for achieve an improvement? Hoping you can guide me! Thanks.

well, regarding google fonts; I generally advice “Combine and link deferred in head”.

I would not “inline all CSS” (it makes the HTML too bulky), but doing “Eliminate render-blocking CSS?” would be a lot better, but do take into account you’ll have to either;

a) generate & copy/paste the “above the fold CSS” in the field below (more info in the AO FAQ, look for “inline & defer CSS”) OR
b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR
c) take a subscription over at criticalcss and paste your API in the field on the critical CSS tab

hope this helps,
frank

Hello Frank! Thank you for your answer. I applied your advice about google font settings.

I wanting follow your second advice about disable inline all CSS and enable Eliminate render-blocking CSS because this is one of my opportunity at Page Speed Insights. I attached you the PageSpeed Insights for my site which is: https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.unpasodigital.com%2F&form_factor=mobile for if you need more information for give me support.

I read the AO FAQ under the “What is the use of inline and defer CSS”? and also “But how can one find out what the “above the fold CSS is”?

I enter my website url at Sitelocity critical CSS generator but I don’t know what result I have to choose. It is present Critical Path CSS results and Load combined CSS file after page load to download on:

unminified combined css file

minified combined css file format

unminified critical css file

minified critical css file

What kind of file I must to copy and paste in the input field (text area) at Autoptimize settings?

Hoping you can explain me more about this! Thanks!

You can just copy/paste the Critical Path CSS from the big text area (removing the opening and closing <style tags).

Hello Frank! Thank for you answer. I applied the second advice that you told me. I did the followings changes:

inline all CSS? – disable

Eliminate render-blocking CSS – enable

Then, I generate the Critical Path CSS form the big text area and remove the <style> at opening and closing. Then, I click:

save and empty cache on Autoptimize

Purge Cache on W3 Total Cache

When I tested my site on PageSpeed Insight, the mobile speed score is on 44 and the desktop speed score is on 63.

Also, when I visit my website as a visitant through Safari on mobile and desktop too and it begin to appear a screen that said “Skip Content in blue color letters” and then appear the content of my site. This factor did not appear when I had the others settings on Autoptimize configurations.

So, I put back the Autoptimize setting as I had it, in others words

inline all CSS? – enable

Eliminate render-blocking CSS – uncheck and deleted the Critical Path CSS

Then, I save and empty cache on Autoptimize and purge cache on W3 Total Cache. Then, I did the test on Page Speed Insight and the results were: 61 on mobile and 95 on desktop.

Also, I visit my website as a visitant again through Safari on mobile and desktop too and the screen that said “Skip Content in blue color letters” disappear.

What do you think about my Page Speed Insight score? Is there another suggestion that you can recommend me? I’d appreciate it. Thanks for all your help. Your support is excellent!

Also, when I visit my website as a visitant through Safari on mobile and desktop too and it begin to appear a screen that said “Skip Content in blue color letters” and then appear the content of my site. This factor did not appear when I had the others settings on Autoptimize configurations.

in that case the sitelocity critical CSS is not OK, try one of the other tools mentioned in the FAQ maybe?

Hello Frank! I don’t understand how to use Critical Path CSS Generator by Jonas Sebastian Ohlsson. I read that I need generate the CSS for each page of my site before Generate Critical Path. I don’t know how I do that step.

In the meantime, I read that Speed Booster Pack is a good complement of Autoptimize.

Do you recommend me use Speed Boster Pack if I am using Elementor (free version 3.6)? Thanks for your help and your patience with me!

Jamie

re. critical path generator; in the AO FAQ you’ll find a link to a video that uses that tool, that might help?

re. CCSS for each page; that indeed is better then the “one size fits all” approach, you can do that by creating manual rules on the “critical CSS” page, but it is a bit cumbersome.

re. Speed Booster Pack; it goes very well with AO indeed, maybe give it a try? ??

Hello Frank! I did not find the link of a video that you said to me under AO FAQ. At the meantime, I am going to try install Speed Booster Pack and test it.

I installed Async Javascript and it helped a little bit. I will let you know when I install and test Speed Booster Pack. Thanks for your help.

here’s the video jcl7;

Hello Frank:

Thanks for the video. I saw it, but I don’t have the courage to do that process. At the time of this message, my pagespeed site is 59 on mobile and 96’on desktop. I inactived manually some widgets of essential add-ons, royal add-ons and happy add-ons to improve the pagespeed.

I read on AO FAQ about Rocket Loader. Do you think that I can try it? I need to reduce Largest Contentful Paint.

well, you can obviously give it a try, but if AO is configured correctly RocketLoader will unlikely help improve things significantly.

regarding LCP; are you lazyloading images? is LCP better when not lazyloading?

Hello Frank:

I am very newbie on WordPress so I don’t know if AO is configured correctly or not. I have the configuration that I think help more with my pagespeed site score because I am testing it with each change. I looked for AO best settings information on Google and YouTube from different sources of information as like as consulting with you.

Rocket Loader works with Async Javascript or I have to inactive it first to try it?

Yes, I have lazyloading images or in other words, I have lazy load image enable on Jetpack. I don’t know if LCB is better without lazyloading.

So, I need to do the test with disabling lazy load on Jetpack feature, and test it for see the results. Also, I have a background image at my site specifically on the “header section”, in others words, it is the first image that appears when you see my site that under LCP suggestion on Page Speed Insights makes a reference to it. Also, I believe that it appears under Property Image size. Maybe is that is big although I see well when I look for on desktop or mobile to my site and I have active TinyPNG plugin.

So, I need to do the test with disabling lazy load on Jetpack feature, and test it for see the results.

yes, I would certainly advice that as next step ??