Estás leyendo la publicación: Optimización de su sitio de nicho para Core Web Vitals: herramientas, proceso y preguntas
La optimización de su sitio web de nicho para Core Web Vitals (CWV) es una táctica para ayudar a mejorar la experiencia general de la página de sus usuarios. Google ya ha confirmado que la experiencia de la página es una señal que utilizan para determinar la clasificación del motor de búsqueda.
En mayo de 2020, Google anunció que CWV eventualmente se convertirá en uno de los elementos que evalúan como parte de sus señales generales de experiencia de página.
Los otros elementos de la experiencia de la página son la optimización para dispositivos móviles, la navegación segura, las páginas seguras (HTTPS) y los intersticiales intrusivos (piense en las molestas ventanas emergentes que cubren la pantalla y son difíciles de cerrar).
En este escrito, se cubrirá lo siguiente:
- ¿Qué es CWV?
- ¿Por qué cuidar?
- Herramientas para probar CWV
- Sugerencias de optimización con y sin anuncios gráficos
- Preguntas comunes
He invitado a Keith Mint a colaborar en este artículo. Dirige una cartera de sitios web y también blogs en Minted Empire. Ha pasado una buena cantidad de tiempo estudiando y mejorando sus sitios web para CWV. También proporcionaré información dentro del artículo.
¡Entremos en ello!
¿Qué son los principales web vitals?
Google ha dividido Core Web Vitals en tres elementos principales:
- Cargando – Pintura con contenido más grande (LCP)
- interactividad – Retardo de primera entrada (FID)
- Estabilidad Visual – Cambio de diseño acumulativo (CLS)
Ya hay muchas definiciones y explicaciones sobre los elementos de Core Web Vitals en la web. Los resumiré en un lenguaje no técnico muy rápidamente:
- LCP – cuando se carga una página, este es el tiempo que tarda en aparecer el contenido legible.
- DEFENSOR – cuando se carga una página, ¿qué tan rápido puede interactuar el usuario? Por ejemplo, haga clic en un menú.
- CLS – una medida de cómo se empujan los elementos (generalmente hacia abajo) en la pantalla después de que se haya cargado otro elemento.
Aquí hay un recurso informativo para leer más sobre estos factores.
¿Por qué molestarse en optimizar para CWV?
Veo dos razones importantes por las que los propietarios de sitios web de nicho deberían optimizar su Core Web Vitals.
En primer lugar, como lo confirmó Google, será una señal de clasificación para el motor de búsqueda más popular del mundo.
En segundo lugar, prestar atención y optimizar la experiencia de la página del usuario puede mejorar la tasa de conversión de esa página.
¿Cómo complican las redes publicitarias el desafío de la optimización?
Optimizar para web vitals principales puede ser un desafío. Esto es especialmente cierto si su sitio está integrado dentro de una red de publicidad gráfica que emplea sus propias optimizaciones de velocidad del sitio.
Cuando se trata de optimizar la velocidad, el mayor error que he visto cometer a los propietarios de sitios web es usar complementos que realizan funciones similares a la tecnología de optimización que utiliza la red publicitaria.
Esto a menudo resulta en conflictos y puede manifestarse en puntajes de velocidad del sitio muy bajos.
Según la configuración de su sitio web y las diversas capas de tecnología implementadas, la optimización puede convertirse en un dolor de cabeza técnico.
Hace poco pasé un tiempo optimizando mis propios sitios para web vitals centrales. Pude obtener puntajes muy altos para mi sitio web que no tiene anuncios gráficos.
En cuanto a mi sitio que ejecuta anuncios gráficos, tenía más trabajo que hacer, como leerá a continuación.
Herramientas para probar la velocidad de la página del sitio web
Hay muchas herramientas disponibles para probar las métricas de rendimiento de una página web. Incluyen:
Si bien el informe en cascada de Gtmetrix es bueno para depurar ciertos problemas de la página, en su lugar, usé principalmente PageSpeed Insights de Google para ejecutar mis pruebas de velocidad. Tenía sentido optimizar para la herramienta de Google porque es su algoritmo lo que finalmente estamos tratando de impresionar.
Mi enfoque para optimizar los sitios web de mi nicho para Core Web Vitals
He estado optimizando la velocidad del sitio web durante más de una década. Soy consciente de que el proceso de optimización puede tener muchos matices.
Entonces, decidí adoptar un enfoque muy simple.
Cada sitio web es diferente, por lo que hay poco que ganar si comparto la configuración exacta que utilicé para cada complemento o configuración. Seguir ciegamente ese enfoque es muy probable que rompa alguna funcionalidad en su sitio web. La solución de problemas podría resultar difícil.
En cambio, describiré el enfoque que tomé para lograr puntajes altos. Hay mucho ensayo y error involucrado.
Empecé optimizando un sitio web que no es de nicho y que tengo. Es un negocio de generación de prospectos con poco tráfico mensual. Se ejecuta en WordPress. No tiene anuncios gráficos. Es muy mínimo, pero aún se ve atractivo para los posibles clientes potenciales.
Antes de la optimización, normalmente obtenía una puntuación de entre 40 y 50 en dispositivos móviles y fallaba en todos los Core Web Vitals.
Después de algunos ajustes, logré esto:
Eso es genial, pero no me emocioné demasiado porque sabía que sería casi imposible lograr el mismo resultado en un sitio web que usa una red de publicidad gráfica de terceros.
Sin embargo, el resultado me mostró que estaba comenzando con el pie derecho en términos de mi elección de tecnología.
Antes de entrar en los detalles de lo que hice para lograr ese puntaje, es importante tener en cuenta que cada vez que ejecuto PageSpeed Insights de Google, obtengo resultados diferentes.
Ejecuté PageSpeed Insights diez veces diferentes, siempre usando la misma publicación de blog seleccionada al azar.
En general, utilizando un cálculo promedio simple, el sitio pasa CWV. Sin embargo, las pruebas 2, 3 y 7 fallaron en CWV porque la pintura con mayor contenido (LCP) se mostraba en más de 2,5 segundos.
Lo interesante es que la página que se está probando no cambia dinámicamente de ninguna manera. No se están realizando conexiones de terceros desde la página. No se están cargando fuentes alojadas externamente, por ejemplo.
Profundizar en los porqués y cómos exactos de por qué estos resultados pueden ser diferentes está más allá del alcance de este artículo. Es cierto que también está más allá de mi comprensión. Francamente, cuando una página tiene un puntaje tan alto, probablemente no importe por qué los puntajes varían de esa manera.
Sin embargo, a medida que crece la complejidad de la pila tecnológica, la variación de los puntajes de las pruebas puede hacer que las optimizaciones sean aún más matizadas.
He realizado cientos, si no miles, de pruebas. El móvil siempre puntúa más bajo que el escritorio. Ahora, ni siquiera miro el puntaje de Desktop cuando estoy probando. A mí, no me importa. Espero que Google sienta lo mismo dado que cambiaron a un índice móvil primero hace algún tiempo.
Analicemos los pasos que tomé para lograr este puntaje promedio de PageSpeed Insights de 97.4 en dispositivos móviles.
1. Utiliza alojamiento rápido
El sitio se alojó originalmente con SiteGround. Lo migré a mi cuenta de CloudWays donde tengo un servidor Vultr de alta frecuencia en ejecución. Es la especificación mínima, la opción más baja que puede elegir actualmente al registrarse.
Mantuve los archivos del sitio original y la base de datos en SiteGround como respaldo. No puedo enfatizar lo suficiente la importancia de realizar copias de seguridad en varias etapas de un proceso de optimización.
Notas de Mushfiq: También uso Cloudways en un servidor de Digital Ocean. Cloudways, en general, es increíble, por lo que cualquier servidor back-end que utilice, ya sea Digital Ocean, AWS, Vultr, etc., no hará la diferencia.
2. Usa un tema Lean
Cambié el tema de WordPress a GeneratePress Premium (GP).
GP está muy bien modularizado. Solo habilité los módulos particulares que necesitaba para reconstruir el aspecto para que fuera muy similar al diseño original.
Notas de Mushfiq: También soy un firme defensor de GeneratePress Premium asociado con GenerateBlocks. Cada sitio que compro se rediseña con GeneratePress.
3. Complementos: eliminar la hinchazón
Pensé en cada complemento antes de habilitarlo en el sitio web. Tenía que ser esencial para que el sitio web funcione correctamente o una parte esencial de mi embudo de ventas.
Me deshice de las fuentes de Google y mantuve las fuentes del sistema predeterminadas de GeneratePress. Me gusta y aprecio el diseño. No esperaba que me gustara el aspecto de las fuentes del sistema, pero son sorprendentemente claras y se ven bien para mis ojos quisquillosos.
Si un complemento era “pelusa”, lo eliminé.
Habilité Rank Math SEO y solo habilité los módulos que quería. Apagué el módulo de Google Analytics de Rank Math porque, aunque poseo la versión premium, no pude hacer que su funcionalidad ‘cargar ga.js localmente’ funcione correctamente. Seguía solicitando el archivo Javascript de análisis de forma remota sin importar lo que intentara. Más sobre esto más adelante.
Notas de Mushfiq: Si adquiere un sitio o ha creado un sitio durante muchos años, los complementos se agregan y nunca se eliminan. ¡Haz una auditoría de complementos! Elimine cualquier complemento que no tenga valor y consolide donde sea posible. Por ejemplo, muchos propietarios de sitios agregan un complemento para compartir en redes sociales. En primer lugar, la mayoría de los sitios de nicho no se compartirán en las redes sociales, por lo que vale la pena eliminarlos hasta que el sitio sea una verdadera marca.
4. Complementos: los motores de agujas
Todos los expertos en velocidad de sitios web predicarán sobre la importancia de optimizar las imágenes. Estoy completamente de acuerdo con ellos.
Hay muchos complementos disponibles para optimizar las imágenes. Probé algunos de ellos y me decidí por ShortPixel.
Uso ShortPixel con configuraciones con pérdida para servir también imágenes WebP. Si usa CloudFlare, preste atención al método que usa para servir imágenes WebP. El método de redirección .htaccess no funciona con CloudFlare.
Complemento PerfMatters
Perfmatters es un complemento excelente para controlar qué secuencias de comandos y archivos CSS se cargan en cada categoría, tipo de publicación o página/publicación individual en su sitio web.
Para mi sitio, pude usar la mayoría de las optimizaciones. El complemento PerfMatters también me permitió cargar el script de Google Analytics localmente, mientras que la funcionalidad GA local de RankMath Pro no funcionó correctamente para mí. Quizás esto se haya resuelto en una actualización posterior.
Script Manager de PerfMatters es una herramienta increíble. Para aprovecharlo al máximo, primero deberá comprender qué scripts y archivos CSS se necesitan realmente para que su sitio web funcione como debería.
Es importante observar cómo se cargan todos los scripts JS y CSS individuales ANTES de combinarlos y minimizarlos. Esto facilita la selección manual de los scripts individuales que necesita deshabilitar/habilitar en ciertas páginas/publicaciones/secciones/publicaciones personalizadas, etc. desde el Administrador de secuencias de comandos.
Entonces, solo como ejemplo, ahora tengo mi script de formulario cargándose SOLAMENTE en mi página de contacto. Como empresa local, la página de contacto es esencial para mi negocio en términos de recopilación de clientes potenciales.
Como otro ejemplo, tengo una sección de tipo de publicación personalizada que estaba cargando scripts y archivos CSS EN TODO EL SITIO. Gracias a Perfmatters, esto ahora solo se carga en la sección del sitio que realmente los necesita.
Después de algunos ajustes para habilitar y deshabilitar los archivos CSS y JS individuales, el enfoque aquí fue asegurarse de que el sitio se viera y funcionara correctamente.
La velocidad no es una preocupación todavía.
Una vez que estuve satisfecho de tener la configuración correcta, el siguiente paso fue habilitar y configurar Breeze, que es el programa de almacenamiento en caché de CloudWays. Tiene una funcionalidad similar a WP Rocket, WP Super Cache, W3 Total Cache, SG Optimizer, etc.
Notas de Mushfiq: Personalmente no he usado Perfmatters (pero tiene cosas buenas). Uso el complemento de limpieza de activos gratuito. Este complemento le permite eliminar scripts de páginas específicas.
Complemento de almacenamiento en caché de Breeze
Usé Breeze porque está desarrollado y diseñado para ejecutarse en servidores CloudWays. SiteGround utiliza SG Optimizer. Ambos son complementos decentes. WP Rocket también es bueno.
Sin embargo, para mi pila actual, Breeze fue mi complemento de elección.
Encendí todas las configuraciones de optimización de Breeze. Compresión Gzip, minificación completa con archivos JS y CSS agrupados.
A continuación, probé el sitio de incógnito con todo el almacenamiento en caché borrado. Todo se veía bien y funciona como se esperaba. Mi formulario de contacto genera clientes potenciales. ¡Eso es lo más importante!
Varnish es otro nivel de almacenamiento en caché del servidor y se habilita y configura a través de Breeze.
Su millaje puede variar en términos de qué archivos puede minimizar o incluir en la agrupación. Ciertas funciones en el sitio web pueden romperse. Es importante probar y ver lo que puede salirse con la suya.
Tuve la suerte de que todo funcionó a la primera para mí. Esa es una de las ventajas de optar por un diseño simple con una funcionalidad mínima.
Nota de Mushfiq: Soy un firme defensor del uso de WP Rocket. Es un complemento premium pagado y se instala en todos mis sitios. Al final del día, cualquier complemento que haga el almacenamiento en caché del sitio web hará el trabajo.
5. Integrar una CDN – CloudFlare
Finalmente, agregué CloudFlare (su versión gratuita).
Activé el APO de CloudFlare que usa su red perimetral para almacenar en caché un sitio de WP. No estoy seguro de que esto realmente haya movido la aguja para mi configuración particular. Tal vez habría hecho más si hubiera intentado cargar varias fuentes de Google alojadas de forma remota.
Nota de Mushfiq: Cloudflare es imprescindible. Lo integro en todos mis sitios. Solo uso la versión gratuita; no necesita la versión paga para sitios de contenido.
Cómo optimizar sitios de nicho para anuncios gráficos
¡Aquí es donde comienza la diversión!
Mi siguiente tarea fue ver cómo podía implementar mis mejoras de velocidad en uno de mis sitios web especializados que muestran anuncios de terceros.
Yo uso Ezoic. Es un hecho simple que mostrar anuncios de cualquier proveedor ralentizará un sitio web. Período. Todo lo que podemos esperar es optimizar el sitio lo mejor que podamos. Una puntuación perfecta es poco probable en este escenario.
Primero, seguí mis técnicas anteriores, casi a la perfección. La misma configuración de alojamiento, el mismo tema de WordPress y una pila de complementos muy similar.
Luego, con Ezoic desactivado temporalmente, realicé una prueba de velocidad diez veces diferentes. Permití que transcurriera un minuto entre cada ejecución.
Aquí están los resultados de la prueba de velocidad:
No estoy seguro de qué sucedió con el resultado de la prueba 6 anterior. Un CLS de 0,1 o menos se considera bueno. Entonces, mi CLS promedio de 0.1 simplemente pasa.
Puramente por curiosidad, luego actualicé el resultado de la prueba 6 y mostró un CLS de 0. Tal vez fue una falla en la matriz. Sin embargo, he dejado los resultados de la prueba sin modificar.
La conclusión es que, en general, sin anuncios que se ejecutan a través de mi integración con Ezoic, mi sitio de nicho pasa Core Web Vitals según las pruebas de laboratorio.
Habilitación de Ezoic y evaluación del impacto de los anuncios gráficos en CWV
Luego, volví a habilitar Ezoic en mi sitio y encendí su nueva herramienta de optimización Leap. Leap reemplazará el conjunto de herramientas Acelerador de velocidad del sitio de Ezoic.
Leap se encuentra actualmente en versión beta y después de muchas horas de ajustes, estos son los mejores puntajes que pude lograr:
El puntaje promedio para la pintura con contenido más grande (LCP) es 2.6. Tiene que ser 2.5 segundos o más rápido para ser considerado un pase.
Es decepcionante estar tan cerca, pero tal vez cuando Ezoic’s Leap salga de la versión beta, tendrá más optimizaciones que permitirán que mi sitio pase por completo Core Web Vitals.
Según mis pruebas, las oportunidades enumeradas en la página de análisis de la herramienta de prueba PageSpeed Insights de Google siempre se relacionan con los scripts que Ezoic carga para mostrar los anuncios.
No es perfecto, pero lo considero lo suficientemente bueno para un sitio web que carga anuncios gráficos personalizados.
Preguntas comunes sobre CWV
¿Cuándo se pone en marcha la actualización de Core Web Vitals?
¿Cómo se recopilan las puntuaciones de Core Web Vitals?
Las puntuaciones de Core Web Vitals se basan en las puntuaciones de la experiencia del usuario del navegador Chrome durante un período de recopilación de 28 días. Sus puntajes pueden ser muy diferentes de lo que muestran las pruebas de laboratorio durante las ejecuciones individuales de la herramienta de prueba PageSpeed Insights de Google.
Google ha explicado que se puede lograr un pase en Core Web Vitals si una página cumple con los objetivos recomendados en el percentil 75 de todas las cargas de página en dispositivos móviles y de escritorio.
¿Una puntuación de Core Web Vitals pobre afecta la tasa de rebote?
Google ha informado que los Core Web Vitals deficientes que provocan retrasos en los tiempos de carga de la página pueden tener un impacto negativo significativo en las tasas de rebote. Un estudio ha demostrado que incluso una caída de 2 segundos de 1 a 3 segundos puede aumentar la tasa de rebote en un 32 %.
Este artículo explica con gran detalle el impacto en el mundo real de las páginas de carga lenta.
Terminando
Sabemos desde hace mucho tiempo que un sitio web más rápido aumenta las conversiones y mejora la experiencia general del usuario.
Vale la pena invertir un poco de tiempo en optimizar su sitio de nicho para la próxima actualización de experiencia de página de Google que se espera para mediados de junio. Core Web Vitals será un componente esencial de Page Experience, aunque nadie sabe con certeza qué impacto tendrá la actualización en los SERP.
Como puede tener muchos matices, las ganancias fáciles serán centrarse en los conceptos básicos de optimización. Estos conceptos básicos incluyen:
- Alojamiento rápido con un tiempo decente hasta el primer byte (use Cloudways)
- Optimización de imágenes y fuentes, incluidas imágenes de próxima generación y carga diferida (use Shortpixel)
- Minificación y agrupación de archivos CSS y JS (use WP Rocket, Breeze u otros complementos de almacenamiento en caché)
- Cargar archivos de script externos localmente cuando sea posible
- Precarga de DNS
- Encabezados de caducidad apropiados
La regla 80/20 se aplica aquí con seguridad. Probablemente logrará el 80 % de los beneficios de la optimización en el primer 20 % del tiempo invertido. Google ha reconocido que esta es un área en evolución y se pueden esperar futuras adiciones a Core Web Vitals.
Notas de Mushfiq: A Google también le gusta recordar a los editores que una buena experiencia en la página no anula la importancia de tener un gran contenido. ¡Realice las victorias fáciles y publique contenido excelente!
