预加载WooCommerce star.woff字体

Question

Google的PageSpeed Insights告诉我WooCommerce star.woff字体使我的网站加载速度变慢，建议我使用<link rel=preload>标签节省大约1.95s的时间。有人可以告诉我如何在不弄乱插件文件的情况下将此标签应用于WooCommerce字体吗？

Answer 1

更好的解决方案是将以下行添加到[your-theme] /header.php

<link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">

Answer 2

几天后，我找到了解决方案。我不确定这是否是最好的解决方案，但是它对我有用，所以我会把它留在这里，以防它对某人有所帮助。

将以下钩子添加到您的functions.php中以使字体排队，WordPress将使用<link rel=preload>标签将链接添加到标题。

// Enqueue Your Font
function my_queue_items() {
wp_enqueue_style( 'rating-stars', '/wp-content/plugins/woocommerce/assets/fonts/star.woff', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_queue_items', 99 );

// Add Crossorigin Attribute To Your Font
function style_attributes( $html, $handle ) {
if ( 'rating-stars' === $handle ) {
return str_replace( "media='all'", "media='all' crossorigin='anonymous'", $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'style_attributes', 10, 2 );

这为我节省了1秒钟的加载速度。