Core Web Vitals: así es como optimiza su tienda web Magento

Probablemente hayas oído hablar de Core Web Vitals antes. Es importante darse cuenta de cómo le está yendo a su tienda web actual, qué problemas deben abordarse y ponerlos en la hoja de ruta. Pero, ¿qué actividades debe considerar al utilizar la plataforma Magento / Adobe? ¿Y qué cosas debería incluir directamente en su cartera de pedidos para aprovechar estos nuevos factores de clasificación?

Inicialmente, Google agregaría estas métricas a los factores de clasificación del algoritmo ya en mayo de 2021. Ahora ha quedado claro que se pospondrá hasta junio de 2021. Así que tenemos un poco más de tiempo para profundizar más y comenzar con las primeras optimizaciones. Debido a que el trabajo de desarrollo está involucrado, es posible que no sea posible tener todo listo para junio.

El 21 de abril de 2021, Jason Woosley, vicepresidente de productos y plataformas comerciales, anunció que el nombre de Magento Commerce cambiará a Adobe Commerce. Hace tres años, Adobe se hizo cargo de Magento. La versión comunitaria de Magento seguirá llamándose Magento Open Source. Debido a que todavía tenemos que acostumbrarnos al nuevo nombre y la legibilidad, estoy hablando de las tiendas web de Magento en general en este blog. Pero las optimizaciones se pueden utilizar tanto para Adobe Commerce como para Magento Open Source. Con una nota al margen, Adobe Commerce tiene más opciones para ejecutar las cosas más rápido que en la plataforma de código abierto. Si elige Adobe Commerce Cloud, algunas optimizaciones son incluso estándar.

Impacto esperado de Core Web Vitals en su SEO

Es probable que en la actualidad dedique la mayor parte de su tiempo a optimizar su contenido, recopilar vínculos de retroceso relevantes y hacer que su tienda web sea compatible con dispositivos móviles. Estas actividades siguen siendo relevantes, pero se agrega algo más. Google se fija cada vez más en la facilidad de uso de la página. Por lo tanto, no solo miran si hay contenido relevante que los usuarios están buscando en ese momento, sino también cosas como poder navegar de manera segura (sin malware) y usar HTTPS.

¿Qué importancia tienen los Core Web Vitals?

Los Core Web Vitals, que incluyen estabilidad visual, carga rápida de la página y tiempo de interacción de la página, pronto serán parte de toda una serie de factores de clasificación conocidos y desconocidos para Google.

Danny Sullivan, enlace público para la búsqueda en Google, ofrece durante una Buscar chat en vivo en el centro de búsqueda la siguiente. Suponga que tiene una puntuación perfecta de Core Web Vitals para una página, pero no el contenido más relevante. Entonces no necesariamente ganará una página que contenga el contenido más relevante, pero que tenga una experiencia de página menos buena.

Indica que Google eventualmente preferirá páginas con contenido relevante además de una buena experiencia de usuario. Y que realmente tendrá un impacto en su posición en el ranking. En junio probablemente no habrá un botón en el que verá inmediatamente el impacto si aún no lo ha logrado, pero con el tiempo, trabajar en la optimización de Core Web Vitals será tan importante como su contenido y su estrategia de construcción de enlaces. Los desarrolladores también deben tener en cuenta estas métricas al crear nuevas funcionalidades o tiendas web. ContentKing acaba de recibir uno nuevo para esto alerta-actualización introducido. A continuación, recibirá una notificación cuando una página ya no pase el Core Web Vitals, para que pueda comenzar.

¿Cómo se miden los Core Web Vitals?

Antes de comenzar a optimizar Core Web Vitals, por supuesto, es importante saber cómo lo está haciendo ahora. Puedes usar el Velocidad de páginaherramienta de Google, pero también existen otras herramientas. Por ejemplo, el consultor de velocidad del sitio Erwin Hofman tiene una Calculadora de ROI donde puede ver inmediatamente sus ventas perdidas en función de sus métricas actuales. Además, puede calcular el ROI para cada mejora, por ejemplo, en las velocidades de carga. Hofman usa el Base de datos CrUX de Google. También Contentking agregó las métricas de Core Web Vitals a su herramienta, para que tenga una buena descripción general.

Tenga en cuenta que es posible que no vea Core Web Vitals. A menudo, esto se debe a que hay muy poco tráfico en su tienda web. Luego, solo puede comenzar con la pintura de contenido más grande (rendimiento de carga) a través de Sitespeed y el cambio de diseño acumulativo (desplazamiento del diseño de la página durante la carga) a través de GTmetrix. Otra métrica importante que siempre puede ver es el tiempo hasta el primer byte o TTFB (la duración del servidor para servir la página). Con esta métrica puede ver si el respuesta del servidor es suficiente. Si esto no está en orden, puede optimizar lo que quiera, pero nunca sacará el máximo provecho de ello.

Si tiene suficiente tráfico, también verá el Retraso de la primera entrada (tiempo hasta la primera interacción) en Google Pagespeed.

¿Qué requisitos deben cumplir las métricas?

Cuando empiezo a optimizar, naturalmente quiero ser el primero en conocer el punto de partida. Además, me gustaría saber adónde ir para sacar el mayor provecho de la optimización. ¿Qué requisitos deben cumplir los Core Web Vitals según Google?

Diferentes partes de Core Web Vitals.

Si observa el TTFB, se recomienda que esté al menos por debajo de 600 ms. Idealmente incluso por debajo de 200 ms. La velocidad depende de la elección de su servidor de alojamiento, pero también de la configuración en sí, la calidad del código y los módulos en la tienda web o en almacenamiento en caché de backend. Fiestas como Hypernode por Byte en Hipex se especializa en el alojamiento de productos Magento / Adobe Commerce y también puede ayudarlo a configurar su entorno de servidor.

Optimización de los elementos básicos de la Web para Adobe Commerce

¿Has tomado tus medidas y has visto que aún puedes optimizar un poco? Ahora hagámoslo concreto. ¿Qué puede hacer para obtener una buena puntuación con su tienda web de Magento en Core Web Vitals?

Óptimo de pintura contenida más grande

  • Baje el TTFB con los siguientes consejos.
  • Usar una CDN como Cloudflare, Rapidamente de CloudFront si se centra en varios países.
  • Usar una función de visualización de fuente, por ejemplo, visualización de fuente: auto; o visualización de fuente: intercambiar.
  • Carga cierto JavaScript externo cuando el usuario comienza a desplazarse (útil en algunos casos, por ejemplo, para una función de chat).
  • Conéctese más rápido con terceros agregando un rel = preconnect cuando utilice un . Web.dev hizo uno aquí Blog encima.
  • Bajar el Tiempo de bloqueo de JavaScript puerta JavaScript para agrupar, para hacer uso de División de paquetes en Aplazar el análisis de JS aplicando.
  • Disminuir el bloque CSS por la opción Minificar CSS en la configuración del desarrollador y por el ‘Ruta crítica de CSS‘ encender.
  • No uses demasiadas imágenes innecesarias
  • Asegúrese de que las imágenes utilizadas sean comprimido.
  • Usarlo WebP-formato para imágenes. Este formato no es compatible con Internet Explorer, pero no permita que eso le impida utilizar un formato WebP. Yireo ofrece uno para esto módulo gratis En.
  • Implemente una “CDN de imagen”.
  • Cambiar GZip en.
  • Utilice un llamado ‘trabajador del servicio‘para precargar imágenes y otros activos.
  • Use ‘pre-renderizado’, aunque debe considerar invertir mucho dinero para hacerlo en Adobe Commerce y Magento.
  • Invierta en una interfaz optimizada, creada por un desarrollador calificado.
  • Manténgase alejado de los temas comprados. Estos suelen tener un rendimiento deficiente.
  • Usar carga lenta para imágenes.

¿Cómo se reduce el TTFB?

  • Utilice un servidor potente y bien configurado.
  • Limita el número módulos de terceros. Este código suele tener una calidad mediocre y un rendimiento deficiente.
  • También pruebe el TTFB durante el proceso de desarrollo con cada demostración, para mantener su dedo en el pulso.
  • Usar caché como Redis, Barniz, Opcache en caché de navegador. Pero cuidado, el caché no es una panacea para una tienda web lenta.
  • Pruebe todo tipo de páginas: página de inicio, página de categoría, página de producto, carrito de compras y páginas CMS.

Optimizar FID

  • Divida el código de larga duración en pequeños fragmentos a-synchone tareas a utilizar.
  • Optimice sus páginas para una interacción más rápida ofreciendo scripts propios más rápido. No olvide los scripts de terceros.
  • Intente reducir la cantidad de datos.
  • Utilice un trabajador web para que pueda incluir componentes que no sean de interfaz de usuario en este.
  • Reduzca el tiempo de ejecución de JavaScript retrasando el JavaScript no utilizado.
  • Reducir el número de no utilizados ‘Polyfills‘.
  • Utilice la menor cantidad de JavaScript posible, solo donde sea necesario. Eso Buen tema es un buen ejemplo de esto.
  • Evite bloquear JavaScripts con un tiempo de publicación prolongado. Esto incluye publicidad, software de seguimiento, scripts de la mesa de ayuda y otros ‘fragmentos’ que se colocan en la página o mediante Tag Manager.
  • Asegúrese de que JavaScript se cargue rápidamente a través de una CDN, incluidos los scripts de terceros.

También coordine las optimizaciones de Core Web Vitals con el equipo de ventas y marketing. Hay muchos departamentos de marketing que deciden incluir varias otras herramientas además de Hotjar. Esto puede dificultar su desempeño.

Optimizar CLS

  • Selecciona el proporción en de las imágenes, como la altura y el ancho máximos.
  • Usar elementos fantasmas para contenido que se carga a través de llamadas AJAX.
  • Usar una API de fuentes para cargar la fuente más rápido.
  • No inserte contenido dinámico por encima de la ‘mitad’.
  • Implemente la carga diferida para las imágenes solo debajo del pliegue.
  • Eliminar jQuery Migrate.
  • Use marcadores de posición si está usando video en lugar de reproducirlo directamente.

La optimización de Core Web Vitals es bastante técnica y no simple, un especialista en Magento puede ayudarlo con esto.

Comience con un análisis que verifique y mida tanto la interfaz como el código. Identifique la fruta madura, algunos puntos como la implementación de la carga diferida son tareas que puede eliminar, otros puntos pueden llevar un poco más de tiempo. Después de cada optimización, se pueden medir Web Core Vitals para medir el impacto. – Sander Mangel, arquitecto de soluciones de comercio electrónico

Así que discuta los puntos anteriores con su equipo de desarrollo y coloque los puntos que faltan directamente en su trabajo pendiente. Fíjese bien en la priorización de las tareas en función del impacto y el esfuerzo esperados. De esta manera, se asegura de que no se gaste tiempo ni dinero en cosas que requieren mucho tiempo pero que rinden relativamente poco.

Además, no olvide observar de cerca el proceso de desarrollo actual para que los nuevos ajustes no arruinen su rendimiento optimizado. De esta manera, no solo está listo para la próxima actualización de Core Web Vitals, sino que se convierte en parte del proceso de desarrollo.


Source: Frankwatching by feedproxy.google.com.

*The article has been translated based on the content of Frankwatching by feedproxy.google.com. If there is any problem regarding the content, copyright, please leave a report below the article. We will try to process as quickly as possible to protect the rights of the author. Thank you very much!

*We just want readers to access information more quickly and easily with other multilingual content, instead of information only available in a certain language.

*We always respect the copyright of the content of the author and always include the original link of the source article.If the author disagrees, just leave the report below the article, the article will be edited or deleted at the request of the author. Thanks very much! Best regards!