Por qué estoy escribiendo esto

Ahora administro algunos sitios web y, desde que comencé, mi rendimiento ha tenido altibajos. A veces lo he encontrado francamente molesto. Todo parece funcionar muy bien para mí a nivel local, pero luego reviso los análisis de mi servidor y puedo ver que en ciertos países mi velocidad ha sido terrible.

Siempre ha parecido ser cualquieraCLSoLCPese ha sido el problema para mí. Así que pensé en compartir mi experiencia y tratar de ayudar a otros a resolver esto, especialmente si están pasando por lo mismo. ¿O tal vez ha tenido problemas con esto y tiene una perspectiva o solución única? Me encantaría saberlo.

De acuerdo aDiario del motor de búsqueda, optimizar estas dos métricas puede mejorar significativamente la visibilidad de su sitio y la satisfacción del usuario. Eso sonaba genial en teoría, pero arreglarlos ha sido una historia diferente. Déjame explicarte lo que he aprendido.

¿Qué son exactamente CLS y LCP?

Antes de entrar en mis propios problemas, permítanme explicarles cuáles son realmente, porque cuando vi estas siglas por primera vez en Google Search Console, no tenía idea de lo que significaban.

Cambio de diseño acumulativo (CLS)Mide cuánto salta el diseño de tu página mientras se carga. ¿Sabes cuando estás a punto de tocar un botón y toda la página cambia, por lo que haces clic en algo incorrecto? Ese es un problema de CLS. Es increíblemente frustrante como usuario y resulta que los motores de búsqueda también te penalizan por ello.

Pintura con contenido más grande (LCP)Mide cuánto tiempo tarda en cargarse el elemento visible más grande de tu página. Por lo general, se trata de una imagen principal o un gran bloque de texto. Si su LCP es lento, sus visitantes estarán mirando una página a medio cargar y muchos simplemente la abandonarán.

Ambos caen bajo el control de Google.Elementos vitales web básicos, que afectan directamente su clasificación de búsqueda. Entonces, incluso si su contenido es brillante, las malas puntuaciones de CLS y LCP pueden frenarlo.

Optimice su sitio web para CLS y LCP

🖼️

Establecer dimensiones de imagen
Especificar ancho y alto para imágenes

📢

Utilice anuncios de forma responsable
Evite cambios inesperados en el tamaño de los anuncios

⚡

Precargar recursos importantes
Asegúrese de que el contenido crítico se cargue rápidamente

🔄

Minimizar el contenido dinámico
Limitar el contenido que cambia durante la carga

📊

Supervisar el rendimiento con regularidad
Utilice herramientas para realizar un seguimiento de las puntuaciones CLS y LCP

Mi pesadilla CLS

CLS fue el primer problema que encontré. Mis páginas me parecieron bien, pero mis puntuaciones fueron terribles. Después de investigar mucho, encontré a los principales culpables:

Imágenes sin dimensiones:No estaba configurando el ancho y el alto en mis imágenes. El navegador no tenía idea de cuánto espacio reservar, por lo que todo cambió una vez que se cargaron las imágenes.
Las fuentes se cargan tarde:Mis fuentes personalizadas se cargaban después de renderizar la página, lo que hacía que todo mi texto saltara cuando la nueva fuente reemplazó la alternativa. Este fue sutil pero tuvo sentido.
Contenido dinámico:Tenía algunos componentes que inyectaban contenido después de cargar la página, empujando todo lo que había debajo hacia abajo.

La solución para la mayoría de mis problemas con CLS fue sorprendentemente simple. Comencé a definir dimensiones explícitas para todas las imágenes y medios. Agregué el intercambio de visualización de fuentes a la carga de fuentes para que el respaldo se muestre inmediatamente. Y reservé espacio con CSS para cualquier contenido que se cargue dinámicamente.

Herramientas comoEstadísticas de PageSpeed de GoogleFueron de gran ayuda aquí. Le muestran exactamente qué elementos están provocando cambios en el diseño, por lo que no tendrá que adivinar.

Luego vino el problema del LCP

Justo cuando pensaba que ya había solucionado las cosas, miPuntuaciones LCPcomenzó a flaquear. La parte frustrante fue que mi sitio se cargó rápidamente en el Reino Unido, pero mis análisis mostraron velocidades terribles en otros países. Eso es lo que pasa con LCP: depende en gran medida de dónde están sus usuarios y qué tan lejos están de su servidor.

Los principales problemas que encontré fueron:

Imágenes grandes no optimizadas:Las imágenes de mis héroes eran demasiado grandes. Estuve subiendo fotos en resolución completa sin comprimirlas.
Tiempo de respuesta del servidor:Sin una CDN, los usuarios alejados de mi servidor esperaban años la primera respuesta.
JavaScript que bloquea el renderizado:Tenía scripts cargándose en el encabezado que bloqueaban la visualización de la página hasta que terminaban.

ComoEl estudio de Backlinko.Como muestra, los sitios con buenos puntajes LCP tienen una participación notablemente mejor y tasas de rebote más bajas. Una vez que comencé a solucionar estos problemas, pude ver la diferencia en mis propios análisis.

Lo que realmente ayudó a mi LCP

Comencé a comprimir todas mis imágenes y a usar el formato WebP siempre que era posible. También moví scripts no esenciales para cargarlos de forma asincrónica o los aplacé por completo. Mis sitios están alojados en Vercel, que maneja muchas de las cosas de la red perimetral por mí, pero si utiliza un alojamiento tradicional, configurar unCDNpuede marcar una gran diferencia para el tráfico internacional.

Una CDN almacena copias de su sitio en ubicaciones de todo el mundo, por lo que los visitantes reciben servicios desde un lugar más cercano a ellos en lugar de desde su único servidor de origen. Si observa malas velocidades en regiones específicas, esa es una de las primeras cosas que vale la pena considerar.

La parte molesta: nunca se "arregla" realmente

Esto es lo que nadie te cuenta.CLS y LCP. No los arreglas una vez y sigues adelante. Cada vez que agrego una nueva característica, una nueva imagen o cambio mi diseño, las puntuaciones pueden cambiar nuevamente. Es algo continuo.

He tenido semanas en las que todo está verde en Google Search Console, luego agrego un componente nuevo y de repente mi CLS vuelve a marcarse. Es francamente molesto, pero ahora he aprendido a verificar mis Core Web Vitals después de cada cambio significativo.

Impacto de CLS y LCP en la experiencia del usuario

0,1 segundos

Tolerancia del usuario

32%

Aumento de la tasa de rebote

Caída de la tasa de conversión

Elementos vitales web básicos

Importancia del ranking SEO

un informe deLa marca financieradestaca cómo los sitios web lentos pueden conducir directamente a la pérdida de ingresos. Esa es motivación suficiente para estar al tanto, incluso cuando parezca tedioso.

Las herramientas que más me han ayudado

Si tiene los mismos problemas, estas son las herramientas que realmente uso y que encuentro útiles:

Consola de búsqueda de Google:Aquí es donde noté por primera vez mis problemas. Muestra sus puntuaciones de Core Web Vitals desglosadas por página y le dice exactamente qué necesita atención.
Información de PageSpeed:Repaso cada página a través de esto después de realizar cambios. Ofrece recomendaciones específicas y prácticas en lugar de consejos vagos.Guía de rendimiento web de ShopifyTambién es un gran recurso complementario.
Extensión de Web Vitals:Esta extensión de Chrome muestra su CLS, LCP y otras métricas en tiempo real mientras navega por su propio sitio. Lo mantengo encendido constantemente durante el desarrollo.

Una vez que haya identificado sus problemas de rendimiento, utilice nuestroHerramienta de clasificación de IA de la Búsqueda de Googlepara comprobar si sus mejoras realmente se están traduciendo en una mejor visibilidad de búsqueda. No tiene sentido arreglar puntuaciones si eso no ayuda a tu clasificación.

Mi consejo si estás pasando por esto

Si su desempeño ha tenido tantos altibajos como el mío, esto es lo que sugeriría:

No entre en pánico.Los problemas de CLS y LCP son increíblemente comunes. No estás haciendo todo mal: estas métricas son simplemente sensibles.
Consulta tus analíticas por país.Su sitio puede ser rápido para usted pero lento para los visitantes de otros lugares. Una CDN puede resolver esto rápidamente.
Primero arregle las imágenes.En mi experiencia, las imágenes no optimizadas y las dimensiones faltantes son la causa de la mayoría de los problemas de CLS y LCP.
Pruebe después de cada cambio.Adquiera el hábito de ejecutar PageSpeed Insights cada vez que realice actualizaciones importantes.
Ser paciente.Los datos de Google Search Console pueden tardar días o semanas en actualizarse. No asuma que sus correcciones no funcionan solo porque el panel aún no ha cambiado.

Todavía estoy aprendiendo y sigo lidiando con esto. Mis puntuaciones son mejores que antes, pero no las llamaría perfectas. Si ha encontrado soluciones que le han funcionado, realmente quiero conocerlas. También puedes intentar visualizar tus datos de rendimiento con nuestrocreador de gráficos en línea gratuitopara realizar un seguimiento de las mejoras a lo largo del tiempo.

La conclusión es esta:CLS y LCPno van a desaparecer. Son importantes para el SEO, son importantes para la experiencia del usuario y, si administra sitios web como yo, lo mantendrán alerta. Pero se pueden solucionar y cada mejora que realices vale la pena.