Mejora el FCP y el LCP para optimizar tu web
Dos de las métricas de rendimiento a las que Google parece estar dándole más importancia son las que indican cuánto tiempo tardan, en promedio, en cargarse todos los elementos de una página:
First Contentful Paint (FCP) y Largest Contentful Paint (LCP)
En las páginas web no se cargan todos los elementos a la vez. Cuanto más compleja es una página, más tiempo lleva le lleva a los robots renderizar todos sus elementos, de ahí que se usa más de una métrica para medir la velocidad de una web.
Qué son FCP y LCP y cómo medirlos
El Firts Contenful Paint (FCP) de una página indica cuánto tiempo tarda en aparecer el primer elemento de texto o imagen en el navegador de un usuario. Largest Contenful Paint (LCP), por su lado, mide el tiempo que tarda en aparecer el elemento más grande de la página.
En muchas ocasiones se mide el rendimiento de una web basándose básicamente en los tiempos de carga generales. Es correcto y te ofrece una idea general, pero no ofrece la imagen completa. Idealmente, sus tiempos de FCP deberían ser lo más bajos posible y sus tiempos de LCP deberían ser similares:
Si analizamos esta imagen de Page Speed de Google, veremos:
Porcentaje de tiempos de descarga de los diferentes elementos y si está dentro de los parámetros recomendados por el buscador.
Si la diferencia entre los tiempos de FCP y LCP de su página es pequeña, eso le dice dos cosas:
- Hay pocos elementos, si es que hay alguno, que superen al resto (por ejemplo, una imagen muy grande, un fondo de video, etc.).
- Los activos de la página probablemente se hayan reducido.
No hay un dato óptimo a conseguir cuando se trata de mejorar el FCP. Dependerá mucho de los elementos que se hayan incorporado en la página. Lo que está claro, es que para el tiempo total de carga se deberá reducir reducirlo tanto como sea posible.
Herramientas para medir velocidad de carga de tu web
En la actualidad hay varias herramientas que te permiten comprobar la velocidad de carga de una página web de forma fácil y rápida, además de ver tu nivel de cumplimiento de las estas métricas de Core Vitals, como puedes ver en nuestro post Las 5 mejores herramientas para medir la velocidad de tu web
Cómo comprobar los tiempos de FCP y LCP de tu web
Hay muchas herramientas que puede utilizar para evaluar el rendimiento de su sitio web. Uno de las mejores herramientas es PageSpeed Insights de Google, de la que te hemos mostrado un resultado real, tanto porque te permite medir los tiempos de FCP y LCP, como porque es gratis y te ofrece una serie de consejos para optimizar cada apartado.
Simplemente, pones URL de la página que deseas comprobar y en unos segundos tendrás una página de resultados que te va mostrar una gran cantidad de información:
Primero, los resultados de los datos de campo, donde se muestran los tiempos de carga promedio recopilados para la página durante los últimos 28 días (si los hay), lo que ofrece una mejor evaluación de la web.
A continuación, la sección Datos de laboratorio te muestra los números de la prueba que PageSpeed Insights acaba de ejecutar:
Si haces clic en el botón en la esquina superior derecha de la sección Datos de laboratorio, te mostrará un desglose de lo que significa cada métrica. Pero además, PageSpeed Insights también te ofrece sugerencias sobre cómo mejorar el rendimiento de cada factor en la sección Oportunidades
Optimizar la web para una carga rápida es clave para mejorar la experiencia a los usuarios de tu web y, por lo tanto adaptarse a las sugerencias de Google respecto a velocidad de carga, sobretodo en navegación móvil.
Y esto incluye reducir los tiempos de FCP y LCP. Ya hemos visto que puedes utilizar PageSpeed Insights para obtener sugerencias de mejora específicas para tu web, pero también podemos tener en cuenta estos recursos.
Otras herramientas que puedes usar para controlar la velocidad de tu web y ver posibles mejoras a implementar son: Pingdom Tools o GT Metrix.
4 consejos que te ayudarán a reducir la velocidad de carga de tu web
1º Habilita el almacenamiento en caché de tu web
El almacenamiento en caché es un proceso que toma algunos de los elementos de tu web y los almacena en los navegadores de los visitantes o en un servidor remoto.
- Caché del sitio: almacena los datos de su sitio web en los navegadores de sus visitantes, pero tu controlas la configuración de éste.
- Caché del navegador: los navegadores de tus usuarios utilizan sus propias configuraciones para almacenar los elementos de tu web.
- Caché del servidor: Implica un servidor, que almacena copias de su sitio para disminuir el impacto tus datos. Las Redes de Entrega de Contenido (CDN) son un ejemplo más utilizado.
Mira este post si quieres conocer por qué usar un CDN para mejorar la velocidad de tu web
El almacenamiento en caché del sitio te permite implementarlo de una forma más sencilla con muy buenos resultados, en muchas ocasiones. Los tiempos de FCP y LCP deberían disminuir para los visitantes recurrentes, ya que ya no tendrán que volver a cargar todos los elementos de su sitio cada vez que regresen.
Si trabajas con WordPress hay muchos plugins que te van a ayudar a gestionar la caché de tu página: W3 Total Caché, WP Super Caché o WP Rocket ( de pago) son muy efectivos, ya que te permiten optimizar una gran cantidad de parámetros que afectan a la velocidad de carga de la web ( Java Script, CSS, Imágenes,etc)
2º Comprime todas las imágenes
Los archivos multimedia suelen ser los elementos más grandes y pesados de cualquier sitio web, por lo tanto, es básico reducir los tiempos de carga de imágenes. Esto es especialmente importante en las tiendas online, donde el número de fotografías de productos es muy elevado.
La mejor manera de conseguirlo es comprimiendo las imágenes antes o mientras las carga en su web. Para la primera opción, puedes utilizar una herramienta en línea como TinyPNG que te ermite cargar imágenes y comprimirlas sin una pérdida significativa de calidad.
Si quieres hacerlo de una forma mucho más automatizada, puedes recurrir a plugins como: Smush, EWWW Image Optimizer, Short Pixel Image Optimizer,…
3º Optimiza los Java Script y CSS de tu web
Aparte de las imágenes. La mayoría de los sitios web dependen en gran medida de JavaScript y CSS para su funcionamiento y diseño.No suelen ser archivos pesados, pero cuanto más uses, más se suman, y piensa que los navegadores van a ejecutar cada script por separado, lo que puede tener un impacto significativo en el rendimiento de la web.
Hay muchas herramientas en línea que puede utilizar para comprimir o ‘minificar’ el código js y css para optimizarlo,
Si utilizas WordPress distintivos complementos pueden ayudarte a optimizar tu código: WP Rocket y W3 Total caché, incluyen un apartado de minificación de java script, el html y css. También puedes mirar Autoptimize que con más de 1 millón de descargas te ayuda a optimizar código y además, introduce la carga diferida de imágenes (lazy load)
4º Implementa la carga diferida de imágenes
Por lo general, los navegadores no muestran las imágenes de las webs según el orden que muestran. Las fotos y los gráficos aparecen cuando terminan de cargarse, y eso, puede variar según el tamaño de los archivos, su conexión y otros factores.
La carga diferida retrasa la renderización de algunas imágenes hasta que los usuarios se desplazan hacia abajo y aparecen. En teoría, esto puede ayudar a reducir sus tiempos de FCP.
Para obtener los mejores resultados, no debes utilizar esta técnica para las imágenes de la mitad superior de la página, es decir, las que se incluyen en la primera sección de la página que puede ver el usuario.
Al mejorar las métricas de FCP y LCP, puedes reducir los tiempos de carga de la web. Tus usuarios verán antes el contenido y Google posiblemente te premiará por ello.
Afortunadamente, mejorar estas métricas es relativamente sencillo si usa WordPress, gracias al uso de algunos pluguins que te van a ayudar a:
- Habilitar el almacenamiento en caché del sitio.
- Comprimir las imágenes de tu sitio web.
- Optimizar el JavaScript y CSS de su sitio.
- Implementar la carga diferida de imágenes
Si tienes dudas de como mejorar los ratios de First Contentful Paint (FCP) y Largest Contentful Paint (LCP) puedes consultar una agencia seo como SeoinHouse, que seguro te ayudan a optimizar los diferentes parámetros que intervienen en la velocidad de carga de tu web para mejorar el posicionamiento seo de tu web. Tenemos oficinas en Barcelona, Girona, Bilbao y Madrid.
También puede interesarte:
Cómo mejorar la experiencia de usuario en mi web
La importancia del linkbuilding de calidad en 2021
Cómo optimizar las imágenes de tu tienda online para mejorar la velocidad de carga
7 pasos para mejorar la velocidad de carga de tu web
Las 5 mejores herramientas para medir la velocidad de tu web
