Render Blocking CSS Resource

  • vdiff

    (@vdiff)


    7 years, 6 months ago

    My website is running super slow (20+ seconds to load any page). This primarily seems to be because of 1 render blocking CSS resource:

    https://fonts.googleapis.com/css?family=Lato:300,700|Overlock+SC

    I’d like to move this to the footer, or inline it, or maybe just delete it to solve the problem. But I cannot find this CSS resource anywhere. Please help!

Viewing 1 replies (of 1 total)
  • Joy

    (@joyously)

    7 years, 6 months ago

    It is likely used in your theme or one of the plguins.

    You can add a preconnect, but you need the style handle loading it. If you View Source on your site’s page, you should see the ID of the style where the font is loaded.

    /**
 * Add preconnect for Google Fonts.
 */
function myfont_resource_hints( $urls, $relation_type ) {
	if ( wp_style_is( 'my-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
		$urls[] = array(
			'href' => 'https://fonts.gstatic.com',
			'crossorigin',
		);
	}
	return $urls;
}
add_filter( 'wp_resource_hints', 'myfont_resource_hints', 10, 2 );
Viewing 1 replies (of 1 total)

The topic ‘Render Blocking CSS Resource’ is closed to new replies.