Author : Jhon
Publicado : 2 abril, 2022
Cuando decidimos empezar a optimizar el tiempo de carga para nuestro sitio web de wordpress recurrimos a PageSpeed, al iniciarlo veremos el reporte y en el veremos el apartado:
Elimina los recursos que bloqueen el renderizado
Esta regla se activa cuando PageSpeed Insights detecta que en una página se incluyen hojas de estilo externas que bloquean el renderizado, lo que aumenta el tiempo que tarda la página en renderizarse por primera vez.
Descripción
Para renderizar el contenido de las páginas, los navegadores deben procesar primero toda la información sobre el estilo y el diseño de dichas páginas. Por tanto, no pueden empezar a renderizar el contenido hasta que descarguen y procesen todas las hojas de estilo externas, lo que puede requerir varios ciclos de ida y vuelta y, en consecuencia, retrasar el primer renderizado.
En la pagina oficial de google Page Speed podemos ver algunas recomendaciones:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=es
Estas recomendaciones básicamente consisten en utilizar un script para hacer la precarga de todos los archivos css que permitan mostrar nuestro sitio web sin tener que esperar a que se carguen todos estos archivos, el script es este:
<script> var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); </script>
Y el link para subir el archivo css debe estar dentro de una etiqueta «<noscript></noscript>» esta etiqueta debe tener el id «deferred-styles», algo así:
<noscript id="deferred-styles"> <link rel="stylesheet" type="text/css" href="small.css"/> </noscript>
ahora como hacer para aplicar esto de forma masiva a todos nuestros archivos css si están encolados con la función wp_enqueue_style()
Como vemos en la imagen esa seria la forma de encolar nuestros archivos css y esto nos daría como resultado un link como este:
<link rel='stylesheet' id='bootstrap-min-css' href='/wp-content/themes/atr_theme/helpers/bootstrap_4.1.3/css/bootstrap.css?ver=4.0.0' type='text/css' media='all' />
para cargar nuestros archivos css de forma asincrona debemos de cambiar los tag o atributos de este link para obtener algo así:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'; this.onload=null;">
Esto podemos verlo en la documentación oficial de la función loadCSS() de javascript de github:
https://github.com/filamentgroup/loadCSS/blob/master/README.md
Así que para conseguirlo vamos a realizar los siguientes pasos:
Paso 1:
Vamos a dejar el ultimo parámetro de la función wp_enqueue_style() que es «all» como esta y no lo vamos a cambiar, pero si vamos a ir a nuestro archivo functions.php y vamos a crear la siguiente función:
function atr_css_rel_preload( $html, $handle, $href, $media ) {
if ( ! is_admin() ) {
$html = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel=\'stylesheet\'">'
. '<noscript id="deferred-styles">' . $html . '</noscript>';
}
return $html;
}
add_filter( 'style_loader_tag', 'atr_css_rel_preload', 10, 4 );
Esta función lo que hare será modificar el link en el hook «style_loader_tag», así añadimos el preload y envolvemos todos los link dentro de las etiquetas <noscript id=»deferrer-styles»>
Paso 2:
Ahora lo siguiente será que hagamos que los archivos css se carguen después del renderizado inicial de la pagina web, para ello utilizaremos el script que nos ofrece PageSpeed y que vimos al principio de la entrada.
Así que ahora iremos al <head> de nuestro código y justo antes de cerrar esta etiqueta pondremos el script:
<script> var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); </script>
Con esto tendríamos una completa optimización de nuestro css que se puede comprobar luego al hacer el test en PageSpeed.
Deja una respuesta