El First Contentful Paint (FCP) de su sitio web es una de las métricas más significativas en Core Web Vitals de Google. A diferencia de otras métricas de pintura y carga, FCP no es una métrica puramente técnica con respecto al tiempo de respuesta. FCP se centra en la experiencia del usuario y lo que percibe primero en el sitio, no lo que se carga en segundo plano. Al optimizar la primera pintura con contenido de su sitio, no solo está acelerando los tiempos de carga generales y aumentando las calificaciones de velocidad de la página , sino que también está mostrando literalmente a sus visitantes que sus solicitudes están siendo procesadas y que la carga no se ha estancado.
En este artículo, profundizaremos en qué es First Contentful Paint, cómo medirlo y optimizarlo, y responderemos algunas preguntas comunes sobre FCP para que pueda estar seguro de que su sitio es tan eficiente y utilizable como sea posible. ser.
Suscríbete a nuestro canal de Youtube
La primera pintura con contenido de su sitio web es cuando el navegador muestra el primer elemento DOM en su página. Esto incluye imágenes, elementos de lienzo (que no sean blancos) o texto. En lenguaje sencillo, FCP es cuando el usuario puede ver que parte de su página cambia. A menudo, esto viene como una barra de encabezado o una imagen de fondo. Es posible que este elemento no sea lo primero que se muestre o cargue desde el servidor, pero es lo primero que el usuario puede ver, por lo que es fundamental para la experiencia de usuario de su sitio .
Cualquier cosa que su sitio web contenga dentro de un iframe no se contabiliza con FCP. Tampoco lo es la pintura sin contenido, como un cambio en el color de fondo. Eso es First Paint , no First Contentful Paint.
FCP es una métrica interesante. Si bien puedes medirlo cuantitativamente, también es relativamente subjetivo. Tener un First Contentful Paint rápido es importante porque hace que el usuario perciba que su sitio se está cargando rápidamente. Si realmente lo es o no. Es posible que su sitio tenga un primer retraso interactivo (el tiempo después del cual el usuario puede interactuar con el sitio) mucho más largo que el de la competencia, pero a los usuarios les puede parecer más rápido debido a su FCP más rápido.
Dicho esto, FCP no se trata de engañar a sus usuarios. Un tiempo de FCP bajo es un buen indicador de la velocidad de la página en general, y los métodos con los que lo optimiza también pueden afectar otras métricas de velocidad de la página (como la pintura con contenido más grande).
Cómo medir FCP
Aunque FCP es importante debido a la percepción del usuario, es una métrica cuantificable que puede medir y calificar. Sin embargo, dicho esto, puede usar estas herramientas para indicar si el impacto de FCP en el campo (con usuarios reales) versus en el laboratorio (cargas de página simuladas con fines de prueba).
¿Qué es una buena puntuación de FCP?
Antes de profundizar en las diversas herramientas para verificar su FCP, necesita saber qué se considera un buen puntaje de FCP. A partir de la documentación de Google sobre la determinación de puntajes métricos , podemos ver que califican los tiempos de FCP en tres categorías: bueno, necesita mejorar y deficiente , y analiza cómo logran el puntaje percentil utilizado por su herramienta Lighthouse .
- Bueno : entre 0 segundos y 1,8 segundos
- Necesita mejorar : entre 1,8 segundos y 3 segundos
- Pobre : más de 3 segundos
A continuación, enumeramos varias herramientas que puede usar para ver en cuál de estas categorías se ubica su sitio.
Herramientas de campo
Las herramientas de campo son aquellas que puede usar para rastrear cómo les aparece la página a sus usuarios. Usuarios reales. Estas herramientas no se basan en API ni en suposiciones sobre su sitio. Se ejecutan directamente contra su servidor en tiempo real para que obtenga la información más precisa y actualizada posible.
La documentación de Google para FCP en https://web.dev muestra estas como las mejores herramientas de campo para determinar FCP:
- Perspectivas de PageSpeed
- Informe de experiencia de usuario de Chrome
- Consola de búsqueda (informe de velocidad)
- Biblioteca JavaScript de Web Vitals
Además, quizás la mejor herramienta es Real User Monitoring (RUM). Ahí es donde realiza un seguimiento y observa cómo los usuarios reales interactúan con su sitio. Puede realizar un seguimiento cuantitativo de sus tiempos de carga utilizando las herramientas enumeradas anteriormente, y luego puede obtener sus percepciones subjetivas de FCP y la velocidad de carga de su página directamente de ellos. En términos de la vista más completa de FCP y su impacto en sus visitantes, RUM es definitivamente el primero de la lista. Sin embargo, también es el más complicado y difícil de realizar.
Herramientas de laboratorio
Las herramientas de laboratorio para la verificación de FCP tienden a simular resultados en cuanto a cuál sería su FCP en situaciones ideales. En lugar de situaciones del mundo real en las que se producen latencia, ancho de banda, congestión de la red y otros obstáculos, estas herramientas de laboratorio recomendadas por Google proporcionan una visión de lo que puede ser su sitio cuando se ejecuta de manera óptima.
- Faro
- Herramientas para desarrolladores de Chrome
- Perspectivas de PageSpeed
Además, cuando está desarrollando un sitio que aún no ha llegado a producción, es imposible probarlo en condiciones reales. El uso de herramientas de laboratorio también puede ayudarlo a crear puntos de referencia e hitos a medida que su proyecto avanza en el ciclo de desarrollo.
Cómo optimizar su puntaje FCP
Las herramientas anteriores le brindan una descripción general y una puntuación de dónde están la velocidad de su sitio web y FCP, seguro. Pero ellos, al igual que otros como GT Metrix y Pingdom , también le brindan información sobre lo que puede hacer para optimizar su puntaje de FCP y hacer que se pinte aún más rápido. Vamos a repasar una descripción general de algunos de los pasos más comunes para corregir los tiempos de First Contentful Paint para que sepa cómo abordar cualquier cosa que las pruebas y las herramientas le indiquen.
Eliminar recursos de bloqueo de procesamiento
Este podría ser el factor número uno en la página para reducir el tiempo de FCP. Los recursos de bloqueo de procesamiento son archivos en su sitio web que su página debe tener para procesar. Estos incluyen HTML, JavaScript, fuentes y archivos CSS. Lo que los convierte en «bloqueo de procesamiento» es que tienen prioridad sobre cualquier otra cosa en la página, deteniendo el proceso de carga de cualquier otra cosa hasta que finalicen. Cualquier imagen, texto sin formato u otro contenido de cara al usuario se pone en espera hasta que se terminan los archivos vitales.
Esta retención provoca un aumento dramático en FCP por dos razones:
- los archivos de bloqueo de procesamiento son generalmente de gran tamaño
- Los archivos de bloqueo de procesamiento generalmente no contienen contenido del sitio, solo estructura y formato.
Al eliminar estos recursos de la ruta de representación crítica , abre espacio para la pintura con contenido. Puede diferir la carga de los recursos, evitar usar @import para CSS (en su lugar, use @media para CSS condicional) y asegúrese de minimizar y combinar sus archivos CSS, HTML y JavaScript (que trataremos más adelante en este artículo).
Además, los usuarios de Divi pueden aprovechar nuestro sistema Critical CSS que elimina automáticamente todas y cada una de las solicitudes de CSS que bloquean el renderizado. Además de eso, el tema tiene opciones de aumento de velocidad que ayudan enormemente con esto. No solo almacena en caché las fuentes de Google y las imprime en línea en el encabezado (evitando @import ), Divi también le permite elegir eliminar los emoji nativos y (probablemente) no utilizados de WordPress que consumen recursos para FCP, alternar el aplazamiento de jQuery y diferir la hoja de estilo del editor de bloques de Gutenberg se renderice primero y bloquee otros recursos. Es por eso que el rendimiento de Divi es tan bueno y puede ayudarlo a lograr excelentes puntajes de FCP desde el primer momento.
Los usuarios de WordPress sin Divi también pueden encontrar algunas opciones de bloqueo de procesamiento en sus complementos de almacenamiento en caché de WordPress como WP Rocket , y habilitarlos también ayudará a disminuir el tiempo de FCP.
Mostrar texto antes y durante la carga de fuentes
¿Alguna vez ha visto un sitio web en el que todo el texto de una página aparece mágicamente a la vez cuando todo el resto del contenido ya existe a su alrededor?
Eso es porque el navegador lo está ocultando. El contenido de texto del sitio no se carga hasta que está listo para leer. El texto generalmente es solo un puñado de bytes de contenido. Pero en muchos sitios, la carga puede tardar exponencialmente más. Porque el archivo de fuente no está «listo» para mostrarse. De todas las formas de tener un tiempo de FCP ultrarrápido, pintar el contenido de texto de su sitio es quizás la mejor.
Puede usar varios parámetros de visualización de fuentes , puede decirle al navegador que cargue el texto de su sitio usando una fuente del sistema inmediatamente y luego reemplazarlo con su fuente de visualización especificada una vez que esté cargado.
El contenido de texto tiene un tamaño de archivo mínimo, a menudo solo unos pocos bytes, y al decirles a los navegadores que lo muestren sin demora, tiene el potencial de hacer que su FCP sea casi inexistente. Simplemente agregue font-display:swap a cualquier CSS de @font-face que tenga. Eso por sí solo podría solucionar muchos de los problemas de tiempo de First Contentful Paint.
Divi hace esto de forma predeterminada, por lo que nuestros miembros no necesitarán realizar ningún cambio. Sus sitios cambiarán automáticamente de una fuente del sistema en lugar de ocultar el contenido de su página hasta que los archivos estén completamente cargados.
Minimice su HTML, CSS y JavaScript
La minificación elimina caracteres extraños (como espacios) de los archivos HTML, CSS y JavaScript de su sitio. Si bien el espaciado facilita que los humanos lean y analicen, los navegadores y servidores no los necesitan. Esos espacios siguen siendo caracteres que ocupan bytes. Al minimizar cosas como tus archivos CSS, disminuyes el tamaño de la página. Lo que aumenta la velocidad de la página y mejora el tiempo de FCP.
Si es un usuario de WordPress, es probable que ya tenga una opción de minificación en su tema o complemento de optimización de velocidad . Para los usuarios de Divi , eso ya se solucionó. Divi pondrá automáticamente en cola su versión minimizada de scripts. Con aquellos habilitados, su FCP caerá.
Eliminar CSS no utilizado
Si tiene código en sus hojas de estilo que no se está utilizando, ¿por qué conservarlo? Cualquier código antiguo o sin usar debe eliminarse para que no se cargue cada vez que se solicite su sitio. Chrome DevTools (que vinculamos anteriormente) puede mostrarle en la pestaña Cobertura qué partes de su CSS se cargan pero no se procesan.
Además, los usuarios de Divi deben tener en cuenta que hemos revisado por completo la forma en que nuestro tema maneja CSS y este tipo de exceso de estilo. Nuestra actualización masiva de rendimiento de Divi mantiene el CSS ordenado dinámicamente en archivos pequeños y minimizados que se basan en los módulos que ha elegido en su página. Además de eso, identificamos qué partes de ese CSS se cargan arriba del pliegue y las renderizamos primero. Y eso reduce su FCP.
Por lo tanto, no solo hemos minimizado automáticamente su CSS, sino que también lo hemos cortado en bocados pequeños para su navegador y priorizado aquellos que aumentan el FCP y los tiempos generales de carga de la página.
Reducir el tiempo hasta el primer byte (TTFB)
Esencialmente, TTFB es cuando el primer byte de datos se transfiere al navegador. FCP depende de esta métrica, por lo que cuanto más rápido sea, más rápida será su primera pintura con contenido. Los mejores métodos para reducir TTFB y acelerar su página son bastante simples:
- usa un host de calidad
- entregar contenido a través de CDN
- habilite el almacenamiento en caché del navegador (con WordPress, a través de un complemento como WP Rocket )
Asegurarse de que esos tres elementos se atiendan adecuadamente puede disminuir drásticamente el TTFB y, por extensión, su FCP.
Mantenga el tamaño de su DOM pequeño
Esto podría ser un dame. Pero, a menudo, uno de los mayores factores limitantes de tener una primera pintura con contenido rápida es tener un DOM demasiado grande. Estás tratando de hacer demasiado desde el principio. Google dice que «el punto óptimo es un departamento de árbol <32 elementos y menos de 60 elementos secundarios/principales».
Muchos de nosotros complicamos demasiado nuestras páginas de inicio y de destino en un intento de impresionar a los visitantes. Sin embargo, estos elementos agregados inflan el DOM y causan un mayor tiempo de FCP. Puede ayudar a esto reduciendo la cantidad de selectores de CSS que usa, tal vez usando mucho más CSS basado en clases que ID o consultas de medios especiales. Los pseudo-selectores también complican las cosas y aumentan el tamaño de su DOM.
Junto con eso, puede reducir la cantidad de elementos a los que se aplican los selectores. Se tarda menos en cargar y aplicar estilos de 5 elementos que de 10. Esto es especialmente cierto con los navegadores más antiguos y desactualizados que, a pesar de todos nuestros mejores esfuerzos, la gente todavía usa a diario.
Utilice imágenes SVG o WebP
Es posible que este no afecte el sitio de todos, por lo que lo hemos incluido en último lugar en nuestra lista. Las imágenes no suelen ser lo primero que se pinta en una página, especialmente sobre texto o marcos adicionales, pero es posible que reducir significativamente el tamaño del archivo de las imágenes importantes o destacadas (como el logotipo de su sitio) pueda ayudar con FCP.
Si bien .gif, .jpg y .png son los archivos de imagen más comunes que usa, si los cambia a archivos .webp o .svg, ahorrará mucho tiempo. Con tamaños de archivo en el rango de bytes a veces en lugar de kilobytes , sus imágenes se cargarán en un abrir y cerrar de ojos. Si es un usuario de WordPress, la versión 5.8 ha incorporado compatibilidad con .webp , y tenemos un resumen sobre cómo usar imágenes SVG en nuestro archivo .
Lo más probable es que este método afecte más a su pintura con contenido más grande (LCP) que a FCP, pero un logotipo SVG lo suficientemente pequeño puede ser lo primero que vean sus usuarios.
Primera pintura con contenido (FCP) Preguntas frecuentes
¿Cómo encaja FCP en el rendimiento general de mi sitio web?
Como métrica directa del rendimiento del sitio, no mucho. FCP es una métrica de percepción centrada en el usuario que no es necesariamente indicativa del rendimiento del sitio. Como mencionamos anteriormente en el artículo, dos sitios web pueden tener exactamente el mismo tiempo de carga, pero el que tiene un tiempo de FCP más bajo puede verse como más rápido. Esa percepción puede afectar la experiencia del usuario, si no el rendimiento general del sitio web.
Sin embargo, First Contentful Paint es una métrica fantástica a seguir para llevar el rendimiento general del sitio a un nivel superior. Cualquier acción que realice para reducir el FCP también reducirá la velocidad general de su página. Así que casi puedes tomarlo como una señal de tu desempeño general.
Un tiempo de FCP bajo generalmente no coincidirá con un tiempo de carga general alto, por lo que si necesita usar una sola métrica para ver dónde se encuentra, FCP puede ser una buena guía. También puede combinarlo con LCP, o la pintura más grande con contenido, para obtener una imagen más completa de lo que ven sus usuarios en los primeros segundos de ingresar a su sitio.
¿Cuál es la diferencia entre First Paint y First Contentful Paint?
Aunque los dos términos pueden usarse indistintamente, técnicamente son dos métricas diferentes. Como hemos discutido, First Contentful Paint es cuando el navegador representa el primer elemento DOM en la página. Puede pensar en esto como cualquier contenido utilizable (si no interactivo) en la página. Una imagen de fondo, texto o su div de menú de encabezado, por ejemplo.
First Paint, sin embargo, es cuando el navegador muestra los primeros bytes de información, ya sea que tenga contenido o no. Un cambio en el color de fondo (no la carga de una imagen de fondo) no tiene contenido. El usuario no puede consumirlo como contenido, por lo que no es un ejemplo de FCP.
La primera pintura puede ser exactamente igual a su primera pintura con contenido. Pero su FCP puede no ser el mismo que su Primera Pintura.
Conclusión
FCP es una métrica absolutamente vital para su sitio web. Google valora la velocidad de la página como uno de los aspectos más importantes de la clasificación de su página. Los usuarios ven la velocidad de la página como uno de los factores decisivos para permanecer en su sitio. Tener un First Contentful Paint bajo puede mantener a los usuarios en su sitio y ayudarlos a encontrar su sitio web en primer lugar. A pesar de que FCP es a menudo una métrica difícil de precisar y comprender, cualquier optimización para reducir el tiempo de FCP aumentará la UX y reducirá preciosos segundos y milisegundos de los tiempos de carga generales de su sitio.
¿Cuáles son sus principales estrategias para tener una primera pintura rápida y con contenido?
Artículo Imagen destacada por victoria piña / shutterstock.com