Todos hemos sentido esa chispa de frustración cuando una página web carga a paso de tortuga, o un botón se mueve justo cuando intentas hacer clic en él. En WPBeginner, nos obsesionamos con la velocidad del sitio porque sabemos que estos pequeños momentos marcan una gran diferencia en la experiencia del usuario.
Cuando Google introdujo las Core Web Vitals, le dio un nombre a estos problemas de rendimiento, pero la jerga técnica puede resultar abrumadora. Podrías preocuparte de que tu SEO se vea afectado si no tienes un título en informática.
La buena noticia es que no necesitas ser un desarrollador para obtener excelentes puntuaciones. Hemos pasado por este mismo proceso de optimización nosotros mismos y lo hemos reducido a lo esencial para ti.
En esta guía, te guiaremos a través de pasos sencillos y prácticos para mejorar tus Core Web Vitals para un sitio de WordPress más rápido y fluido.
Aquí tienes un resumen rápido de lo que cubriremos en esta guía:
- ¿Qué son las Core Web Vitals de Google?
- Cómo probar tu puntuación de Google Core Web Vitals
- ¿Por qué son importantes las Core Web Vitals?
- Cómo mejorar tus Core Web Vitals en WordPress (7 consejos)
- Preguntas frecuentes sobre Core Web Vitals
- Guías expertas sobre cómo medir y mejorar el rendimiento de WordPress
¿Qué son las Core Web Vitals de Google?
Las Core Web Vitals de Google son métricas de rendimiento específicas que el motor de búsqueda utiliza para medir la experiencia general del usuario de un sitio web. Estas puntuaciones son parte de las señales de experiencia de página de Google, que pueden influir en tus rankings de SEO.
La verdad es que a nadie le gusta un sitio web lento, y eso incluye a Google. Las Core Web Vitals te ayudan a medir qué tan rápido tu sitio se vuelve visible, interactivo y estable para tus visitantes.
Para ello, Google utiliza tres pruebas clave:
- Largest Contentful Paint (LCP)
- Interacción a Próxima Pintura (INP)
- Cumulative Layout Shift (CLS)
Nota: Hasta marzo de 2024, Google utilizó el Retraso de la Primera Entrada (FID) en lugar del INP. Es posible que aún veas esta métrica anterior reportada en algunas herramientas de prueba de rendimiento.
Los nombres de estas pruebas pueden sonar técnicos, pero lo que miden es bastante simple de entender. Veamos cómo funciona cada una.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) mide qué tan rápido el contenido principal de tu página se vuelve visible para los usuarios. Podría ser una imagen destacada, un bloque grande de texto u otro elemento prominente.
Una página puede cargarse rápidamente en general, pero si el contenido más importante aparece al final, la página aún se sentirá lenta para el usuario. LCP te ayuda a detectar y solucionar este problema.
Interacción a Próxima Pintura (INP)
Interaction to Next Paint (INP) mide cuánto tiempo tarda tu sitio en proporcionar retroalimentación visual después de que un usuario interactúa con él. Esta interacción podría ser un clic, un toque o una pulsación de tecla.
Por ejemplo, cuando alguien hace clic en el botón 'Enviar' de tu formulario de contacto, INP mide el tiempo hasta que algo cambia visualmente en la pantalla para reconocer esa acción.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) mide la estabilidad visual de tu página mientras se carga. Una puntuación CLS deficiente significa que los elementos saltan por la pantalla mientras la página se renderiza.
Esto es frustrante cuando un usuario intenta hacer clic en un botón, solo para que este se mueva en el último segundo porque un anuncio o una imagen se cargaron encima. Una buena puntuación CLS significa que tu diseño es estable y predecible.
Cómo probar tu puntuación de Google Core Web Vitals
La forma más fácil de probar tu puntuación de Core Web Vitals es con la herramienta PageSpeed Insights de Google. Simplemente ingresa la URL que deseas verificar y haz clic en el botón 'Analizar'.
Los resultados se muestran en la sección 'Evaluación de Core Web Vitals'. Una calificación aprobatoria se indicará en verde junto al encabezado.
Debajo de eso, puedes ver las puntuaciones específicas para cada una de las tres métricas. Para aprobar la evaluación, debes cumplir estos objetivos:
- Largest Contentful Paint (LCP): 2.5 segundos o menos
- Interaction to Next Paint (INP): 200 milisegundos o menos
- Cumulative Layout Shift (CLS): 0.1 o menos
Cómo ver las Core Web Vitals de tu sitio web completo
Para ver una puntuación promedio de tu sitio web completo, puedes usar el informe de Core Web Vitals en tu cuenta de Google Search Console.
Este informe te muestra qué URLs de tu sitio tienen puntuaciones buenas, necesitan mejora o son deficientes, lo que te permite priorizar tus esfuerzos de optimización.
Para obtener informes aún más detallados, puedes usar la prueba Lighthouse integrada directamente en el navegador Chrome. Simplemente abre un sitio web, haz clic derecho en cualquier lugar y selecciona la opción 'Inspeccionar'.
Nota: Debes ejecutar las pruebas de Chrome en modo incógnito para obtener los resultados más precisos. De lo contrario, tus propias extensiones del navegador podrían afectar negativamente las puntuaciones.
¿Por qué son importantes las Core Web Vitals?
Las Core Web Vitals son importantes porque reflejan directamente cómo los usuarios experimentan tu sitio web. Se centran no solo en la velocidad bruta, sino en la rapidez con la que los visitantes pueden ver e interactuar realmente con tu contenido.
Un estudio encontró que un retraso de un segundo en el tiempo de carga de la página puede causar una pérdida del 7% en conversiones y un 11% menos de visitas a la página. Un sitio web más rápido con una mala experiencia de usuario todavía está perjudicando tus resultados.
Mejorar las Core Web Vitals te ayuda a abordar esto. Dado que la experiencia del usuario es un factor confirmado de SEO de Google, una buena puntuación puede darte una ventaja sobre tus competidores.
Cómo mejorar tus Core Web Vitals en WordPress (7 consejos)
Mejorar tu puntuación de Core Web Vitals en WordPress no es tan difícil. Siguiendo algunos consejos esenciales de optimización de rendimiento, puedes pasar la evaluación fácilmente.
1. Optimizando tu Hosting de WordPress
Tu proveedor de hosting de WordPress juega el papel más importante en el rendimiento de tu sitio web. Un host de calidad optimiza sus servidores específicamente para WordPress, lo que le da a tu sitio una plataforma sólida para construir.
En WPBeginner, usamos SiteGround por esta misma razón. Son uno de los pocos hosts recomendados oficialmente por WordPress.org, y su rendimiento es excelente.
Su plataforma funciona en Google Cloud e incluye su potente plugin SG Optimizer. Maneja automáticamente todas las optimizaciones avanzadas de caché y rendimiento, lo que es una razón importante por la que nuestro sitio es tan rápido.
Si estás usando otro host, entonces WP Rocket es la mejor alternativa. Es el plugin de caché que recomendamos para nuestros otros proyectos, y hace que lograr una mejor puntuación de Core Web Vitals sea mucho más fácil.
2. Mejorando la Puntuación de Largest Contentful Paint (LCP)
Como mencionamos, LCP es el tiempo que tarda el elemento de contenido más grande en aparecer en la pantalla. En una publicación de blog típica, esta suele ser la imagen destacada o el texto del artículo.
Para saber qué elemento se está midiendo, desplázate hacia abajo en los resultados de PageSpeed Insights y expande la pestaña 'Elemento de Largest Contentful Paint'.
Si es una imagen grande, intente reemplazarla con un archivo más pequeño. Puede obtener más información en nuestra guía sobre cómo optimizar imágenes para la web.
3. Mejorar la puntuación de Interacción a la Siguiente Pintura (INP)
La puntuación de Interacción a la Siguiente Pintura mide el tiempo entre que un usuario hace clic en algo en su sitio y ve una respuesta visual. Un retraso prolongado aquí puede hacer que su sitio se sienta lento y sin respuesta.
Por ejemplo, imagine que un visitante completa un formulario de contacto y hace clic en el botón 'Enviar'. En nuestros sitios, usamos WPForms porque está diseñado para la velocidad y procesa los envíos sin demora, creando una experiencia fluida.
Una causa principal de un INP deficiente es el JavaScript que se carga antes del resto de la página. La forma más fácil de solucionar esto es con un plugin como WP Rocket, que te mostraremos cómo configurar.
Primero, necesitas instalar y activar el plugin. Después de eso, ve a Configuración » WP Rocket y cambia a la pestaña ‘Optimización de archivos’.
Desplázate hasta el final y marca la casilla junto a ‘Cargar JavaScript de forma diferida’. No olvides guardar tus cambios.
Esta configuración simple le dice a tu sitio web que cargue primero el contenido visible y espere al JavaScript. Este único cambio puede mejorar drásticamente tu puntuación de INP.
4. Mejorar la puntuación de Cumulative Layout Shift (CLS)
Una puntuación CLS deficiente se produce cuando los elementos de una página se mueven mientras se cargan. Para ver qué elementos están causando problemas, expande la pestaña ‘Evitar grandes cambios de diseño’ en tu informe PageSpeed.
Para evitar esto, debes indicar a los navegadores las dimensiones (ancho y alto) de tus imágenes, incrustaciones de video y anuncios. Esto permite que el navegador reserve la cantidad correcta de espacio para el elemento antes de que se cargue.
WordPress agrega automáticamente dimensiones a tus imágenes, pero debes verificar otras incrustaciones multimedia. Puedes hacerlo utilizando la Herramienta de inspección en tu navegador para verificar si un elemento tiene atributos de ancho y alto definidos.
5. Eliminar elementos que bloquean la representación
Los elementos que bloquean la representación son archivos, generalmente JavaScript o CSS, que deben cargarse antes de que se pueda mostrar el resto de tu página. Esto ralentiza la velocidad percibida de tu página y perjudica tus puntuaciones de Core Web Vitals.
PageSpeed Insights te mostrará estos archivos problemáticos. A menudo provienen de plugins y herramientas de terceros como Google Analytics o Facebook Pixel.
Arreglar esto manualmente puede ser complicado para los principiantes. Tenemos una guía paso a paso sobre cómo eliminar recursos que bloquean la renderización fácilmente sin tocar ningún código.
6. Dimensionar correctamente las imágenes en WordPress
Subir imágenes innecesariamente grandes es un error común que ralentiza los sitios web. Las fotos de alta resolución tardan mucho más en cargarse y a menudo no son necesarias para la visualización en la web.
Esto es especialmente problemático para los usuarios de dispositivos móviles. Aunque tu tema reducirá la imagen para que quepa en una pantalla más pequeña, el navegador del visitante todavía tiene que descargar el archivo de tamaño completo.
Tenemos una guía detallada sobre cómo optimizar correctamente las imágenes para tu sitio de WordPress sin perder calidad.
7. Usar una CDN para mejorar tu puntuación de Core Web Vitals
Una CDN, o Red de Entrega de Contenido (Content Delivery Network), es un servicio que hace que tu sitio sea más rápido para los visitantes de todo el mundo. Lo hace almacenando copias de tus archivos estáticos (como imágenes y CSS) en servidores en diferentes ubicaciones geográficas.
Esto permite a los usuarios descargar esos archivos del servidor que está más cerca de ellos, lo que reduce los tiempos de carga. También libera mucha carga de tu servidor de alojamiento principal.
En WPBeginner, confiamos en la CDN empresarial de Cloudflare. No solo aumenta nuestra velocidad, sino que también proporciona un potente firewall que bloquea millones de solicitudes de spam y ataques maliciosos todos los días.
Para la mayoría de las empresas, incluso el plan gratuito de Cloudflare ofrece un excelente servicio de CDN y protección básica de firewall. Es una de las formas más efectivas de mejorar tus puntuaciones de Core Web Vitals.
Preguntas frecuentes sobre Core Web Vitals
Habiendo ayudado a miles de usuarios a acelerar sus sitios web, recibimos muchas preguntas sobre Core Web Vitals. Aquí están las respuestas a algunas de las más comunes.
P: ¿Cuáles son las tres Core Web Vitals?
R: Las tres métricas principales son Largest Contentful Paint (LCP) para el rendimiento de carga, Interaction to Next Paint (INP) para la interactividad del sitio web y Cumulative Layout Shift (CLS) para la estabilidad visual.
P: ¿Cuál es una buena puntuación de Core Web Vitals?
R: Deberías apuntar a un LCP de 2.5 segundos o menos y un INP de 200 milisegundos o menos. Para CLS, una puntuación de 0.1 o inferior se considera buena.
P: ¿Puede un buen tema arreglar automáticamente mis Core Web Vitals?
R: Un tema bien codificado proporciona una excelente base, pero no es una solución mágica. Tus puntuaciones también se ven muy influenciadas por tu proveedor de hosting, el tamaño de las imágenes y la cantidad de plugins que utilizas.
P: ¿Con qué frecuencia debo revisar mis puntuaciones de Core Web Vitals?
R: Recomendamos revisar sus puntuaciones al menos una vez al mes. También es una buena idea probarlas después de instalar un nuevo plugin, cambiar su tema o agregar nuevas funciones importantes a su sitio.
Guías expertas sobre cómo medir y mejorar el rendimiento de WordPress
Ahora que sabe cómo optimizar Core Web Vitals, es posible que le interese ver otros artículos relacionados con la medición y mejora del rendimiento de WordPress:
- La guía definitiva para mejorar la velocidad y el rendimiento de WordPress
- Cómo acelerar el rendimiento de WooCommerce
- Cómo realizar correctamente una prueba de velocidad de sitio web (mejores herramientas)
- Cómo realizar una prueba de estrés a un sitio web de WordPress
- ¿Qué es la puntuación INP de Google y cómo mejorarla en WordPress?
- Cómo usar el plugin GTmetrix para mejorar el rendimiento del sitio de WordPress
- Hosting de WordPress más rápido (Pruebas de rendimiento)
Esperamos que esta guía le haya ayudado a aprender cómo optimizar Core Web Vitals para WordPress. Otra parte clave de la experiencia del usuario es la seguridad, por lo que recomendamos seguir nuestra lista de verificación de seguridad de WordPress para proteger su sitio.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Olaf
La optimización general del sitio web puede parecer simple "en papel", pero en la práctica, suele ser una historia diferente. Lograr números y velocidades impresionantes a veces puede parecer un trabajo arduo. Depende del estado del sitio web que herede y de qué tan bien lo haya mantenido el propietario anterior, o de las tecnologías que haya utilizado para crearlo. A veces, si un sitio está construido con un constructor de páginas y depende de múltiples plugins para cada función menor, es difícil idear cualquier estrategia para mejorar las métricas principales de la web. Esta lista proporciona un punto de partida sólido, una guía sobre qué revisar, qué mejorar y cómo hacerlo. Una gran base para principiantes.
Samuel
Es fácil dejarse llevar por otros aspectos del SEO y olvidar las métricas principales de la web. Si bien conozco la existencia de las métricas principales de la web para los usuarios, en realidad no les he prestado mucha atención. Cada vez que diseño un nuevo sitio de WordPress, mi enfoque siempre es qué tan rápido se posicionará en Google u otro motor de búsqueda. Leer este artículo está informando mis pensamientos para incluir las métricas de la web en mis flujos de trabajo como desarrollador web. Gracias por esta guía detallada. Acabo de terminar un sitio web para un nuevo cliente y este artículo se pondrá en uso siguiendo todas las instrucciones aquí. Muchas gracias.
Dayo Olobayo
Estaba luchando con el tiempo de carga lento de mi sitio de WordPress hasta que implementé las estrategias descritas en esta guía. Las instrucciones facilitaron la optimización de mis Métricas Principales de la Web y ahora mi sitio es rapidísimo. ¡Gracias!
Soporte de WPBeginner
¡De nada!
Administrador
Jiří Vaněk
Inicialmente, tuve muchos problemas con la velocidad de WordPress. Tengo un sitio web en mi propio servidor con 4 vCPUs y 8 GB de RAM. Aun así, seguía viendo cifras rojas. Con esto, quiero decir que muy a menudo, la optimización no se trata solo del rendimiento del servidor o del hosting, sino también de cómo optimizas WordPress en sí. En este contexto, debo decir que el plugin WP Rocket me ayudó más. Solo después de implementar este plugin finalmente obtuve números verdes. Quizás lo que más ayudó fue la precarga de enlaces de URL y una caché relativamente sofisticada. Probablemente ningún plugin de caché sea tan genuinamente bueno como WP Rocket. En cuanto al SEO, comencé a obtener mejores posiciones solo después de que el sitio web se optimizó correctamente.
Soporte de WPBeginner
Thank you for sharing what you use for your site
Administrador
Mohammed Haider
Tengo un sitio web en WordPress. No puedo pasar las métricas principales de la web. ¿Hay algún plugin gratuito de WordPress que pueda ayudarme a lograr esto?
Soporte de WPBeginner
Hay muchas partes diferentes en la puntuación de las métricas principales de la web, recomendaríamos echar un vistazo a la sección “Cómo mejorar tus métricas principales de la web en WordPress” para ver nuestras recomendaciones.
Administrador
Jiří Vaněk
El plugin Autooptimize con algún tipo de plugin de caché es gratuito y puede ayudar mucho.
Ladyson
No olvides que muchos creadores de temas de arrastrar y soltar presentan problemas con su código.
Actualizarlos regularmente también puede resolver el problema de las bajas puntuaciones. Están optimizando su código para Web Vitals.
Soporte de WPBeginner
That is certainly something to keep in mind as well
Administrador
miamiatz
Google es bueno inventando cosas útiles. El problema de Cumulative Layout Shift es crítico en la mayoría de los dispositivos digitales.
Quieres hacer clic en algo y te das cuenta de que el enlace/icono/botón en el que querías hacer clic se ha movido a otro lugar y terminas haciendo clic en otra cosa.
Este problema se encuentra incluso en aplicaciones principales de Android y no principales, incluidas aplicaciones de redes sociales, aplicaciones de noticias e incluso aplicaciones financieras. Es ridículo.
Pulgar arriba para Google por inventar estos Core Web Vitals.
Tengo uno o dos puntos que hacer a los interesados en las métricas web principales:
La mayoría de los temas de WordPress vienen con hojas de estilo que se cargan una tras otra.
El CSS personalizado declarado usando el personalizador de temas se carga al final.
Ahora, si declaras el tamaño o la forma de algo (incluso fuentes) en el CSS personalizado que se declaró de manera diferente en los archivos CSS del tema, el elemento se cargará primero con el estilo predeterminado del tema y luego se ajustará para obedecer la declaración CSS encontrada en el CSS personalizado.
Esto causa cambios de diseño.
Personal editorial
Gracias por compartir estas ideas. Sí, optimizar la entrega de CSS puede ayudar junto con la carga diferida de elementos.
Administrador
Ackson Mwape
Muchas gracias por el oportuno artículo.
Personal editorial
Always a pleasure Ackson
Administrador