Fecha de publicación: 17 de agosto de 2018
En esta guía, se examinan las reglas de PageSpeed Insights en contexto: a qué debes prestar atención cuando optimizas la ruta de renderización crítica y por qué.
Elimina los elementos de JavaScript y CSS que bloquean la visualización
Para obtener el tiempo más rápido para la primera renderización, minimiza y (siempre que sea posible) elimina la cantidad de recursos críticos en la página, minimiza la cantidad de bytes críticos descargados y optimiza la longitud de la ruta crítica.
Optimiza el uso de JavaScript
Los recursos de JavaScript se bloquean de forma predeterminada, a menos que se marquen como async o se agreguen con un fragmento de JavaScript especial. El bloqueo de JavaScript del analizador obliga al navegador a esperar el CSSOM y pausa la construcción del DOM, lo que, a su vez, puede retrasar significativamente el tiempo de renderización inicial.
Cómo preferir recursos asíncronos de JavaScript
Los recursos asíncronos desbloquean el analizador de documentos y permiten que el navegador evite el bloqueo en 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. Considera 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ían XMLHttpRequests en los controladores unload. Debido a que muchos navegadores requieren que estas solicitudes sean síncronas, pueden ralentizar las transiciones de página, a veces de forma notable. En el siguiente código, se muestra cómo usar navigator.sendBeacon() para enviar datos al servidor en el controlador pagehide en lugar del controlador unload.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
El método fetch() proporciona una mejor manera de solicitar datos de forma asíncrona. fetch() procesa las respuestas con promesas en lugar de varios controladores de eventos. A diferencia de la respuesta a un XMLHttpRequest, una respuesta fetch() es un objeto de flujo. 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>
Cómo aplazar el análisis de JavaScript
Para minimizar la cantidad de trabajo que el navegador debe realizar para renderizar la página, aplaza las secuencias de comandos no esenciales que no sean fundamentales para la construcción del contenido visible para la renderización inicial.
Evita JavaScript de larga duración
El código JavaScript de larga duración impide que el navegador construya el DOM, el CSSOM y renderice la página, por lo que debes aplazar hasta más adelante cualquier lógica de inicialización que no sea esencial para la primera renderización. Si se debe ejecutar una secuencia de inicialización larga, considera dividirla en varias etapas para permitir que el navegador procese otros eventos en el medio.
Optimiza el uso de CSS
El CSS es necesario para construir el árbol de renderización, y JavaScript suele bloquearse en CSS durante la construcción inicial de la página. Asegúrate de que el CSS no esencial esté marcado como no crítico (por ejemplo, impresión y otras consultas de medios) y de 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 de CSS lo antes posible dentro del documento HTML para que el navegador pueda descubrir las etiquetas <link> y enviar la solicitud del CSS lo antes posible.
Evita las importaciones de CSS
La directiva de importación de CSS (@import) permite que una hoja de estilo importe reglas de otro archivo de hoja de estilo. Sin embargo, evita estas directivas porque introducen viajes de ida y vuelta adicionales en la ruta crítica: los recursos CSS importados se descubren solo después de que se recibe y analiza la hoja de estilo CSS con la regla @import.
Inserta el código CSS que bloquea la visualización
Para obtener un mejor rendimiento, te recomendamos que analices la posibilidad de intercalar el CSS fundamental directamente en el documento HTML. Esto elimina los recorridos adicionales en la ruta crítica y, si se hace correctamente, puede entregar una ruta crítica de "un recorrido de ida y vuelta" en la que solo el HTML es un recurso de bloqueo.