Fecha de publicación: 17 de agosto de 2018
En esta guía, se analizan las reglas de PageSpeed Insights en contexto: a qué debes prestar atención cuando optimices la ruta de acceso de renderización crítica y por qué.
Elimina el código JavaScript y CSS que bloquea la representación
Para lograr el menor tiempo en la primera representación, debes minimizar y (cuando sea posible) eliminar la cantidad de recursos críticos de la página, minimizar la cantidad de bytes críticos descargados y optimizar la longitud de la ruta crítica.
Optimiza el uso de JavaScript
Los recursos de JavaScript bloquean el analizador de forma predeterminada, a menos que se marquen como async o se agreguen con un fragmento de JavaScript especial. El código JavaScript que bloquea el analizador obliga al navegador a esperar al CSSOM y detiene la construcción del DOM, lo que a su vez puede retrasar considerablemente 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. Considera cargar secuencias de comandos de forma asíncrona después de la primera representación.
Evita las llamadas sincrónicas de servidores
Usa el método navigator.sendBeacon() para limitar los datos que envía XMLHttpRequests en controladores unload. Debido a que para muchos navegadores es necesario que esas solicitudes sean síncronas, estos pueden retardar las transiciones de página, algunas veces de forma 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 método fetch() proporciona una mejor manera de solicitar datos de forma asíncrona. fetch() procesa respuestas con promesas en lugar de varios controladores de eventos. A diferencia de la respuesta a una XMLHttpRequest, una respuesta fetch() es un objeto de transmisión. 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>
Diferir el análisis de JavaScript
Para minimizar la cantidad de trabajo que debe realizar el navegador para representar la página, deben diferirse las secuencias de comandos que no sean esenciales ni críticas para la construcción de contenido visible en la representación inicial.
Evita ejecutar JavaScript de larga duración
La ejecución prolongada de JavaScript bloquea el navegador y no construya el DOM, el CSSOM ni la renderización de la página. Por lo tanto, aplaza cualquier lógica de inicialización que no sea esencial para la primera representación hasta más adelante. Si es necesario ejecutar una secuencia de inicialización prolongada, considera dividirla en varias etapas para permitir que el navegador procese otros eventos entre medio.
Optimiza el uso de CSS
CSS es necesario para construir el árbol de renderización y JavaScript a menudo bloquea la CSS durante la construcción inicial de la página. Asegúrate de que el CSS que no sea esencial esté marcado como no crítico (por ejemplo, impresión y otras consultas de medios), y que la cantidad de CSS crítico y el tiempo necesario para proporcionarlo sean lo más acotados posible.
Colocar los recursos CSS en el encabezado del documento
Todos los recursos CSS se deben especificar lo antes posible en el documento HTML, de modo que el navegador pueda detectar las etiquetas <link> y enviar la solicitud de CSS cuanto antes.
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 hojas de estilo. Sin embargo, se deben evitar esas directivas porque 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 que integres la CSS crítica directamente en el documento HTML. Esto elimina la posibilidad de generar recorridos adicionales en la ruta crítica y, si se hace correctamente, se puede usar para proporcionar una extensión de ruta de acceso crítica de “un recorrido” cuando solo el lenguaje HTML actúe como recurso de bloqueo.