Inline and defer CSS

  • Resolved jaromt

    (@jaromt)


    5 years, 11 months ago

    Hi,

    I have a WP multisite of 6 sites. Also I have a devel web which is the copy of 1 of that sites. Google Pagespeed results are very poor, so I am testing Inline and defer CSS option of Autoptimize. I inserted critical css and inserted this code to functions.php to defer css only on homepage.

    function critical_css_only_on_homepage() {
	if (is_front_page()) {
		return true;
	} else {
		return false;
	}
}
add_filter('autoptimize_filter_css_defer', 'critical_css_only_on_homepage', 10, 1);

    On devel web it reduced First Contentful Paint time by 0,8s for mobile and 0,2s for desktop. However on multisite web First Contentful Paint time remains the same. Autoptimize configuration is enabled per site and I added different critical css for each of that 6 sites. Where could be the problem?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 11 months ago

    well, if you look at the HTML of the homepage of multisite sites, do you see the critical CSS in there and is all other CSS preloaded?

    Thread Starter jaromt

    (@jaromt)

    5 years, 11 months ago

    Yes, there is
    <style id="aoatfcss" media="all"> ... critical CSS ... </style><link rel="preload" as="style" media="all" href="https://.../wp-content/cache/autoptimize/1/css/autoptimize_42df23188951651cefef522a6fbdc544.css" onload="this.onload=null;this.rel='stylesheet'" />

    • This reply was modified 5 years, 11 months ago by jaromt.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 11 months ago

    OK, in GPSI, does it still list “render blocking resources” and if so, which ones? JS-files maybe?

    Thread Starter jaromt

    (@jaromt)

    5 years, 11 months ago

    Yes, it still lists Eliminate render-blocking resources but only jquery and 1 other js file.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 11 months ago

    well, inline-and-defer is for CSS, so you’ll have to find a way to make those JS-files not render-blocking. for jQuery you could try to remove it from AO’s JS optimization exclusion list (and test to see if it works). for the other JS-file you could try asyncing it by adding it to the “async javascript” option on AO’s “Extra” tab.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Inline and defer CSS’ is closed to new replies.