Como Mejorar First Contentful Paint

Como Mejorar First Contentful Paint. Cómo mejorar la primera pintura contenta y significativa

No estás optimizando tu sitio para complacer a un cronómetro. Estás optimizando tu sitio para personas reales. Entonces, ¿cómo puede determinar si está logrando su objetivo? ¿Como Mejorar FCP y FMP?, ¿Como Mejorar First Contentful Paint y First Meaningful Paint?

Debe incluir métricas como First Contentful Paint y First Meaningful Paint en su evaluación de rendimiento para medir el rendimiento de su sitio desde la perspectiva de su usuario. Ambos le darán más información sobre cómo se comporta su sitio en la naturaleza para que pueda optimizar las cosas que realmente mejorarán la experiencia de su usuario.

En esta publicación, nos enfocaremos específicamente en cómo reducir la cantidad de tiempo que lleva cargar el contenido en su sitio de WordPress para que pueda acortar la cantidad de tiempo a la Primera pintura satisfactoria y la Primera pintura significativa y mejorar su Velocidad de página de Google

¿Qué es First Content Paint (FCP)?

First Content Paint, o FCP, es una métrica de rendimiento que mide cuánto tiempo ha transcurrido antes de que el navegador comience a mostrar los primeros elementos del sitio.

Por lo general, los primeros elementos de contenido de WordPress son elementos de encabezado, por lo que el visitante verá primero el logotipo del sitio o el menú de navegación.

First Content Paint de TuConsultoraSEO
Se muestra un ejemplo de la primera pintura satisfactoria. Todavía estamos esperando que aparezca el contenido.

First Content Paint es importante porque proporciona al visitante información de que su solicitud está en proceso. ¿Alguna vez has hecho clic en un enlace o botón y luego lo has hecho un par de veces más porque no pasó nada? El trabajo del FCP es comunicar «te escuchamos y estamos trabajando en ello». Esto asegura al lector que puede esperar que su sitio funcione correctamente y proporcione contenido.

¿Cuál es el significado de la primera pintura significativa?

La primera pintura significativa es cuando las cosas buenas realmente se cargan. Cuando el contenido que está buscando el usuario aparece en la página, esto se conoce como la primera pintura significativa.

Pero si me desplazo hacia abajo de inmediato para mostrarlo, puede ver que la página no ha terminado de cargarse, todavía faltan las imágenes. ¿Pero a quién le importa? El usuario probablemente no se desplazará hacia abajo tan rápido, comenzará a leer su contenido mientras el resto de la página termina de cargarse.

Los visitantes acuden a su sitio en busca de contenido, no para ver el logotipo y el menú de navegación, por lo que el contenido tiene más valor para el visitante. La primera pintura significativa es una de las métricas más importantes para evaluar cuánto tiempo espera su visitante recibir la información por la que visitó su sitio. La primera pintura significativa también incluye el tiempo que lleva cargar las fuentes web, ya que son necesarias para representar su contenido.

Los elementos de contenido más valiosos en su página web se conocen como elementos de héroe . Esto varía de un sitio a otro, pero no es difícil determinar cuál es la parte más valiosa de una página.

Para las páginas de video en YouTube, el elemento más importante es el video. En las redes sociales, las primeras publicaciones en la línea de tiempo que están arriba del pliegue son las más importantes. Para los blogs, el cuerpo de la publicación del blog y la imagen destacada (si aparece en la mitad superior de la página con el contenido del blog) son los más importantes porque esto es lo que el visitante ve primero.

Otro contenido, como imágenes, puede diferirse hasta que el visitante las necesite.

Como Mejorar First Contentful Paint

Uso de Google PageSpeed ​​Insights para encontrar la primera pintura de contenido y la primera pintura significativa

Tanto First Contentful Paint como First Meaningful Paint se conocen como métricas de rendimiento centradas en el usuario. ¿Como Mejorar First Contentful Paint?, ¿Por qué mejorar FCP? Google premia los sitios que ofrecen una mejor experiencia de usuario con una clasificación de búsqueda más alta. Dado que Google quiere alentar a los propietarios de sitios a optimizar sus sitios para los usuarios, FCP y FMP son dos métricas que se miden en Google PageSpeed ​​Insights.

Captura de pantalla de datos de laboratorio en Google PageSpeed ​​Insights
También puede ver una línea de tiempo de cómo se ve su sitio a medida que se carga. ¿Puedes decir cuál es la primera pintura contenta ( First Contentful Paint) y significativa?

Desde noviembre de 2018, Google PageSpeed ​​Insights ha comenzado a usar una herramienta de código abierto llamada Lighthouse para simular cómo se carga su sitio para los visitantes. Lighthouse devuelve 6 métricas en la sección Datos de laboratorio , que muestran una imagen completa del rendimiento de su sitio:

  • Primera pintura contenta
  • Índice de velocidad
  • Hora de interactuar
  • Primera pintura significativa
  • Primera CPU inactiva
  • Latencia de entrada estimada

First Content Paint y First Signful Paint son métricas basadas en el tiempo que se miden en segundos. Para lograr un puntaje favorable a los ojos de Google, desea que tanto el FMP como el FCP sean menos de un segundo.

Como Mejorar First Contentful Paint.

Recomendaciones para reducir los tiempos de pintura para su sitio de WordPress y mejorar su puntaje de PageSpeed ​​Insights

Cuando ejecuta Google PageSpeed ​​Insights, Google le proporciona sugerencias personalizadas sobre cómo puede arreglar su sitio. Ejecutar una prueba es la mejor manera de ver cómo su sitio se comporta.

Es importante aclarar que la primera pintura significativa (FMP) está en desuso en Lighthouse 6.0.

Las siguientes cinco sugerencias son directas de Google para todos los sitios sobre cómo mejorar la primera pintura significativa y cómo mejorar la primera pintura con contenido .

Como Mejorar First Contentful Paint: Nuestro objetivo con las primeras cuatro recomendaciones es mejorar First Contentful Paint acelerando el tiempo que lleva descargar recursos y eliminar obstáculos que impiden que el navegador registre contenido DOM. La última sugerencia es mejorar la primera pintura significativa.

Estamos a punto de entrar en detalles técnicos, pero si desea una solución simple comuníquese con nosotros.

1. First Contentful Paint. «Minimice la cantidad de hojas de estilo externas y secuencias de comandos que bloquean el procesamiento de las que depende la página»

¿Qué es el bloqueo de renderizado? Cuando un visitante está cargando una página web, cualquier cosa que se interponga en el procesamiento del DOM se conoce como bloqueo de procesamiento. Son obstáculos de código que el navegador debe procesar primero antes de que pueda hacer cualquier otra cosa.

A veces son importantes. Sus archivos CSS, por ejemplo, bloquean el renderizado, pero son críticos.

Otras veces, el recurso de bloqueo de procesamiento puede esperar. Es por eso que debe mover archivos JavaScript desde el encabezado de su página web si no son necesarios para representar el DOM. Cárguelos después del DOM para mejorar la experiencia del usuario.

Si puede, la mejor manera de optimizar la velocidad de la página es  eliminar por completo los recursos de bloqueo de renderizado. Si no despiertan alegría, entonces adiós …

2. First Contentful Paint.»Utilice el almacenamiento en caché HTTP para acelerar las visitas repetidas»

El almacenamiento en caché es una forma confiable de mejorar la velocidad del sitio para sus visitantes mediante el almacenamiento de activos en una memoria caché para una recuperación más rápida. Hay varios tipos de cachés.

Con el almacenamiento en caché de HTTP, el navegador almacena una copia de los activos descargados a través de HTTP por el usuario en su caché, por lo que podrá recuperarlos sin realizar un viaje adicional al servidor. Esto mejora drásticamente el rendimiento para los visitantes habituales cuando se realiza correctamente.

3. First Contentful Paint. «Minimiza y comprime los activos basados ​​en texto para acelerar su tiempo de descarga»

Sus páginas web consisten en archivos HTML, CSS y JavaScript basados ​​en texto. Si no puede eliminar un archivo porque es esencial, debe reducir el tamaño del archivo tanto como sea posible.

Hay dos maneras de hacer esto:

Minifique sus archivos
Cuando minimiza sus archivos de texto, elimina todos los caracteres y espacios extraños, creando un archivo compactado que es mucho más difícil de leer para los humanos, pero mucho más pequeño. Al navegador no le importa la falta de legibilidad y podrá descargar el archivo mucho más rápido.

Comprima sus archivos
Comprimir sus archivos es similar al proceso de comprimir sus imágenes. Durante el proceso de compresión, el compresor detecta patrones y duplicaciones en el archivo de texto y los codifica de manera mucho más eficiente.

Al minimizar y comprimir sus archivos de texto, se eliminan los bytes adicionales que no afectan negativamente a su página web, pero reducen los tiempos de pintura.

4. First Contentful Paint. «Hacer menos trabajo de JavaScript en la carga de la página»

JavaScript es uno de los peores delincuentes cuando se trata de ralentizar su sitio. Por un lado, los archivos JavaScript requieren más recursos para procesar en comparación con otros activos. Las imágenes, por ejemplo, deben decodificarse, pero JavaScript debe analizarse, compilarse y finalmente ejecutarse, lo que requiere mucho tiempo valioso.

Tampoco ayuda cuando el código JavaScript se agrupa en un archivo enorme. Sé que parece contradictorio, pero crear un archivo grande no ayuda un poco al rendimiento.

Es mucho mejor dividir su código en fragmentos del tamaño de un bocado con un proceso conocido como división de código. Luego puede mover los fragmentos que no son críticos fuera de la cabeza de su sitio, reduciendo el tiempo de la primera pintura.

Otra forma de minimizar sus archivos JavaScript es eliminar el código que ya no se usa. Este proceso se conoce como sacudidas de árboles. A medida que su sitio madura, agrega fragmentos de código, pero no todo se usa a largo plazo. Debe revisar periódicamente su código JavaScript y eliminar lo que no necesita.

5. First Contentful Paint. «Optimizando la ruta crítica de renderizado para lograr una primera pintura significativa más rápida»

La ruta de representación crítica se refiere a todos los activos que el navegador necesita para responder a la solicitud actual del visitante. Desea priorizar los activos que son más importantes en este momento y cargarlos lo más rápido posible 

Es como viajar si necesita llegar a una cita a tiempo y llega tarde, probablemente no sea el mejor momento para hacer diligencias rápidas o hacer un poco de turismo. ¡Haz eso después!

Esta recomendación abarca la eliminación de recursos de bloqueo de renderizado, pero tiene una perspectiva más amplia. Debe analizar todo el trabajo que está haciendo el navegador para entregar la página web y encontrar una mejor manera de servir los bits importantes y posponer todo lo que puede esperar. Si no es crítico, puede diferirlo o cargarlo de forma asíncrona para ofrecer un mejor rendimiento.

Tenga en cuenta

Cuando comience a optimizar su sitio, es importante que recuerde que los resultados devueltos por Google PageSpeed ​​Insights solo representan una perspectiva única. Son resultados simulados, pero no capturan completamente la realidad.

Los visitantes que visiten su sitio en dispositivos defectuosos en una conexión móvil de mala calidad experimentarán FCP y FMP que son mucho más largos. Razón de más para seguir mejorando incluso si obtienes  un 100 perfecto.

Su objetivo siempre debe ser optimizar su sitio para usuarios reales, no una estrella de oro;)

Resumen Como Mejorar FCP.

First Contentful Paint y First Meaningful Paint son métricas centradas en el usuario que pueden informarle mucho sobre cuánto tiempo esperan sus visitantes el contenido. Ambos deberían ser menos de un segundo para la mejor experiencia de usuario. Puede averiguar cómo se califica su sitio con Google PageSpeed ​​Insights.

Si su sitio es demasiado lento, la mejor manera de mejorar el tiempo de la primera pintura es minimizar los recursos de bloqueo de renderizado, usar el almacenamiento en caché HTTP, minimizar y comprimir activos basados ​​en texto, hacer menos trabajo de JavaScript y optimizar la ruta crítica de renderizado. Si no está seguro de lo que necesita hacer, ejecutar una prueba de Google PageSpeed ​​Insights le dará sugerencias específicas para su sitio.

Si no está seguro de cómo mejorar sus tiempos de pintura, no dude en escribirnos para un presupuesto asequible:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *