Principales problemas que causan el bloqueo de renderizado
La primera pregunta que se puede venir a la cabeza es ¿qué es el renderizado o bloqueo de renderizado?
El renderizado es el proceso por el cual el contenido de una página se convierte en su versión visual, lo que permite que esta se muestre en el navegador y los usuarios pueden ver e interactuar con la página web.
A través de la transformación de documentos HTML y otros recursos web Java Scrip y CSS), logramos que una página despliegue contenido dinámico, con un diseño específico y opciones de interacción para el usuario.
El bloqueo del renderizado ocurre cuando el navegador encuentra recursos que debe descargar y procesar antes de poder mostrar el contenido en pantalla. Esto suele suceder cuando ciertos archivos JavaScript o CSS, necesarios para que la página se vea correctamente, están configurados de manera que el navegador los procesa antes de continuar con el renderizado del contenido.
¿Qué suele causar el bloqueo del renderizado?
El bloqueo del renderizado suele estar relacionado principalmente con archivos de JavaScript y CSS:
- JavaScript: Los scripts se descargan y ejecutan antes de que el navegador pueda mostrar el contenido. Si están ubicados en la parte superior de la página o en el <head>, estos scripts pueden causar un retardo, ya que el navegador espera a que todos los scripts se procesen antes de continuar.
- CSS: Las hojas de estilo son esenciales para definir cómo se verá la página. Por lo tanto, el navegador necesita descargarlas y procesarlas antes de renderizar el contenido. Esto puede ser un problema si los archivos CSS son grandes o están alojados en servidores lentos, ya que el navegador no muestra nada hasta que las hojas de estilo estén listas.
¿Qué acciones hacer para optimizar el WPO y evitar el bloqueo del renderizado?
Usar los atributos “Async” y “defer” para mejorar el JavaScript
Los atributos `async` y `defer` son técnicas de optimización web utilizadas para mejorar el rendimiento de una página al controlar cómo y cuándo se cargan los archivos JavaScript. A continuación te explico cuándo y cómo utilizarlos para optimizar el tiempo de carga de una web (WPO, o Web Performance Optimization).
Atributo `defer`
El atributo `defer` es ideal cuando quieres que un script JavaScript se cargue en paralelo con otros elementos de la página, pero se ejecute *sólo después* de que el HTML haya sido completamente analizado. Esto evita el bloqueo de la carga de otros elementos de la página.
Características de `defer`:
– El script se descarga en paralelo con otros elementos de la página.
– Se ejecuta después de que el HTML esté completamente cargado.
– Permite que varios scripts con `defer` se ejecuten en el orden en que aparecen en el HTML.
– Ideal para scripts que dependen del DOM completo, como los que afectan al contenido visible de la página.
Cuándo usar `defer`:
– En scripts que necesitan acceso al DOM completo y no deben ejecutarse hasta que la página esté lista.
– En archivos de JavaScript que dependen de otros scripts y deben respetar el orden de ejecución.
– Para mejorar el rendimiento en scripts que no son críticos para el primer renderizado de la página.
Atributo `async`
El atributo `async` también carga el script en paralelo con otros elementos de la página, pero no espera a que el HTML esté completamente cargado antes de ejecutarse. Cuando un script con `async` termina de descargarse, se ejecuta inmediatamente.
Características de `async`:
– El script se descarga en paralelo con otros elementos de la página.
– Se ejecuta inmediatamente después de ser descargado, independientemente del estado del HTML.
– Los scripts marcados con `async` se ejecutan tan pronto como están disponibles, sin garantizar un orden específico entre ellos.
Cuándo usar `async`:
– En scripts que son independientes y no dependen del DOM o de otros scripts (por ejemplo, scripts de análisis o publicidad).
– Para scripts que pueden ejecutarse tan pronto como se descarguen y que no afectan la estructura de la página.
– En scripts que no dependen del orden de ejecución, ya que los `async` se ejecutan en el orden en el que terminan de descargarse, no necesariamente en el orden en que aparecen.
Resumen de Cuándo Usar `async` o `defer`
– Usa `async` para scripts que no dependen de otros scripts ni del DOM completo, como análisis (Google Analytics, etc.) o publicidad.
– Usa `defer` para scripts que necesitan el DOM completo pero no deben bloquear la carga de la página, como aquellos que afectan el contenido o la interfaz del usuario.
Consejo general: Para mejorar el WPO de una web, prioriza el uso de `async` para scripts externos que sean independientes y `defer` para scripts que necesiten cargar después del contenido HTML.
¿Cómo optimizar las fuentes de una web?
Existen varios métodos para optimizar las fuentes (fonts) de una página web, obviamente la directriz más clara es que no se deben de usar más de dos fuentes por página web.
1.Usar Google Fonts con Display Swap: Google Fonts permite cargar fuentes de manera optimizada, y la opción “display=swap” asegura que el texto se muestre en una fuente predeterminada mientras se carga la fuente personalizada, evitando tiempos de espera en el renderizado.
2.Reducir la cantidad de fuentes y estilos: Cada fuente y estilo adicional (negrita, cursiva, etc.) añade más peso al archivo y ralentiza la carga. Limítate a 1-2 fuentes principales con 2-3 estilos cada una.
3.Usar fuentes variables (variable fonts): Las fuentes variables permiten aplicar varios grosores y estilos con un solo archivo, lo que reduce significativamente el número de archivos necesarios y en consecuencia, también se reducen las solicitudes que tiene que realizar un servidor.
4.Preload de fuentes críticas: Si tienes una fuente esencial para el diseño inicial (como la fuente del menú o títulos), considera precargarla para que esté disponible en cuanto el navegador empiece a renderizar la página:
5.Servir las fuentes desde tu propio servidor: Aunque Google Fonts está optimizado para la velocidad, si quieres un control total, puedes alojar las fuentes en tu servidor y configurar una carga eficiente a través de archivos locales.
6.Convertir fuentes a formato WOFF2: Este es el formato más ligero y compatible con navegadores modernos, lo cual mejora la carga frente a formatos como TTF o OTF. Posiblemente es la técnica más usada para optimizar las fuentes.
Especialista en posicionamiento SEO y apasionado del enlazado interno y SEO técnico. “Evolucionar cada día y adaptarse para mejorar el en trabajo.”
