Equipo Editorial | Utilidades.io
Desarrollamos herramientas prácticas, rápidas y gratuitas para el día a día.
Calcula la optimización en el tiempo de renderizado de la página al posponer el pintado del DOM fuera de pantalla.
Hemos diseñado esta herramienta para ayudar a desarrolladores y consultores SEO a visibilizar de forma clara los beneficios potenciales de adoptar la regla CSS content-visibility: auto. Cuando una página web contiene extensos listados, feeds de contenidos o documentos largos, el navegador gasta recursos valiosos calculando el diseño y pintando elementos que el usuario aún no está viendo.
Al aplicar la optimización de renderizado, logramos que el navegador reduzca significativamente la carga de procesamiento inicial:
En nuestras pruebas y desarrollos web, observamos habitualmente que posponer el trabajo de renderizado de bloques fuera de pantalla genera mejoras sustanciales en las métricas de Core Web Vitals sin comprometer la experiencia del usuario.
Es una propiedad de CSS que permite al navegador omitir el trabajo de renderizado (cálculo de layout y pintado) de los elementos que están fuera de la pantalla inicial (off-screen) hasta que el usuario se desplaza cerca de ellos, reduciendo notablemente el tiempo de carga inicial.
Estimamos el tiempo de renderizado basándonos en la cantidad total de secciones HTML complejas, el porcentaje de elementos que quedan fuera de la pantalla y la capacidad de procesamiento del dispositivo seleccionado.
Es fundamental acompañar esta propiedad con contain-intrinsic-size para asignarle una altura o tamaño estimado al elemento no renderizado. De lo contrario, la barra de desplazamiento puede comportarse de forma errática o causar cambios bruscos de diseño (CLS).