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, 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 crítica.
Optimiza el uso de JavaScript
Los recursos de JavaScript bloquean el analizador de forma predeterminada, a menos que esté marcado como async o se haya agregado mediante un fragmento 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 representación. Considera cargar secuencias de comandos de forma asíncrona después de la primera representación.
Evita las llamadas síncronas al servidor
Usa el método navigator.sendBeacon() para limitar los datos que envía XMLHttpRequests en
unload. Debido a que muchos navegadores requieren que esas solicitudes
síncronas, pueden ralentizar las transiciones de página, a 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 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 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 le impide construir el DOM y el CSSOM, y representar la página. Por lo tanto, se debe diferir cualquier lógica de inicialización que no sea esencial 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 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
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.
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 integrar el CSS crítico 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.