Fonts not preloaded
-
Despite all of the fonts on the page having the “early load” setting checked, I don’t see any
preload
links for the font files. On another site, I added those manually, and it made a noticeable difference in Lighthouse performance score.[To see more details in the code, bypass caching by adding
?nocache
to the URL]The page I need help with: [log in to see the link]
-
Hi Gal,
I’m able to replicate the issue on your site, but not on my local machine.
Could you share a screenshot of your settings? And anything that might be helpful, e.g. which other plugins are you using?
You can find all the information at https://imgur.com/a/xlUY3Ld.
I’ve done some debugging, and it turns out the line 210 in src/Frontend/Process.php evaluates to TRUE, which makes the loop skip the font. Here’s my debugging code and output:
echo "<!-- OMGF_UPLOAD_URL = " . OMGF_UPLOAD_URL . "\nOMGF_UPLOAD_DIR = " . OMGF_UPLOAD_DIR . " -->\n";
foreach ( $preload_variants as $variant ) {
$url = rawurldecode( $variant->woff2 );
/**
* @since v5.5.4 Since we're forcing relative URLs since v5.5.0, let's make sure $url is a relative URL to ensure
* backwards compatibility.
*/
$url = str_replace( [ 'http:', 'https:' ], '', $url );
/**
* @since v5.0.1 An extra check, because people tend to forget to flush their caches when changing fonts, etc.
*/
$file_path = str_replace( OMGF_UPLOAD_URL, OMGF_UPLOAD_DIR, apply_filters( 'omgf_frontend_process_url', $url ) );
echo "<!-- URL = $url\nFILE PATH = $file_path\ndefined( 'DAAN_DOING_TESTS' ) = " . defined( 'DAAN_DOING_TESTS' ) . ', file_exists( $file_path ) = ' . file_exists( $file_path ) . ', in_array( $url, $preloaded ) = ' . in_array( $url, $preloaded ) . "-->\n";
if ( ! defined( 'DAAN_DOING_TESTS' ) && ! file_exists( $file_path ) || in_array( $url, $preloaded ) ) {
echo "<!-- Continuing ... -->\n";
continue; // @codeCoverageIgnore
}
echo "<!-- Adding ... -->\n";
$preloaded[] = $url;
echo wp_kses(
"<link id='omgf-preload-$i' rel='preload' href='$url' as='font' type='font/woff2' crossorigin />\n",
self::PRELOAD_ALLOWED_HTML
);
$i ++;
}<!-- OMGF_UPLOAD_URL = https://dev.get-business-online.com/behappyinlife/wp-content/cache/omgf
OMGF_UPLOAD_DIR = /home/gboldev/public_html/behappyinlife/wp-content/cache/omgf -->
<!-- URL = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/lato-normal-latin-300.woff2
FILE PATH = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/lato-normal-latin-300.woff2
defined( 'DAAN_DOING_TESTS' ) = , file_exists( $file_path ) = , in_array( $url, $preloaded ) = -->
<!-- Continuing ... -->
<!-- URL = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/lato-normal-latin-400.woff2
FILE PATH = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/lato-normal-latin-400.woff2
defined( 'DAAN_DOING_TESTS' ) = , file_exists( $file_path ) = , in_array( $url, $preloaded ) = -->
<!-- Continuing ... -->
<!-- URL = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/lato-normal-latin-700.woff2
FILE PATH = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/lato-normal-latin-700.woff2
defined( 'DAAN_DOING_TESTS' ) = , file_exists( $file_path ) = , in_array( $url, $preloaded ) = -->
<!-- Continuing ... -->
<!-- URL = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/pt-sans-narrow-normal-latin-400.woff2
FILE PATH = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/pt-sans-narrow-normal-latin-400.woff2
defined( 'DAAN_DOING_TESTS' ) = , file_exists( $file_path ) = , in_array( $url, $preloaded ) = -->
<!-- Continuing ... -->
<!-- URL = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/raleway-normal-latin.woff2
FILE PATH = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/raleway-normal-latin.woff2
defined( 'DAAN_DOING_TESTS' ) = , file_exists( $file_path ) = , in_array( $url, $preloaded ) = -->
<!-- Continuing ... -->
<!-- URL = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/raleway-normal-latin.woff2
FILE PATH = //dev.get-business-online.com/behappyinlife/wp-content/cache/omgf/google-fonts/raleway-normal-latin.woff2
defined( 'DAAN_DOING_TESTS' ) = , file_exists( $file_path ) = , in_array( $url, $preloaded ) = -->
<!-- Continuing ... -->This is because the protocol (
http:
orhttps:
) is stripped from the URL before the replacement, but NOT fromOMGF_UPLOAD_URL
. Switching the order of this and thestr_replace()
fixes it.At some point, you must have started stripping protocols, but the value in my databases weren’t updated.
Oddly, the only place where this constant is defined is in src/Plugin.php with code that doesn’t rely on any database options:
define(
'OMGF_UPLOAD_URL',
apply_filters( 'omgf_upload_url', str_replace( [ 'http:', 'https:' ], '', WP_CONTENT_URL . '/uploads/omgf' ) )So what do we do now?
- This reply was modified 1 month ago by Gal Baras. Reason: Added more debugging
Using protocol relative URLs has been around for a while (since v5.5.0.) What happens if you refresh the cache (the orange button in the Task Manager section on OMGF’s settings screen)? That should update the stored src values for each font in your database as well.
Tried. Same thing. I can see the files in
wp-content/cache/omgf/google-fonts
, and they are definitely deleted and recreated, and the CSS file is loaded with references to the correct path, but nothing is preloaded, becauseOMGF_UPLOAD_URL
still has the protocol.When I use the
omgf_upload_url
filter, nothing changes :0Defining
OMGF_UPLOAD_URL
in wp-config.php givesUndefined constant "OMGF\OMGF_CURRENT_DB_VERSION" in ROOT/wp-content/plugins/host-webfonts-local/src/Plugin.php
, which means it cannot be overridden individually OR via a filter.The cache path used to be a setting, which is different in my case, and it is now being ignored, so that’s not a possible way to override the value.
I just can’t figure out where this constant is defined ??
I’m on a Litespeed server, and using PHP 8.2.23, if this makes any difference.
- This reply was modified 1 month ago by Gal Baras.
I’ve found the problem. I was defining the constants in a custom plugin and not removing the protocol.
Sorry for the hassle, although I’m not actually sure protocols should be removed.
Making the URLs protocol relative fixed an issue with servers behind reverse proxies. WordPress doesn’t deal with that very well, so the native is_ssl() function would always returns false, making the URLs start with https:// instead of https://. Other setups won’t even notice.
Happy you got it resolved, Gal!
- You must be logged in to reply to this topic.