Wordpress LScache Plugin: Font flicker despite fonts being preloaded
Last Updated on: Wed, 15 Apr 2026 00:00:02 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 arent 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: https://dev.get-business-online.com/behappyinlife/ Hi, Just curious here, what happens if you use .htaccess to send preload header to push fonts ? Best regards, With QUIC (HTTP/3), should this be an issue? Frankly, Im not sure how to do this, especially since its 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, Ive just looked at the page again and theres some JavaScript appearing ahead of the fonts, which may also be contributing to the delay. Hi, on the preload context, H2 H3 should work in same manner. please try add this into top of your .htaccess Header add Link 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, Ive tested adding the following: Header add Link rel=preload as=font type=font/woff2 crossorigin Header add Link rel=preload as=font type=font/woff2 crossorigin Header add Link 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: 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. Reason: Revised PHP code and results Looks like the culprit was Load CSS Asynchronously . When its set to OFF, theres no more flicker, even when fonts are simply included via preload link elements.
LiteCache Rush: Speed comes from using less, not from doing it faster
Reference