Hello @marcinek28,
Thanks again for reaching out, and for the patience.
I’m sharing the reply I got from our dev team in full.
We understand the desire to chase the perfect scores. However, it’s important to understand that those results are recommendations and suggestions, and not an absolute source of truth.
#1 OceanWP avoids using ‘swap’ for icons on purpose
Leaving out the ‘swap’ when it comes to Font Awesome icons was done on purpose, and this is not the case just with OceanWP, but there’s a reason for it.
Google’s PageSpeed is nothing more than an automated simulation that uses general scanning rules.
If the tool sees web font file formats, such as ‘.woff2’, it will automatically add a suggestion (or warning if you wish), that it must use ‘swap’ in order to remain visible while the text is loading.
However, icons are NOT text, and such tools don’t know the difference between a regular font like Roboto and an icon font like FontAwesome.
When you use the ‘swap’ rule in combination with regular fonts, your browser is using your own system fonts as a replacement until your actual font is loaded, so that the text is visible until the stylesheets are loading in the background.
But, when it comes to icons, the browser has absolutely nothing to swap the icons with since it’s not text.
#2 Available options
Basically, you have 3 options at your disposal:
1. You can continue using Font Awesome as is, with a better understanding how tools like PageSpeed operate and why this is “flagged” in the first place. And you can ignore the suggestion entirely.
2. Instead of using Font Awesome, you can opt-in for OceanWP SVG Icons, that you can enable via Customize > Site Style & Settings > Site Icons, then select OceanWP SVG Icons from the dropdown. Ensure this stylesheet is not disabled via Customize > Performance.
3. If you want to continue using Font Awesome icons, but only “remove” PageSpeed suggestions, you can apply the following snippet to your child theme’s functions.php file:
/**
* Force font-display: swap for OceanWP Font Awesome
*
*/
function oceanwp_master_fa_font_display_swap() {
// All FA variants.
$custom_css = "
/* Font Awesome 6 - Regular & Solid */
@font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'Font Awesome 6 Brands'; font-display: swap; }
/* Font Awesome 5 - Regular & Solid */
@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Brands'; font-display: swap; }
/* Legacy & v4 Compatibility Fonts */
@font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'FontAwesome'; font-display: swap; }
";
// Inline style injection via WordPress handles.
$handles = array('font-awesome', 'fontawesome', 'oceanwp-font-awesome');
foreach ( $handles as $handle ) {
if ( wp_style_is( $handle, 'enqueued' ) ) {
wp_add_inline_style( $handle, $custom_css );
}
}
// Force late header printing to prevent caching plugins from stripping the rules.
echo "<style id='oceanwp-fa-master-swap'>" . $custom_css . "</style>";
}
// Hook into enqueue and header printing lines to ensure entire coverage.
add_action( 'wp_enqueue_scripts', 'oceanwp_master_fa_font_display_swap', 999 );
add_action( 'wp_head', 'oceanwp_master_fa_font_display_swap', 9999 );
#3 Important disclaimer about using the step 3. ie. applying the PHP snippet
We need you to understand that if you choose to enforce the PHP snippet in order to remove the PageSpeed recommendations, the following may happen:
– some FA stylesheets may still load due to legacy FA versions, as well as older FA versions which are still kept for compatibility with other plugins.
– during page load, your icons may be displayed as boxes, or boxes with ‘text’, or the actual icon code may be displayed, until the stylesheets are loaded in full.
– this method may not only affect your users experience (seeing weird ‘text’ in place of icons) but it can also affect your CLS scores.
Crucial: after applying the snippet, you must clear cache on ALL levels: CDN, website (via hosting and/or caching plugins), and browser. You must also regenerate Critical CSS or Unused CSS if you have optimization plugins installed and are using these features.
Our recommendation in this case would be to either ignore the suggestions or use OceanWP SVG Icons instead of Font Awesome.
However, the final decision rests with you.
Best Regards
