Desde la introducción de Lighthouse, han surgido nuevos parámetros relacionados con la velocidad de la página. Uno de los parámetros más importantes es First Contentful Paint (FCP). En la versión 10 de Lighthouse, vigente a partir de junio de 2024, el impacto de FCP en la puntuación general es del 10%.
Para adoptar y comprender el FCP como una métrica, es esencial examinar primero la psicología detrás de él. El concepto es similar al espejos instalados en ascensores:
Para resumir brevemente: en la primera mitad del siglo XX, el uso de ascensores en edificios altos aumentó significativamente, pero los sistemas de ascensores eran primitivos en comparación con los actuales. Por ello, surgió la idea de instalar espejos en los ascensores para que el tiempo de permanencia en el ascensor pareciera más corto.
Volviendo a nuestro tema: El punto que perceptivamente te hace esperar durante el tiempo de carga al intentar acceder a una página es FCP. La definición de First Contentful Paint es el tiempo que tarda en mostrarse al usuario el primer texto, imagen, lienzo que no sea blanco, etc.. La unidad de FCP es segundos.
En Lighthouse, la escala de colores para FCP se determina de la siguiente manera:
- 0-2 segundos: Verde => Rápido
- 2-4 segundos: Naranja => Necesita mejorar
- 4+ segundos: Rojo => Lento
Según los datos de HTTP Archive, la cantidad de sitios que se pueden considerar rápido es 25%, y el 50% de los sitios existentes están clasificados como lentos.
¿Qué se puede hacer para mejorar el FCP?
Reducir el tiempo de respuesta del servidor
Generalmente, esto puede interpretarse como mejoras necesarias en el lado del servidor y del software. Para enumerar los problemas que afectan negativamente el tiempo de respuesta del servidor:
- El problema podría ser el uso compartido, la configuración (es decir, la configuración del servidor) y los recursos del servidor.. La capacidad de su servidor debe aumentarse de acuerdo con su tráfico. En algunos casos, las consultas a bases de datos mal escritas y los componentes de software altamente complejos pueden afectar seriamente el tiempo de respuesta del servidor.
- No utilizar una CDN (Content Delivery Network) puede provocar retrasos en el acceso al contenido, afectando al FCP. A medida que aumenta el tamaño del contenido, por ejemplo, si se intenta llamar a un GIF o vídeo animado de gran tamaño sin una CDN y el servidor principal está en un continente diferente, es posible que deba considerar soluciones CDN para resolver FCP.
- No ofrecer contenido estático con una política de caché adecuada y consistente puede sobrecargar su servidor innecesariamente a medida que aumenta el número de visitantes. Por ejemplo, si no mantiene su logotipo en la memoria caché a largo plazo mientras lo carga en cada página, perjudicará innecesariamente el tiempo de respuesta de su servidor.
- Redirecciones de página innecesarias mientras accede a la página puede afectar innecesariamente su FCP.
Por ejemplo, en el pasado, solía haber configuraciones como esta: cuando un usuario quería ingresar a un sitio, había una redirección de HTTP a HTTPS, luego, si era móvil, una redirección de HTTPS a móvil (por ejemplo, https:// www a https://m), y si la página se eliminaba y se redirigía a otro lugar con un 301, parecía como si el usuario estuviera pasando de un escritorio a otro en una oficina de impuestos. Este es un ejemplo extremo para una mejor comprensión, pero si redirige una página a otra URL con un redireccionamiento 301 y luego redirige esa página a otra con un 301, es posible que esté realizando la misma configuración ilógica.
- Si no utilice preconexión o captación previa de DNS prefijos al conectarse a sus servicios de terceros y conectarse a muchos servicios de terceros, no está haciendo nada beneficioso para FCP.
Reducir los recursos de bloqueo de renderizado
Debo admitir que abordar este único punto escrito como una línea de pedido puede llevar meses.
Para lograr esto, existe un método de solución donde todos JS, CSS y recursos similares que bloquean la representación de la página se cargan después del momento de creación de la página, pero la parte inicialmente visible del sitio se carga primero mientras el sitio se carga.. Sin embargo, para hacer esto, es necesario examinar todos los recursos JS, CSS y similares, y separar los procesos que consumen más tiempo. Además, utilizar la menor cantidad posible de servicios de terceros ayuda a optimizar el FCP.
