Recursos que bloquean el renderizado
Silktide comprueba si hay hojas de estilo y scripts que el navegador debe descargar por completo antes de poder mostrar algo en tu página. Cada uno de ellos hace que los visitantes miren una pantalla en blanco un poco más de tiempo.
De forma predeterminada, una hoja de estilos o un script referenciados cerca de la parte superior de una página bloquean el renderizado: el navegador no pintará nada hasta que llegue el archivo, porque el archivo podría cambiar el aspecto o el comportamiento de todo.
Por qué es importante
Los instantes en blanco antes de que una página aparezca por primera vez son cuando los visitantes deciden si esperar. Cada archivo que bloquea añade un viaje de ida y vuelta por la red a ese tiempo en blanco, y los retrasos se acumulan rápidamente en conexiones móviles: un puñado de archivos bloqueantes puede mantener en blanco durante segundos una página por lo demás rápida.
La mayor parte de ese bloqueo es innecesario. Por lo general, solo se necesita una pequeña parte del de una página para dibujar la primera pantalla, y la mayoría del no necesita ejecutarse antes de que aparezca la página.
Cómo solucionarlo
- Carga los scripts sin bloquear añadiendo
defer(oasyncpara scripts independientes como los de analítica):
<!-- Problema: bloquea el renderizado hasta que se descargue y ejecute -->
<script src="app.js"></script>
<!-- Solución: se descarga en paralelo, se ejecuta después de que la página se haya analizado -->
<script src="app.js" defer></script>
- Incluye en línea la pequeña cantidad de CSS necesaria para la primera pantalla directamente en la página y carga las hojas de estilo completas sin bloquear.
- Añade un atributo
media(por ejemplo,media="print") a las hojas de estilo que solo se aplican en determinadas situaciones, para que dejen de bloquear el renderizado en el resto de casos. - Reduce lo que hay que bloquear: elimina estilos y scripts sin uso y mantén el resto pequeño; consulta Minificación de CSS y JavaScript minificado.
Cómo lo prueba Silktide
- Carga la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
- Identifica cada hoja de estilos y script que bloqueó el primer pintado de la página.
- Estima el tiempo que cada uno retrasó el renderizado e informa de cada archivo con su ahorro estimado.
- Califica la página según el tiempo total que podría ahorrarse: en torno a 100 milisegundos baja la nota, y 200 milisegundos o más se califica como deficiente.
Solución de problemas
¿El CSS no tiene que bloquear el renderizado?
La hoja de estilos que controla la primera pantalla sí lo hace; es intencionado, para que los visitantes no vean contenido sin estilos. La solución no es eliminar CSS, sino reducir lo que bloquea: incluye en línea la parte crítica y carga el resto de forma no bloqueante.
El archivo que bloquea es un script de terceros
Los gestores de etiquetas, las fuentes y los widgets de chat son infractores habituales. La mayoría funcionan correctamente con defer o async; consulta las instrucciones de inserción actuales del proveedor, que a menudo ya lo incluyen.