CSS urls block rendering

The quickest way to get the Webfont with CSS technology loaded in a non render-blocking way is probably to use a Font Awesome Kit. A kit loads the CSS asynchronously.

Is that an option for you?

Hello,

I too wish to eliminate the render blocking characteristics of the way in which the css files ‘font-awesome-official‘ and ‘font-awesome-official-v4shim‘ are loaded by ‘Official FontAwesome‘ Plugin.

I have tried the following strategies to only 50% success. I am able to eliminate the render blocking for ‘font-awesome-official’, but not ‘font-awesome-official-v4shim’.

Here’s what I’ve tried:

• Using a Font Awesome Kit via API Token which I plug into the ‘Official Font Awesome Plugin. (This is the method provided by @mlwilkerson and does not eliminate render blocking.)
• Dequeuing both files via Code Snippet. (This only works for the file ‘font-awesome-official’, it does not dequeue ‘font-awesome-official-v4shim’.)

Your assistance in this matter is greatly appreciated.
Thank you.

• This reply was modified 2 years, 3 months ago by MindCreatesMeaning.

Hi @xizor,

Ah, it looks like there’s one more step that would need to be taken to get the Kit to load in a non-render blocking way, and for a tool like Google PageSpeed Insights to report as such: add the defer and async attributes to the kit loader script tag.

The CSS itself is loaded by the kit script asynchronously.

Here’s a code snippet that could be added to a theme’s functions.php, for example, to add the defer and async attributes to the Kit loader script tag that is created by this plugin:

function fa_js_async_defer($html, $handle) {
	if( defined('FortAwesome\FontAwesome::RESOURCE_HANDLE') && FortAwesome\FontAwesome::RESOURCE_HANDLE === $handle ) {
		$revised_html = preg_replace(
			'/<script[\s]+(.*?)>/',
			'<script defer="true" async="true" \1>',
			$html
		);

		return $revised_html;
	}

	return $html;
}

add_filter(
	'script_loader_tag',
	'fa_js_async_defer',
	11,
	2
);

FYI: there’s an open feature request to add an option to enable adding these attributes to script elements automatically.