Si pudiera mejorar el rendimiento de su sitio web en un 10%, ¿lo haría?
La puntuación del rendimiento del sitio es una red compleja de métricas, y First Contentful Paint (FCP) es solo un factor que Google considera al evaluar la velocidad de carga de la página. Responsable del 10% de la puntuación de rendimiento general de un sitio web, FCP juega un papel importante en la creación de una experiencia de usuario positiva para los visitantes.
La primera pintura con contenido (FCP) de un sitio es el tiempo total que tarda una página en cargarse desde el momento en que se envía la solicitud hasta el punto en que se muestra el contenido en la pantalla.
Cuanto mayor sea la puntuación FCP, más lento se cargará el contenido. Cuando los visitantes piensan que una página tarda demasiado en cargarse, puede ser una señal de alerta importante. En un estudio de Top Designs Firms, el 42% de las personas dijeron que dejarían un sitio web que funciona mal.
Pero una puntuación de FCP baja muestra que la página se carga rápidamente, lo que significa que el contenido se entregará antes. Y el contenido de carga rápida es una forma de mantener a los visitantes desplazándose por su sitio. De hecho, Deloitte descubrió que un Mejora de 0,1 segundos en el tiempo de carga aumentó las conversiones en un 8,4% para los sitios minoristas y un 10,1% para los sitios de viajes.
Cuando un milisegundo marca la diferencia, es mejor hacer todo lo posible para mejorar la velocidad de su sitio. Entonces, echemos un vistazo a cómo reducir el FCP para que su sitio sea lo más rápido y fácil de usar posible.
¿Qué es First Contentful Paint?
First Contentful Paint (FCP) es la cantidad de tiempo que tarda un usuario en ver el primer contenido de un sitio web, ya sean imágenes, texto, logotipos, gráficos de fondo o elementos
En la línea de tiempo a continuación, puede ver la reproducción de FCP en el segundo cuadro cuando aparecen los primeros elementos de texto e imagen en la pantalla.
Fuente de imagen
First Contentful Paint es una de las seis métricas rastreadas en Google Informe de rendimiento de Lighthouse, junto con Tiempo para interactuar, Índice de velocidad, Tiempo total de bloqueo, Pintura con mayor contenido y Cambio de diseño acumulativo. Cada métrica mide un aspecto de la velocidad de carga de la página.
Fuente de imagen
First Contentful Paint es una métrica importante para juzgar la línea de tiempo de carga de la página porque marca el punto donde un usuario puede ver que algo está sucediendo en la pantalla. Sin esta seguridad, un usuario podría abandonar la página para navegar por un sitio web más rápido.
First Contentful Paint difiere del Elementos fundamentales de la Web Pintura de contenido más grande (LCP) porque LCP mide el tiempo que tarda el elemento más grande en un sitio web en hacerse visible. Por otro lado, FCP mide el primer elemento en cargar, que no es necesariamente el elemento más grande.
Un LCP rápido ayuda a asegurar a las personas que el contenido principal les es útil. Pero un FCP rápido asegura a la gente que alguna cosa está sucediendo en la página, lo que puede mantenerlos el tiempo suficiente para que se cargue el resto de la página.
Cómo probar la primera pintura con contenido
El FCP se puede medir en el laboratorio (prelanzamiento) y en el campo (usuarios del mundo real).
Probar FCP en el laboratorio es una buena forma de resolver problemas antes de que su sitio entre en funcionamiento, pero no es la forma más precisa de evaluar el rendimiento. Ahí es donde entran las pruebas de campo, que le muestran cómo las personas interactúan con su sitio cuando hay diferencias en los dispositivos, las conexiones de red y las interacciones del usuario.
Puede utilizar las siguientes herramientas para probar First Contentful Paint:
Herramientas de campo
Herramientas de laboratorio
Para este artículo, veamos cómo se ve ejecutar una prueba con Lighthouse, una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. (Si nunca antes ha realizado esta auditoría, siga el enlace para obtener instrucciones paso a paso).
Una vez que ejecuta la prueba para una URL determinada, Lighthouse abre una nueva pestaña para compartir la descripción general del rendimiento del sitio. En el siguiente ejemplo, el sitio tiene un buen rendimiento en SEO y accesibilidad, pero necesita mejorar el rendimiento y las mejores prácticas.
Fuente de imagen
Profundizando, la auditoría también otorga puntajes para cada una de las seis métricas de desempeño, incluida First Contentful Paint (FCP). En la prueba que se muestra a continuación, la puntuación del FCP es de 2,5 segundos, un tiempo que «necesita mejorar».
Fuente de imagen
Pero es necesario saber qué hace que una puntuación sea «buena» para mejorar el FCP.
La primera velocidad de pintura con contenido ideal
Google recomienda una puntuación de First Contentful Paint de 1,8 segundos o menos para proporcionar a los visitantes de su sitio una buena experiencia de navegación.
Fuente de imagen
Pero, ¿qué determina tu puntuación FCP?
Como todas las cosas de Google, hay un método para la métrica. Su puntuación de FCP se determina comparando el tiempo de FCP de su sitio con los tiempos de FCP para sitios reales, utilizando datos del Archivo HTTP. Puedes sumergirte más profundo para ver cómo Lighthouse determina umbrales y puntuaciones métricas.
Al evaluar su puntuación FCP, Google dice que «un buen umbral para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio». Esto ayuda a obtener una representación precisa de la experiencia del usuario.
Si su sitio tiene una puntuación de FCP baja, hay pasos que puede seguir para ahorrar segundos y crear un sitio más rápido por el que los visitantes quieran desplazarse. Pero primero, exploremos qué conduce a una mala puntuación.
¿Qué causa la pintura con alto contenido en primer lugar?
Los archivos de texto grandes, el tiempo de respuesta lento del servidor y las redirecciones de varias páginas pueden contribuir a una alta puntuación de First Contentful Paint. Si tiene un First Contentful Paint (FCP) alto, es probable que se deba a uno de estos factores:
- Tiempo de carga de fuente lento
- Tiempos de respuesta del servidor lentos (TTFB)
- Gran cantidad de solicitudes y grandes tamaños de transferencia
- Recursos que bloquean el renderizado
- CSS no utilizado o ineficaz
- Elementos basados en secuencias de comandos en la mitad superior de la página
- Carga diferida por encima del pliegue
- No incluir imágenes en la parte superior de la página
- Tamaño de DOM excesivo
- Redirecciones de varias páginas
Pero tenga en cuenta que el puntaje de Lighthouse Performance es un promedio ponderado de todos los puntajes de las métricas, y el FCP representa el 10% de ese total. Como resultado, las puntuaciones muy ponderadas tendrán un mayor impacto en su puntuación de rendimiento general. A continuación, se muestra cómo se ponderan las otras métricas de Lighthouse:
Fuente de imagen
Si su puntaje de rendimiento general necesita mejorar, puede ser mejor dedicar tiempo a optimizar el tiempo de bloqueo total o la pintura con contenido más grande antes de abordar la primera pintura con contenido. A medida que implemente buenas prácticas de desarrollo en todo el sitio, es probable que su puntuación de FCP disminuya.
Pero si desea mejorar el FCP, puede tomar algunos pasos específicos para pasar de una puntuación roja a una verde.
Cómo mejorar First Contentful Paint
No siempre es fácil mejorar la puntuación de First Contentful Paint (FCP). Pero con el plan de acción adecuado, es más fácil priorizar los errores principales que tienen el mayor impacto. Analicemos cómo hacerlo.
1. Cree una lista de temas de alta prioridad.
El primer paso para reducir la puntuación del FCP en cualquier sitio es ejecutar la lista de pruebas de laboratorio y de campo que se compartió anteriormente para comprender exactamente en qué necesitas trabajar.
Volvamos al informe de rendimiento de Lighthouse de antes. Si la puntuación del FCP «necesita mejorar», es mejor hacer referencia a las oportunidades o recomendaciones de diagnóstico en el informe. Para ver todas las recomendaciones, vaya a la pestaña «Todas». O para obtener recomendaciones específicas para la puntuación de First Contentful Paint (FCP), cambie a la pestaña «FCP».
Fuente de imagen
La prueba anterior comparte dos oportunidades para mejorar FCP: eliminar los recursos que bloquean la representación y garantizar que el texto permanezca visible durante la carga de la fuente web.
Al conocer los principales problemas que afectan a FCP, tendrá una lista de dónde concentrarse y qué corregir.
2. Aprenda qué ignorar.
Otra función útil del informe de rendimiento de Lighthouse es hacerle saber lo que no necesidad de concentrarse. Esta lista se genera en la sección «Auditorías aprobadas» del informe de rendimiento.
Fuente de imagen
Si bien está bien ignorar estos problemas, sepa que Google actualiza constantemente las métricas utilizadas para evaluar la velocidad de carga de la página. Es una buena práctica ejecutar pruebas de forma rutinaria para garantizar que el rendimiento del sitio esté bien encaminado; es posible que deba priorizar una «auditoría aprobada» algún día.
3. Trabaje con su equipo web para solucionar problemas.
Una vez que sepa a qué problemas debe prestar atención, es simplemente una cuestión de tomar medidas para mejorar los que afectan a First Contentful Paint (FCP).
Esta publicación no se adentrará en la maleza del desarrollo web. Pero estas guías detalladas de Google son excelentes recursos para comprender cada factor que afecta la velocidad y el rendimiento de la página. Si uno está afectando su puntaje FCP, puede echar un vistazo para aprender cómo solucionar el problema.
Ya sea que su puntaje de First Contentful Paint (FCP) muestre rojo, amarillo o verde, siempre hay mejoras por hacer. Es la parte divertida, y a veces frustrante, del desarrollo web.
Pero recuerde, los pequeños cambios pueden tener un gran impacto. Reducir los tiempos de respuesta del servidor, comprimir imágenes y ser consciente de los elementos de la mitad superior de la página puede reducir su puntuación FCP, acelerar su sitio y garantizar que los visitantes del sitio tengan una experiencia de navegación más rápida y prolongada.