Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
That’s what I thought 🙂
Is there anyway to get the preconnect appearing before the fonts?
I have tried adding them manually into the header.php right before the <head> but AO seems to add the fonts before my preconnects no matter what i do.
Even if it would appear before the fonts, it would not really matter; as I see it preconnect is only useful for requests that occur later (i.e. deferred requests/ requests triggered by javascript/ requests from within CSS or -maybe- requests at the end of your HTML).
Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
Would the use of preconnect differ from that of dns-prefetch?
I ask because according to this (https://www.keycdn.com/blog/resource-hints) recommended uses of prefetch include google fonts (see section 2 – dns prefetching).
My understanding was that preconnect is basically a better version of prefetch which is why i was using it for the fonts.
preconnect indeed > dns-prefetch, as preconnect not only does the dns-lookup, but also establishes the tcp/ip and HTTP connection.
Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
My point was that in the previous comment you said it’s not useful for google fonts but keycdn says it is? Confused…
Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
Perhaps you forgot my original message? 🙂
I am unable to insert the preconnect before the fonts in the page source, even if i try adding it manually as AO always inserts the fonts before the preconnect.
I’m assuming that for preconnect to actually be useful it must be inserted before the fonts which your original reply seemed to suggest was the case.
right-o 🙂
so you could switch to autoptimize beta (on github) which has a filter (autoptimize_filter_extra_gfont_injectpoint) that allows you to alter the injection-point (which is now <link)?
Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
Is that filter on this page as i couldn’t find it?
https://github.com/futtta/autoptimize/
Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
$injectpoint = apply_filters( 'autoptimize_filter_extra_gfont_injectpoint', '<link' );
$out = substr_replace( $in, $fonts_markup . $inject_point, strpos( $in, $inject_point ), strlen( $inject_point ) );
unset( $fonts_collection );
This code will cause google fonts to be inserted after <link rel=”preconnect” ?
Do i just copy/paste the code, or do i need to modify the '<link' bit to link rel="preconnect"?
no, that code will (by default) inject the optimized Google Font code before the first <link tag but allows you to override that with a code snippet that hooks into that autoptimize_filter_extra_gfont_injectpoint filter 🙂
You can find more info on filters in WordPress here;
* https://www.wpbeginner.com/glossary/filter/
* https://docs.presscustomizr.com/article/26-wordpress-actions-filters-and-hooks-a-guide-for-non-developers
* https://developer.wordpress.org/reference/functions/add_filter/
hope this clarifies 🙂
frank
Thread Starter
Anonymous User 14978628
(@anonymized-14978628)
I think when the new AO version is released you might want to make this easier for people.
As currently if i use the settings in AO to preload fonts and preconnect the fonts, essentially the preconnect doesn’t have any effect as it occurs after the preload.
Speaking of preload, are we any closer to seeing AO css/js assets being preloaded?
