Topic-icon CSS in the document body adversely impacts rendering performance.

Active Subscriptions:

None
CSS in the document body adversely impacts rendering performance.
Link node jfbconnect.css should be moved to the document head in (website)


This error shows up in Google audit with warnings about load-speed being affected.

The issue has been raised in the past, but I haven't seen any instructions on how to fix it.
Some guidance would be appreciated.
The topic has been locked.
Support Specialist
We don't have a way to prevent the jfbconnect.css file from being shown inline in the body of the page yet. We're working toward improved inclusions of our assets, and this is one task we have planned for the 6.2 release, this summer.

In the meantime, you can try the following minor code change which will prevent the CSS from being shown in the body. Depending on your settings, the file may be included in the head already and/or the CSS may not even be required for your display. Testing this may work for you to prevent it from loading and get you going until we have the final solution implemented later this summer.

To make the change, edit the /components/com_jfbconnect/libraries/provider.php file. Around line 189, you'll see:
$newText = '<link rel="stylesheet" href="' . JUri::root(true) . '/components/com_jfbconnect/assets/jfbconnect.css" type="text/css" />';
Edit that to:
$newText = '<link rel="stylesheet" href="' . JUri::root(true) . '/components/com_jfbconnect/assets/jfbconnect.css" type="text/css" />';
$newText = '';
I hope that helps, but if you need more help or have any other feedback, let us know.

Finally, just so you know, a small inclusion of a CSS file inline would cause an almost immeasurable delay in the loading of the page. Most browsers nowadays will load CSS files in parallel instead of 'blocking' as they used to. While it is best to have all CSS in the head, in the body really doesn't make a huge difference.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
Hi Alex
It worked a treat!
Brilliant!

Thanks
Julie
The topic has been locked.
Support Specialist
Glad to hear that helped. The next big release, v6.1, will have some big improvements in our CSS inclusion as well to prevent it from happening multiple times (which can happen in some corner cases) and *should* always be included in the head section, but we're still finalizing that.

If you need anything else though, as always, just let us know.

Thanks,
Alex
The topic has been locked.