Al día de la fecha, WordPress sigue encolando el CSS de los bloques por defecto de Gutenberg sin ningún tipo de optimización (defer, async o preload), lo cual hace saltar las alarmas de cualquier test de performance de sitios webs, ¿Cómo podemos resolverlo?
Simplemente basta con que agregues el siguiente bloque de código a tu functions.php
o plugin personalizado.
/**
* Función que agregar el preload a archivos CSS.
*/
function agregar_rel_preload( $html, $handle, $href, $media ) {
if ( is_admin() ) {
return $html;
}
// Aplicar rel preload solo a los assets que estén dentro de este array.
$assets = [ 'wp-block-library' ];
if ( ! in_array( $handle, $assets ) ) {
return $html;
}
$html = <<<EOT
<link rel='preload' as='style' id='$handle' href='$href' type='text/css' media='$media' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'agregar_rel_preload', 10, 4 );
Este código puede servirte para agrear el rel="preload"
de cuaqluier CSS, solo basta que agregues el handle
del fichero en el array
de la línea 10.
Deja una respuesta