En esta guía, se examinan 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 los elementos de JavaScript y CSS que bloquean la visualizació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 se marquen como async o se agreguen mediante 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 representación inicial.
Evita las llamadas síncronas al servidor
Usa el método navigator.sendBeacon() para limitar los datos que envía XMLHttpRequests en controladores unload. Debido a que muchos navegadores requieren que esas solicitudes sean 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 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 manera fácil de solicitar datos de forma asíncrona. Debido a que aún no está disponible en todas partes, debes usar la detección de funciones para probar su presencia antes de usarlo. Este método procesa respuestas con promesas en lugar de varios controladores de eventos. A diferencia de la respuesta a una XMLHttpRequest, a partir de Chrome 43, una respuesta de recuperación 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>
Aplaza el análisis de JavaScript
A fin de minimizar la cantidad de trabajo que debe realizar el navegador para representar la página, aplaza las secuencias de comandos que no sean esenciales y que no sean fundamentales en la construcción del contenido visible para 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 representación de la página. Por ello, aplaza la 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 en el medio.
Optimizar el uso de CSS
Se requiere CSS 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 crítico (por ejemplo, impresión y otras consultas de medios), y que la cantidad de CSS crítica 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 de 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. Sin embargo, se deben evitar esas directivas, ya que generan recorridos adicionales en la ruta de acceso 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 los recorridos adicionales en la ruta crítica y, si se hace correctamente, puede proporcionar una longitud de ruta crítica de “un recorrido” en la que solo el HTML es un recurso de bloqueo.