Menu Close

Update preloading CSS on WordPress site

Codeamend

Learn how to add an HTML <rel=preload> tag to the header in WordPress.

A function that I have used to enable preloading CSS effectively is:

/**
 * @snippet       Update preloading CSS on WordPress site
 */
function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
    return $html;

$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" 
id='$handle' href='$href' type='text/css' media='all' />
EOT;

return $html;
}

add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 ); 

Similarly you could try this for JS and Webfonts, but this has only been tested with CSS.

Posted in PHP, WordPress

You can also read...