Localiza la ruta crítica
Las hojas de estilo y los scripts síncronos pueden bloquear el renderizado cuando el navegador los necesita antes de construir o pintar la página. La respuesta correcta depende de si el recurso es necesario para la vista inicial. Quitar una petición de un informe sin conservar los estilos o el comportamiento necesarios solo traslada el problema a otro punto.
Cómo revisarlo
Captura una traza de carga de la página e identifica qué recursos preceden al primer renderizado, cuáles se usan de verdad por encima del pliegue y si la respuesta del servidor o el trabajo en el hilo principal domina el retraso. Haz la prueba con la caché vacía y con una conexión representativa. Los datos de laboratorio diagnostican la ruta; los datos de campo muestran si los visitantes la sufren de verdad.
Cómo implementar o mejorar
Incorpora en línea solo el CSS crítico pequeño que necesita la vista inicial, difiere el código no crítico cuando sea seguro y reduce el código sin usar en su origen. Después de cada cambio, comprueba que la página esté visualmente completa, que el teclado funcione, que la interacción no tenga errores y que no aparezcan desplazamientos de diseño nuevos.
Límites y errores habituales
El error habitual es diferir todos los scripts u hojas de estilo. Los recursos críticos lo son porque la página inicial los necesita; en lugar de eso, haz la dependencia más pequeña y deliberada.
La revisión empieza con una cascada de carga y una traza, no con una regla general de «difiere el JavaScript». Identifica el primer estado visual útil, enumera el CSS, las fuentes y los scripts necesarios para crearlo, y separa ese conjunto pequeño de los recursos que se piden más tarde. Una hoja de estilo que define la navegación inicial puede ser crítica; una biblioteca de carrusel bajo el pliegue no lo es. Revisa la prioridad de las peticiones, el tiempo de respuesta, los bytes sin usar y las tareas del hilo principal. Para implementar, reduce o divide el estilo sin usar en su origen, precarga solo un recurso que la primera vista necesite de verdad, y difiere un recurso solo después de comprobar que la página inicial sigue con estilos e interactiva. Vuelve a probar con la caché vacía, con una conexión limitada y con la navegación por teclado. Si un cambio de fuente altera los saltos de línea, registra también ese efecto en el diseño, no solo el tiempo de carga. El resultado que hay que verificar es una primera vista completa y utilizable, no simplemente un número menor de advertencias.
Ejemplo concreto: un listado de productos carga una hoja de estilo global, una hoja de estilo pequeña del encabezado, una fuente web, un componente de ordenación y una galería bajo el pliegue. En la cascada, confirma que las dos primeras hojas de estilo se usan realmente antes de la primera pintura; pueden ser candidatas a un paquete crítico reducido. El script de la galería no debe retrasar el encabezado ni la cuadrícula de productos si la galería no está visible. No incorpores en línea toda la hoja de estilo global: duplicaría bytes y dificultaría la caché. En su lugar, extrae solo las reglas necesarias para la vista inicial, carga la hoja principal de forma normal y prueba la transición cuando llegue. Vuelve a generar la cascada tras el despliegue y revisa si aparece un parpadeo de texto sin estilo, contornos de foco ausentes o desplazamientos de diseño. Un cambio se acepta solo si la página se pinta correctamente y las interacciones posteriores siguen funcionando.