Is there a code snippet to move Font Awesome's stylesheet from the head to the top of the body?

Beaver Builder
1

Google’s Page Speed Insights so often lists Font Awesome as a render-blocking resource (with most of it’s CSS unused). It’s hard to not load it with BB as it’s used in the theme’s search icon and scroll to top icon and Page Builder’s menu module seem to load FA too even if icons are not used.

Perhaps if loaded in the body the delay would not be perceived and the time to load the Largest Contentful Paint item faster?

2

i guess you could dequeue it and either requeue it so it loads in the footer, or dequeue it and hard code it to wherever you like. Or use a kit, kits are js and only load the icons that are on the page rather than loading 2000 icons in case you need them.

3

I tried to dequeue. Something I have done before, but somehow every snippet I tried failed here. Or rather I did.

Are you talking this: Blog Awesome ? It looks to be a pro thing. I set off thinking this should be a simple thing to move a stylesheet and lost most of my day. Thanks for replying.

4

You should have asked mate:

add_action( 'wp_enqueue_scripts', function() {
  if ( ! isset( $_GET['fl_builder'] ) ) {
    wp_dequeue_style( 'font-awesome-5' );
    wp_deregister_style( 'font-awesome-5' );
  }
}, 100 );

That will dequeue FA for all pages unless the builder UI is open

1 Like
5

Brilliant, that works perfectly. Thank you.

6

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.