Render-blocking – Inline & Defer not an option

hmmm … is the difference in templates reflected in the URL somehow?

No – not in the url.

https://topyx.com/social-learning-blog/equip-a-global-workforce-with-an-lms/
https://topyx.com/lms-pricing/
https://topyx.com/

All different templates. That is why I cannot get the Above the Fold tools to work when trying to inline and defer.

Is there somewhat to move, asynch, or stop the render-blocking aspect of the AO CSS delivery?

ok, but each template (all part of the same theme) is used on one (or more) known URL’s, right?

something like;

• topyx.com -> homepage template
• topyx.com/lms-pricing, /learning-management-solution/, /lms-benefits/, … -> static page template
• topyx.com/social-learning-blog/* -> blog template

In that case and if you’re not afraid of doing some (limited) coding, you could use AO’s API (the “autoptimize_filter_css_defer_inline”-filter, cfr. last example in autoptimize_helper.php_example) to define a set of to-be-inlined CSS based on those sets of URL’s.

frank

Thank you for the suggestion. I will have to review that as I do not really understand how to do what you are stating.

Wouldn’t it be easier to just asynch the AO CSS file?

Wouldn’t it be easier to just asynch the AO CSS file?

You can, but in that case your page will load without styles being applied at first, and only after the CSS is loaded your pages will look OK (the infamous “Flash Of Unstyled Content”). But you can easily test that; use inline&defer and leave the “inline”-field empty.

I will have to review that as I do not really understand how to do what you are stating.

Well, you might need someone familiar with PHP coding & WordPress filters to assist you on that.

frank

Would moving the CSS file to the footer cause the same “Flash Of Unstyled Content” issue?

I am trying to figure out how to test that…

Would moving the CSS file to the footer cause the same “Flash Of Unstyled Content” issue?

yes, but it would be slightly less noticable.

I am trying to figure out how to test that…

again with the API I’m afraid, cfr. this slightly adapted code from autoptimize_helper.php_example;

add_filter('autoptimize_filter_css_replacetag','roth_ao_override_css_replacetag',10,1);
function roth_ao_override_css_replacetag($replacetag) {
	return array("</body>","before");
	}

add something like that to your (child) theme’s functions.php (but theme updates will overwrite this) and see what happens ??

frank

Your responses are awesome! Thank you.

One last idea, if I add all of the ‘critical’ CSS into the above the fold option for all 3 templates, would that cause loading issues? Is there a ‘best practice’ on how to do this?

you mean manually combining all “critical” CSS for the 3 templates in one block of “inlined CSS” that would be applied for each request regardless of template used? I think that, on condition there are no conflicting styles in there, that could work actually.

frank

Thanks again!

So far, I think it is safe to assume that the idea to includes ‘all’ of the critical CSS in the inline and Defer option is working.

95/100 in PageSpeed Insights and good page load speeds.