En esta guía, se exploran las reglas de PageSpeed Insights en contexto: a qué debes prestarle atención cuando optimizas la ruta de acceso de representación crítica y por qué.
Elimina los elementos JavaScript y CSS que bloquean la renderización
Para que la primera renderización sea más rápida, minimiza y (cuando sea posible) elimina la cantidad de recursos críticos de la página, minimiza la cantidad de bytes críticos descargados y optimiza la longitud de la ruta de acceso crítica.
Optimiza el uso de JavaScript
Los recursos de JavaScript bloquean el analizador de forma predeterminada, a menos que estén marcados como async o se agreguen mediante un fragmento de JavaScript especial. El JavaScript que bloquea el analizador obliga al navegador a esperar el CSSOM y pausa la construcción del DOM, lo que puede demorar significativamente el tiempo de la primera representación.
Opta por recursos de JavaScript asíncronos
Los recursos asíncronos desbloquean el analizador de documentos y permiten que el navegador evite el bloqueo del CSSOM antes de ejecutar la secuencia de comandos. A menudo, si la secuencia de comandos puede usar el atributo async, también significa que no es esencial para la primera renderización. Se recomienda cargar secuencias de comandos de forma asíncrona después de la renderización inicial.
Evita las llamadas síncronas al servidor
Usa el método navigator.sendBeacon() para limitar los datos que envía XMLHttpRequests en los controladores unload. Debido a que muchos navegadores requieren que esas solicitudes sean síncronas, pueden ralentizar las transiciones de página, en ocasiones de manera notoria. En el siguiente código, se muestra cómo usar navigator.sendBeacon() para enviar datos al servidor en el controlador pagehide, en lugar de hacerlo en el controlador unload.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
El nuevo método fetch() proporciona una forma fácil de solicitar datos de forma asíncrona. Dado que aún no está disponible en todas partes, debes usar la detección de funciones para comprobar su presencia antes de usarla. Este método procesa las respuestas con promesas en lugar de múltiples controladores de eventos. A diferencia de la respuesta a una XMLHttpRequest, una respuesta de recuperación es un objeto de transmisión a partir de Chrome 43. Esto significa que una llamada a json() también muestra una promesa.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
El método fetch() también puede controlar solicitudes POST.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
Aplaza el análisis de JavaScript
A fin de minimizar la cantidad de trabajo que el navegador debe realizar para representar la página, aplaza las secuencias de comandos no esenciales que no sean críticas para construir el contenido visible de la renderización inicial.
Evita la ejecución prolongada de JavaScript
La ejecución prolongada de JavaScript bloquea el navegador y le impide construir el DOM, el CSSOM y representar la página, por lo que debes diferir hasta más adelante cualquier lógica y funcionalidad de inicialización que no sean esenciales para la primera representación. Si es necesario ejecutar una secuencia de inicialización prolongada, considera dividirla en varias etapas para permitir que el navegador procese otros eventos intermedios.
Optimiza el uso de CSS
CSS es necesario para construir el árbol de representación, y JavaScript a menudo bloquea la CSS durante la construcción inicial de la página. Asegúrate de que cualquier CSS que no sea esencial esté marcado como no esencial (por ejemplo, impresión y otras consultas de medios), y que la cantidad de CSS crítico y el tiempo para entregarlo sean lo más pequeños posible.
Colocar los recursos CSS en el encabezado del documento
Especifica todos los recursos CSS lo antes posible en el documento HTML, de modo que el navegador pueda detectar las etiquetas <link> y enviar la solicitud del CSS lo antes posible.
Cómo evitar importaciones de CSS
La directiva de importación de CSS (@import) permite que una hoja de estilo importe reglas de otro archivo de hojas de estilo. Sin embargo, evita estas directivas, ya que generan recorridos adicionales en la ruta crítica: los recursos CSS importados solo se detectan después de recibir y analizar la hoja de estilo CSS con la regla @import.
Inserta el código CSS que bloquea la visualización
Para obtener el mejor rendimiento, te recomendamos intercalar el CSS crítico directamente en el documento HTML. Esto elimina los recorridos adicionales en la ruta crítica y, si se hace correctamente puede proporcionar una longitud de ruta crítica de “un recorrido” cuando solo el HTML es un recurso de bloqueo.