there’s no easy way (yet) Arek, but you can indeed use the autoptimize_filter_css_defer_inline filter (cfr. autoptimize_helper.php_example) and check for is_page/ is_home/ is_archive/ … 🙂
frank
Thank you for the quick reply.
I am going to use autoptimize_helper and autoptimize_filter_css_defer_inline and it should be working fine.
One question.
Does my custom ATF script for example home page using autoptimize_filter_css_defer_inline replace the common “above the fold script”(ATF) set in autoptimize settings?
I do not want to have 2 ATF scripts working on one page/post.
Thankx,
Arek
well, taking the example code and taking it a bit further, something like this explains what you can do;
add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
function my_ao_css_defer_inline($inlined){
if (is_home()) {
// overwrite the default a-t-f CSS
$out="h2,h1{color:red !important;}";
} else if (is_single()) {
// use default a-t-f CSS, justt adding some extra
$out=$inlined."h2{color:blue;}"
} else {
// use default a-t-f CSS for all other types
$out=$inlined;
}
}
hope this makes things a bit clearer 🙂
frank
That is a simple filter script but it could help others to optimize entire site easy way.
Thank you Frank once again.
Hi Frank
Thanks for the link and the filter.
Great.
regards
theo
Hi everyone
In the blog section of: http://www.wpfaster.org i found the link to a plugin called Per Page add to Head.
…making sure to use style tags and an ID that you exclude from Autoptimize.
This could be a temporary solution. I haven’t tested it though.
By the way, there is quite an instructive video on creating a-t-f css working with AO. Also by wpfaster.org
theo
hold off on the compliments; the example has a bug! there would never be any inline CSS returned 🙂
this should be better;
add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
function my_ao_css_defer_inline($inlined){
if (is_home()) {
// overwrite the default a-t-f CSS
$out="h2,h1{color:red !important;}";
} else if (is_single()) {
// use default a-t-f CSS, justt adding some extra
$out=$inlined."h2{color:blue;}"
} else {
// use default a-t-f CSS for all other types
$out=$inlined;
}
return $out;
}
Hi folks,
The method of using the Per Page Add to Head plugin does indeed work but is a pain in the as$ if you have a lot of pages/posts. It’s a great work-around, however, if you’re just starting your website or have a site with very few pages/posts.
Tick “Inline and Defer CSS?” in AO, leaving the text field blank. Then, as noted by timholz, add your critical CSS on a per-page basis with style tags and an ID that is excluded from AO. e.g.:
<style id="your-above-the-fold-css">your critical css here</style>
Protip: In per-page-add-to/perpagehead.php change line 113 to: add_action('wp_head', 'perpageath_display', 0);
😉
Be well,
AJ
I used it like this as the css is a bit large.
$home = file_get_contents(‘/css_home.txt’);
return $inlined. $home ;
but it doesn’t work.
can you copy/paste the entire blob of PHP here (or in a github gist or on pastebin) Cuta?
and also; if your atf css is “a bit large”, that might defeat the purpose. how large is “a bit large”?
okay I solved it by using
get_stylesheet_directory()
gosh I completely forgot it xD
How if we want to get filter by the Page ID instead of is_home or is_single (home already get 100 on google. Thank you so much). I use the page builder an has few page that need to fix atf css.
in that case you would probably have to do something like (warning; untested code):
if (is_post()) {
$postid = get_the_ID();
if ($postid == "131") {
$out="body{background-color:red};";
}
}
frank
