Using inline and defer API override global per page

  • Resolved lutechi

    (@lutechi)


    9 years, 4 months ago

    Hello Frank,

    I am taking your suggestion of using the API to override the critical CSS per page and I found a code awhile ago that is supposed to fix my problem but is not overriding the whole global critical CSS.

    This is the code I am using:

    add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
function my_ao_css_defer_inline($inlined) {
	if (strpos($_SERVER['REQUEST_URI'],'/how-it-works/')!==false) {
		return $inlined."h2,h1{color:red !important;}";
	} else {
		return $inlined;
	}
}

    While it works, it is adding at the end of the existing global critical CSS that I put in the plugin settings. I can delete the whole global and do this per page, but I would like to have a backup critical CSS while I go fixing page by page the CSS and also it would create FOUC until I get to those pages.

    Also I was wondering if is possible to do this, how do I add more pages to that function without duplicating an entire function? I was thinking of using elseif per page.

    I appreciate the help as always, I am just not sure why it is not overriding it all per page.

    Thanks in advance

    https://www.ads-software.com/plugins/autoptimize/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Frank Goossens

    (@futtta)

    well, you could do something like;

    function my_ao_css_defer_inline($inlined) {
	if (strpos($_SERVER['REQUEST_URI'],'/how-it-works/')!==false) {
		return "h2,h1{color:red !important;}"; // so no $inlined
	} elseif (strpos($_SERVER['REQUEST_URI'],'/other-url/')!==false {
		return "h2,h1{color:blue !important;}"; // other css, still no $inlined
	} else {
		return $inlined; // only inlined if not matching
	}
}

    let me know how that works for you.

    kind regards,
    frank

    Thread Starter lutechi

    (@lutechi)

    Thanks for the quick response.

    It did not work, the page keeps coming up with the global CSS but this time without the extra CSS at the end from the function. I guess because is not attached after the function like before. The style is nowhere in the source of the page, so is like it never fired up.

    Thread Starter lutechi

    (@lutechi)

    Also forgot to add, the elseif line is bringing up an error:

    Parse error: syntax error, unexpected '{' in /home..

    I changed it to a real page name, so is not related to the url. I had to remove the line to test it.

    Plugin Author Frank Goossens

    (@futtta)

    yeah, probably the error that’s messing things up, that’ll teach me to just put untested code up on the forum ??

    so try with this untested snippet;

    add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
function my_ao_css_defer_inline($inlined) {
	if (strpos($_SERVER['REQUEST_URI'],'/how-it-works/')!==false) {
		return "h2,h1{color:red !important;}";
	} elseif (strpos($_SERVER['REQUEST_URI'],'/other-url/')!==false) {
		return "h2,h1{color:blue !important;}";
	} else {
		return $inlined;
	}
}

    frank

    Thread Starter lutechi

    (@lutechi)

    OMG yes, it works!

    Haha, thanks Frank! I see what happened there lol. I did not catch it either cause I’m not a pro in php, I’m more of a designer “jack of all trades, master of none”.

    Woot now the not so fun part lol, exporting page by page critical css. I wish there was an automatic for that too. I found a plugin that supposedly does it automatically but it has to have extra stuff installed on server side, so I can’t test it on shared hosting. Maybe someone makes one without extra installs. ??

    Thank you so much. Now will be closer to 100 in page speed yay.

    Have wonderful day.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Using inline and defer API override global per page’ is closed to new replies.

Tags