Font flicker despite fonts being preloaded

  • Resolved Gal Baras

    (@galbaras)


    5 years, 6 months ago

    I use the CAOS plugin to load Google fonts from the same domain, and the plugin inserts link tags with rel="preload". However, despite this, pages show a “font flicker” when they load if the fonts aren’t in the browser cache.

    This effect may go away if those link elements appear before any CSS, including CCSS.

    There is certainly a tradeoff for this on sites that use HTTP/1, but on sites using HTTP/2 or QUIC, this should improve page rendering and speed scores by preventing the unnecessary redraws.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support qtwrk

    (@qtwrk)

    5 years, 6 months ago

    Hi,

    Just curious here, what happens if you use .htaccess to send preload header to push fonts ?

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    5 years, 6 months ago

    With QUIC (HTTP/3), should this be an issue?

    Frankly, I’m not sure how to do this, especially since it’s done by a plugin. Also, making this change manually on every site will be a hassle.

    Honestly, this is just another case of the LightSpeed Cache plugin changing the order in which things appear on the page.

    If this is not detected automatically, at least provide a setting where preloaded resources can be listed, that will then appear ahead of the stylesheet.

    Also, I’ve just looked at the page again and there’s some JavaScript appearing ahead of the fonts, which may also be contributing to the delay.

    Plugin Support qtwrk

    (@qtwrk)

    5 years, 6 months ago

    Hi,

    on the preload context, H2 H3 should work in same manner.

    please try add this into top of your .htaccess

    Header add Link "</fonts/poppins.woff2>; rel=preload; as=font; type=font/woff2; crossorigin"

    change path and type to your actual ones , this will push font before HTML page , and see what happens by then

    Best regards,

    Thread Starter Gal Baras

    (@galbaras)

    5 years, 6 months ago

    I’ve tested adding the following:

    
Header add Link "</behappyinlife/wp-content/cache/omgf-webfonts/lato-300-normal-iPGQ.woff2>; rel=preload; as=font; type=font/woff2; crossorigin"
Header add Link "</behappyinlife/wp-content/cache/omgf-webfonts/raleway-400-normal-0ITw.woff2>; rel=preload; as=font; type=font/woff2; crossorigin"
Header add Link "</behappyinlife/wp-content/cache/omgf-webfonts/pt-sans-narrow-400-normal-GwR0.woff2>; rel=preload; as=font; type=font/woff2; crossorigin"

    The text still re-renders, and the font files are still loaded after 3 stylesheets.

    Also, again, it would be better if I could send custom headers from PHP, where I can write generic code that will work on every site, rather than manually update .htaccess files.

    So I tested this code in functions.php:

    
add_action( 'send_headers', 'custom_preload_link_headers' );
function custom_preload_link_headers() {
	$path = '/wp-content/cache/omgf-webfonts/';
	$fonts = array( 'lato-300-normal-iPGQ', 'raleway-400-normal-0ITw', 'pt-sans-narrow-400-normal-GwR0' );
	foreach ( $fonts as $font ) {
		header( 'Link: <' . home_url( $path ) . $font . '.woff2>; rel=preload; as=font; type=font/woff2; crossorigin', false );
	}
}

    This worked great, and it gives you a way to preload specific files, listed in a new “preload” setting, using PHP in the plugin OR the ability to replace preload links in the HTML with preload headers.

    • This reply was modified 5 years, 6 months ago by Gal Baras. Reason: Revised PHP code and results
    Thread Starter Gal Baras

    (@galbaras)

    5 years, 6 months ago

    Looks like the culprit was “Load CSS Asynchronously”. When it’s set to OFF, there’s no more flicker, even when fonts are simply included via preload link elements.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Font flicker despite fonts being preloaded’ is closed to new replies.