jcl7

@gabelivan, thanks for the information! Do you have some guide that I can use for make the right settings? I newbie on WordPress.

Hello Frank:

I am testing your suggestions about minify inline and others change settings at Autoptimize. I am going to let you know about the status and future questions that I will have.

Hello Frank! Can you explain what is the purpose of Also minify inline JS/ CSS? feature under HTML on Autoptimize.

At this time, I have it disable mode. I have this link info under Remove unused CSS Section “wp-content/cache/autoptimize/css/autoptimize_84f0a59f6a2ffa192c20c072b0a67cf9.css” and under Reduce Unused Javascript “wp-content/cache/autoptimize/js/autoptimize_5fdd290addd3d91eab4ded5d3970978a.js”.

Hoping you can understand me. I wrote you on both message part of the link without my website link at the beginning.

Hello Frank! Thanks for explain to me. When I have enable lazy loads image at Jetpack, the LCP on mobile is 4.4s and the LCP on desktop is 1.2s. Nevertheless, if I disable lazy loads image feature, the LCP on mobile increase to 7.7s and the LCP on desktop increase to 1.6s. I deleted the cache through your plugin Autoptimize and W3 Total Cache, but I don’t know if you are talking about another step that I need to do.

I reviewed the list of links under “Oportunity” Eliminate Render Blocking Resources at Pagespeed Insights and appears this about Autoptimize (wp-content/cache/autoptimize/css/autoptimize_single_ec6a0b120600a6c45807c38a3cb6b535.css?ver=11.2). What I need to do?

Hello @lianakap!

Thank you for your suggestion. I have the backup of my site through UpdraftPlus (free version). I did the updating of Elementor on my site and everything is well thanks to God!

Hello Frank! After updating some plugins, I tested my site at PageSpeed Insights and the speed score was 71 on mobile and 97 on desktop. Later, I disabled the lazy load feature on Jetpack and I tested my site again but the speed score is dropped to 54 on mobile and 92 on desktop.

So, I decided enable again the lazy load features and test again and the speed score is 72 on mobile and 96 on desktop at the time that I write to you.

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.

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.

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.

Hi @generosus! Hoping you are well. I did the following configurations:

On CloudFlare, I have HTML minify > enable; CSS minify > disable; JavaScript minify > disable.

On Autoptimize, I have HTML minify > disable; CSS minify > enable; JavaScript minify > enable.

I have HTML minify > disable on Autoptimize because I read that this feature remove whitespace and do this can cause glitches on some sites. So, at this moment I don’t have a staging site for test before implementing it on production environment.

I wait a time and test my site at Page Speed Insights and my results on mobile was 67 and on desktop continues at 95.

What do you think?

Jamie

Hi @generosus! Thanks for your help! I am going to try your advice. But I have another question, can I enable minification html only on CloudFlare and the CSS and JavaScript minification enable on Autoptimize?

At this time, I have minification setting to CSS, JavaScript and HTML on CloudFlare and Minification CSS and JavaScript enable on Autoptimize but disable for HTML.

Yesterday, my page speed insights results were 61 on mobile and 95 on desktop, but it will be change constantly.

Jamie

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

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!

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!

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.