Font CSS URL not being set to CDN about autoptimize HOT 41 CLOSED

cdn'ing the font is in the code (cfr. https://github.com/futtta/autoptimize/blob/master/classes/autoptimizeStyles.php#L394-L412), but is off by default as fonts are subject to cross domain request policy and cdn's are considered another domain, which requires config on the cdn-site to work.

if you pass "true" to the autoptimize_filter_css_fonts_cdn filter, you should see the fonts served from cdn.

frank

from autoptimize.

code snippet for that filter;

add_filter('autoptimize_filter_css_fonts_cdn','cdn_fonts');
function cdn_fonts() { 
    return true; 
}

from autoptimize.

Were you able enable font CDN replacement with this method Jeff?

from autoptimize.

Thanks for checking in Frank. I haven't updated the site yet, just enjoying the post holiday rush quiet. :)

from autoptimize.

Do enjoy the end-of-year celebrations Jeff, all the best wishes! :-)

from autoptimize.

@futtta,

I have tested this. Indeed, CDN url font rewriting refuse to work regardless of autoptimize_filter_css_fonts_cdn set to true. The condition for entering the font URL rewriting code looks ok, which makes me think that this might be caused by the regex itself.

This used to work during our talk when developing #18. I had no time to investigate this further.

from autoptimize.

By the way, it used to work with the tests we did for #18 before 7218962.

The code at that time was:

// CDN the fonts!
if ((!empty($this->cdn_url))&&apply_filters("autoptimize_filter_css_fonts_cdn",false)) {
        $fontreplace = array();
        $fonturl_regex = <<<'LOD'
~(?(DEFINE)(?<quoted_content>(["']) (?>[^"'\\]++ | \\{2} | \\. | (?!\g{-1})["'] )*+ \g{-1})(?<comment> /\* .*? \*/ ) (?<url_skip>(?: data: ) [^"'\s)}]*+ ) (?<other_content>(?> [^u}/"']++ | \g<quoted_content> | \g<comment> | \Bu | u(?!rl\s*+\() | /(?!\*) | \g<url_start> \g<url_skip> ["']?+ )++ ) (?<anchor> \G(?<!^) ["']?+ | @font-face \s*+ { ) (?<url_start> url\( \s*+ ["']?+ ) ) \g<comment> (*SKIP)(*FAIL) | \g<anchor> \g<other_content>?+ \g<url_start> \K ((?:(?:https?:)?(?://[[:alnum:]\-\.]+)(?::[0-9]+)?)?\/[^"'\s)}]*+) ~xs
LOD;

        preg_match_all($fonturl_regex,$code,$matches);
        if (is_array($matches)) {
                foreach($matches[8] as $count => $quotedurl) {
                        $url = trim($quotedurl," \t\n\r\0\x0B\"'");
                        $cdn_url=$this->url_replace_cdn($url);
                        $fontreplace[$matches[8][$count]] = str_replace($quotedurl,$cdn_url,$matches[8][$count]);
                }
                if(!empty($fontreplace)) {
                        $code = str_replace(array_keys($fontreplace),array_values($fontreplace),$code);
                }
        }
}

from autoptimize.

this commit is the root cause; 0760b0e

now problem; got unexpected T_SL with 'LOD' (albeit on older versions of PHP, but still) and get preg_match_all(): Compilation failed: range out of order in character class at offset 68 with LOD ...

from autoptimize.

heredoc (LOD) vs nowdoc ('LOD') issue, should clearly be nowdoc to avoid any parsing of the regex. the problem (minor, given the passing of PHP<5.5) is that nowdoc "only" got introduced with PHP 5.3.

cfr. http://php.net/manual/en/language.types.string.php#language.types.string.syntax.nowdoc

from autoptimize.

Hello, where do we have to put this ?

add_filter('autoptimize_filter_css_fonts_cdn','cdn_fonts');
function cdn_fonts() { 
    return true; 
}

from autoptimize.

in your theme's functions.php (if you're not worried about it being overwritten). or you could use the code snippets plugin?

from autoptimize.

I added it in my child theme's functions.php but it does not make anything :(

from autoptimize.

I like to drop a little php file into the mu-plugins directory for these kinds of setting. By doing this I preserve the code when I switch between themes.

This is what I have in my wp-content/mu-plugins/auto-opt.php file right now

/**
 * Do we want to minify?
 * If set to false autoptimize effectively only aggregates, but does not minify.
 *
 * @return: boolean true or false
 */

function my_ao_js_minify() {
    return true;
}

add_filter( 'autoptimize_js_do_minify', 'my_ao_js_minify', 10, 1 );


/**
 * Stop autoptimize from optimizing, e.g. based on URL as in example.
 *
 * @return: boolean, true or false
 */
function my_ao_noptimize() {
    $optimize_the_page = true;

    if ( is_admin() ) {
        return false;
    }

    if ( defined( 'DONOTCACHEPAGE' ) && DONOTCACHEPAGE ) {
        error_log( __FUNCTION__ . ' do not cache page, no auto optimize' );
        $optimize_the_page = false;
    }

    return ! $optimize_the_page;
}

add_filter( 'autoptimize_filter_noptimize', 'my_ao_noptimize', 10, 0 );


/**
 * apply url to cdn fonts
 */
function cdn_fonts() { 
    return true; 
}

add_filter('autoptimize_filter_css_fonts_cdn','cdn_fonts', 10, 0 );

from autoptimize.

Exemple of what I am getting after ading the PHP code to functions.php : https://cdn.angristan.fr/wp-content/cache/autoptimize/css/autoptimize_46fe77cc7533973617044ceabbff9c01.css

from autoptimize.

hi angristan;
not sure what's going wrong, when testing the regex used to extract font url's on regex101 this does work with -an excerpt of- your CSS. If you want I can create a Gist with some debug-output in that function to better understand what is happening?

frank

from autoptimize.

angristan; do make sure you apply this change for font-CDN-replacement to work (small bug in 2.0)

from autoptimize.

I don't understand what do you mean with you regex. I modified what you told me but no changes.
I am ok for the debug :)

from autoptimize.

can you first and foremost have a peek in your php errorlog to see if anything bad by autoptimizeStyles is logged there?

from autoptimize.

Nothing in the log

from autoptimize.

Oh, in fact I have someting in my nginx log : http://hastebin.com/napojabiqo.log

from autoptimize.

well, then I guess you didn't to the change from d63cec2 after all?

$fonturl_regex = <<<LOD
on approx. line 400 in wp-content/plugins/autoptimize/classes/autoptimizeStyle.php should become
$fonturl_regex = <<<'LOD'

maybe double-check ;-)

If not; I just finished the version with debug-output (to wp-content/ao_log.txt);

            // CDN the fonts!
            $this->ao_logger("before replace fonts",false);
            if ((!empty($this->cdn_url))&&apply_filters("autoptimize_filter_css_fonts_cdn",false)) {
                $this->ao_logger("ready to replace fonts",false);
                $fontreplace = array();
                $fonturl_regex = <<<'LOD'
~(?(DEFINE)(?<quoted_content>(["']) (?>[^"'\\]++ | \\{2} | \\. | (?!\g{-1})["'] )*+ \g{-1})(?<comment> /\* .*? \*/ ) (?<url_skip>(?: data: ) [^"'\s)}]*+ ) (?<other_content>(?> [^u}/"']++ | \g<quoted_content> | \g<comment> | \Bu | u(?!rl\s*+\() | /(?!\*) | \g<url_start> \g<url_skip> ["']?+ )++ ) (?<anchor> \G(?<!^) ["']?+ | @font-face \s*+ { ) (?<url_start> url\( \s*+ ["']?+ ) ) \g<comment> (*SKIP)(*FAIL) | \g<anchor> \g<other_content>?+ \g<url_start> \K ((?:(?:https?:)?(?://[[:alnum:]\-\.]+)(?::[0-9]+)?)?\/[^"'\s)}]*+) ~xs
LOD;

                preg_match_all($fonturl_regex,$code,$matches);
                if (is_array($matches)) {
                    $this->ao_logger("found fonts, going through array",false);
                    foreach($matches[8] as $count => $quotedurl) {
                        $url = trim($quotedurl," \t\n\r\0\x0B\"'");
                        $this->ao_logger("cdn-ing: ".$url,false);
                        $cdn_url=$this->url_replace_cdn($url);
                        $fontreplace[$matches[8][$count]] = str_replace($quotedurl,$cdn_url,$matches[8][$count]);
                    }
                    if(!empty($fontreplace)) {
                        $this->ao_logger("str_replacing cdn'ed fonts",false);
                        $code = str_replace(array_keys($fontreplace),array_values($fontreplace),$code);
                    }
                } else {
                    $this->ao_logger("no fonts found",false);
                }
            } else {
                $this->ao_logger("no cdn set or filter not true",false);
            }

This should replace the block without debug-output in wp-content/plugins/autoptimize/classes/autoptimizeStyle.php.

frank

from autoptimize.

Of course I did ;)

I also have to put this code in my functions.php ?

from autoptimize.

the debug code goes in wp-content/plugins/autoptimize/classes/autoptimizeStyle.php (replacing the existing block),

but first of all; do you have any more errors in your nginx.log (in your screenshot the last visible one was yesterday at 17h48?

from autoptimize.

No, the last entry is from 2016/01/07 17:48:29.

from autoptimize.

ok, that's when you implemented the nowdoc-change, I guess?

next step; (assuming you have a CDN set in AO and you cleared caches to make sure this isn't a caching issue) edit wp-content/plugins/autoptimize/classes/autoptimizeStyle.php, and around line 394 replace the entire "cdn the fonts"-block with the code from #32 (comment)

from autoptimize.

I think I changed the line before, but this is possible. It's not a cache issue.

from autoptimize.

your log looks like this

root@lyra ~# cat /srv/wordpress/wp-content/ao_log.txt
before replace fonts
--
ready to replace fonts
--
found fonts, going through array
--
before replace fonts
--
ready to replace fonts
--
found fonts, going through array
--
before replace fonts
--
ready to replace fonts
--
found fonts, going through array
--
before replace fonts
--
ready to replace fonts
--
found fonts, going through array
--
before replace fonts
--
ready to replace fonts
--
found fonts, going through array
--

from autoptimize.

ok, can you try adding this:
add_filter('autoptimize_filter_css_inject_min_late','__return_false');

to your child theme's functions.php?

from autoptimize.

I keep this ?

add_filter('autoptimize_filter_css_fonts_cdn','cdn_fonts');
function cdn_fonts() { 
    return true; 
}

from autoptimize.

It works \o/

Just by putting add_filter('autoptimize_filter_css_inject_min_late','__return_false'); and even if I remove the filter above

This is your log. http://hastebin.com/xupoqehiki.log

from autoptimize.

Another bug : https://angristan.fr/wp-includes/js/wp-emoji-release.min.js is the last one that is not with the CDN URL. With isn't it with the big .js file ? http://tools.pingdom.com/fpt/#!/bc8GYT/https://angristan.fr

from autoptimize.

the wp-emoji-release.min.js file is injected by other JS and AO isn't supposed to change URL's inside JS, so I don't consider that a bug actually :-)

but do you need & want those pesky emoji's? else simply dequeue the hell out of them or install the disable emoji's plugin.

from autoptimize.

I don't know why, but the bug is back today. :(

Do you know any way to change the URL of wp-emoji-release.min.js btw ?

from autoptimize.

re. bug: you actually need the font-filter-thingie, it cannot work without that really :-)

re. emoji: a rewrite in your nginx config maybe?

from autoptimize.

I deleted your modifications in autoptimizeStyle.php to disable log.

By I still have

// Enable CDN for Autoptimize fonts
add_filter('autoptimize_filter_css_fonts_cdn','cdn_fonts');
function cdn_fonts() {
return true;
}
add_filter('autoptimize_filter_css_inject_min_late','__return_false');

in my functions.php.

Yep I think i'm gonna go for a rewrite but the utility of the CDN is decreased :/

from autoptimize.

Edit : everything is ok, thanks for the support ;)

from autoptimize.

heureusement ;-)

bonne weekend!
frank

from autoptimize.

À toi aussi :)

from autoptimize.

FYI this is not working on newest version. I tried setting $do_font_cdn in autoptimizeStyles.php and it just unpacked the entire JS/CSS compacted versions calling EVERYTHING separately through the CDN, not just the fonts. Not sure if its the regex, or the filter logic, but either way this should probably be a setting in the UI.

Thanks.

from autoptimize.

have you tried below code snippet @oinbar (using the code snippets plugins or in your child theme's functions.php);
add_filter('autoptimize_filter_css_fonts_cdn','__return_true');

from autoptimize.

I have tried below code but still it isn't working for me.
add_filter('autoptimize_filter_css_fonts_cdn','cdn_fonts'); function cdn_fonts() { return true; } add_filter('autoptimize_filter_css_inject_min_late','__return_false');

from autoptimize.