Core Web Vitals: por qué y cómo optimizar su sitio web para la experiencia de la página

Vale la pena prestar atención a la página. Incluso un retraso de un segundo durante la carga de la página podría conducir a una disminución del 7% en las conversiones. Si esto no fue lo suficientemente sorprendente, a partir de mayo de 2021, el rendimiento de la página es aún más crucial, porque Google hace que la página sea una señal de clasificación. *(Puede leer sobre futuros cambios en Google aquí). Esto significa que los sitios web de rendimiento débiles se clasificarán a continuación en los motores de búsqueda. Por lo tanto, arrojamos un poco de luz sobre valores web básicos vitales, soluciones de bricolaje y cuando es hora de buscar un profesional.
¿Por qué es esto importante ahora? Si en la actualidad, su sitio tiene una puntuación débil en los elementos web vitales, tiene mucho trabajo antes de mayo. Pero eso no significa que no sea alcanzable. Al descubrir lo que necesita hacer y ponerlo en acción, está en el camino correcto para el éxito SEO. Si no hace esto, puede ser penalizado. Noté la última vez que Google hizo un cambio significativo en su algoritmo. Cuando el motor de búsqueda quería promover sitios web receptivos como un factor de clasificación influyente, hubo un cambio sustancial de los sitios que no estaban optimizados para la compatibilidad móvil.
Sin embargo, dijo, echemos un vistazo más de cerca a cuáles son los elementos web básicos. ¿Qué son Core Web Vitals? Web Vitals tiene como objetivo simplificar el panorama a menudo confundido y complicado de los valores de rendimiento de UX para ayudar a los propietarios de sitios a centrarse en lo que más importa. Son un subconjunto de elementos web vitales que se aplican a todas las páginas web que los propietarios de sitios pueden medir a través de muchas herramientas de Google. Aquí, estos valores web vitales se miden por el rendimiento en el percentil 75. Algunas de las soluciones más conocidas para evaluar elementos web vitales incluyen: lejos
Insights de PageSpeed
Devtools de Chrome
Consola de búsqueda de Google
la herramienta de medida web.dev
Extensión web vital cromada
API de informe de chrome ux
Hay mucha superposición entre las herramientas. Algunos le permiten conectar la URL y luego la herramienta analizará sus datos web vitales, otros le permiten ejecutar un informe directo en el navegador y otros le permiten monitorear los datos web vitales. Google ha ofrecido una variedad de herramientas con diferentes usuarios en mente, desde la tecnología menos técnica hasta la más calificada. En cualquier caso, Page Speed ​​Insights es un excelente punto de partida. Ejecuté un sitio aleatorio a través de PageSpeed ​​Insights y descubrí que calcula los datos de campo a través de la experiencia del usuario de Chrome utilizando datos de velocidad en el mundo real. En términos de valores web vitales básicos, así es como muestran los datos:
Los elementos web vitales básicos son complementarios a las experiencias de la página de Google, que incluyen: múltiples dispositivos, https, ventanas emergentes, etc. Y, como tal, los valores web vitales básicos no reemplazan estos valores. También vale la pena señalar que lo que se considera una red básica vital puede cambiar con el tiempo a medida que evolucionan las tecnologías y las prioridades cambian. Sin embargo, al momento de escribir, los elementos vitales básicos actuales incluyen: la pintura de contenido más grande (LCP): mide el rendimiento de carga (un rendimiento de carga por debajo de 2.5 s se considera bueno).

Retraso de la primera introducción (FID): esta medición mide la capacidad de cargar en el primer momento cuando una interacción de usuario puede tener lugar con el sitio web. Idealmente, esto debería estar por debajo de 100 ms.
Cambio acumulativo de apariencia (CLS): esto mide la estabilidad visual. Para una buena experiencia de usuario, las páginas deben obtener una puntuación de menos de 0.1 para este valor.
¿Cómo puede optimizar su sitio web para los elementos vitales de la web básica? Antes de comenzar a optimizar su sitio, debe determinar cómo el sitio ya está funcionando para cada valor. Por lo tanto, el primer paso es verificar su puntaje de vital web principal.
Genere un informe sobre la velocidad de su página y los valores web básicos vitales utilizando Google Page Speed ​​Insights.
Siga ciertos problemas con elementos web básicos vitales en la búsqueda de la consola de Google y vea cómo funcionan sus soluciones
También puede usar la extensión web de vitals Chrome. Esta es otra herramienta fabulosa para medir los valores de su sitio. Los valores web vitales también se pueden medir en JavaScript utilizando API web estándar. Remar los elementos web vitales ahora que ha llevado a cabo las verificaciones anteriores, debe tener una Mejor idea sobre el rendimiento de su sitio para elementos web vitales. Si los ha superado a todos por salmuera, no debe preocuparse por los cambios futuros en mayo. Sin embargo, si hay uno o más valores que podría mejorar, preste atención. A continuación, hemos enumerado algunos de los cambios que puede necesitar y cómo ejecutarlos (en orden de importancia):
Optimización de LCP Como ya dije, LCP mide el tiempo requerido al acceder a su sitio web para ver el contenido principal en la pantalla. Como tal, este valor se refiere a la velocidad de cargar su página (generalmente la página de inicio), que está influenciada por el tiempo de rango de la imagen, video o volumen de texto más grande en su sitio. Que menos de 2.5 segundos se considera un buen tiempo para cargar el sitio. Cualquier cosa de lo anterior debe mejorarse, y si su sitio se está cargando más lento que cuatro segundos, Google lo considerará inferior.
Cualquiera de los siguientes podría ser la (s) causa (s) de tiempos de carga lentos:

Tiempos de respuesta lentos del servidor (esto podría ser el resultado del alojamiento web de baja calidad, la falta de caché, el aumento del tráfico web, etc.)
JavaScript y CSS que bloquean la representación (estos archivos evitan que los sitios web muestren contenido antes de que estén completamente cargados).
¿Cómo puedes resolver el problema?
Elimine las escrituras de terceros inútiles (complementos). Es posible que no estén optimizados y ralentizan su sitio.
Actualice su alojamiento web. El alojamiento barato podría conectar su sitio a servidores web más lentos y, por lo tanto, cargar.
Configure la carga perezosa o use un sistema de entrega de contenido. Esto permite que su sitio memorice más fácilmente en caché y envíe contenido a los usuarios a través de las bases de datos cerca de ellos. Todo esto contribuye en gran medida a reducir los tiempos de carga.
Elimine los elementos grandes de la página web.
Servicio de páginas HTML primero en caché.
Estate tercera conexiones temprano.
Minimiza CSS.
Optimizar/comprimir las imágenes del sitio web.
Asegúrese de que sus páginas web estén optimizadas por AMP.
La optimización del retraso de primera entrada de FID (FID) mide la rapidez con que la página se vuelve interactiva. En otras palabras: cuando el usuario hace clic por primera vez en algo, ¿cuánto tiempo tarda hasta que algo sucede?
Esta medición puede ser menos relevante para blogs o sitios de noticias en los que la interactividad central se refiere a la apertura de artículos para leerlos. Pero para los sitios web que involucran páginas de autenticación y/o registro, FID es crucial. Los sitios con un FID superior a 300 ms se consideran inferiores. Idealmente, debe tener en cuenta a menos de 100 ms a esta medición. Remediar el FID es difícil sin un conocimiento profundo sobre cómo los sitios web cargan JavaScript. Sin embargo, es posible que pueda mejorar este valor: dividiendo tareas largas y minimizando la hinchazón de JavaScript
Eliminar scripts de tercera parte que no se requieren
Usando un trabajador web
Optimizar el cambio de apariencia acumulativo (CLS) se refiere al hecho de que los elementos de su página web permanecen donde debería estar como se carga. Mide la cantidad total de cambios inesperados de apariencia (se produce un cambio de apariencia cada vez que un elemento visible cambia su posición entre los cuadros). ¿Alguna vez ha intentado hacer clic en algo en un sitio móvil pero el elemento se movió al intentar seleccionarlo? Lo más probable es que el sitio tenga un alto no deseado. Cualquiera por debajo de 0.1 está bien. Si obtiene una puntuación superior a 0.25, su sitio debe mejorar su estabilidad visual.

Aquí hay algunos remedios para aplicar:
Defina los atributos del tamaño de los medios en HTML para que los navegadores de Internet sepan cuánto espacio ocupará.
Reserve espacio para cualquier comercial.
Agregue cualquier interfaz de uso nueva debajo del pliegue para que no presione el contenido esperado hacia abajo.
Trabajar con imágenes receptivas.
Algunas fuentes pueden causar un rayo de texto de estilo ligero o invisible mientras se reproduce una fuente, así que pruebe esto y realice todos los cambios necesarios. Use animaciones de transformación en lugar de propiedades. Este último tiene una mayor oportunidad de desencadenar cambios de apariencia.
Optimizaciones sugeridas por Google Finalmente, la instalación de Google PageSpeed ​​viene con sus propias recomendaciones sobre cómo mejorar el rendimiento de su sitio. Estas son buenas prácticas y, cuando se implementan, podrían mejorar el tiempo de carga del sitio, estas optimizaciones no necesariamente lo harán Afectar sus elementos web vitales básicos. Sin embargo, debe contribuir a la provisión de una mejor experiencia para el usuario, que es excelente para el SEO y la retención de visitantes. En particular, debes comenzar:
Guardar imágenes en formatos de nueva generación
Eliminar recursos que bloquean el representante
Activación de compresión de texto
Se elimina el CSS no utilizado
JavaScript no utilizado se elimina
Cómo implementar estas optimizaciones Muchas de estos remedios requieren conocimiento y familiaridad con las prácticas de desarrollo, tanto que debe ser un desarrollador. Por ejemplo, algunos de los cambios requieren un especialista en FE, mientras que otros pueden requerir un especialista en experiencia o servidor. Por ejemplo, la interrupción de embarazos largos, minimizando la hinchazón de JavaScript y eliminando los scripts de tercera parte. No puede eliminar todos los scripts de tercera parte, algunos como Google Analytics son cruciales. Como tal, necesita una comprensión de estos guiones de terceros, que realmente puede eliminar y cómo hacerlo (que implica cierto conocimiento de codificación). La palabra clave para recordar es la optimización. No intente reconstruir su sitio en uno deseado por Google. En su lugar, intente optimizar su sitio web dada la mejor experiencia del usuario. Por supuesto, al mismo tiempo, trabaja para evitar la penalización de Google. Aquí está el desafío. Supongamos que no tiene demasiado conocimiento técnico. En este caso, su sitio podría beneficiarse al contratar a un desarrollador profesional, especialmente si no desea comprometer el diseño de su sitio. Un profesional podrá mantener la “apariencia y sensación” de su sitio mientras realiza las optimizaciones necesarias. El uso de los servicios de un desarrollador profesional es, sin duda, la forma más sencilla de ahorrarlo durante mucho tiempo y su equipo. Puede esperar a mayo de 2021, confiado en su conocimiento de que su sitio tiene una nota. ¿Cómo contrata ayuda profesional y dónde está el mejor lugar para encontrarla?
Cuando se trata de optimizar los elementos web básicos vitales, el mayor error que puede cometer es intentar arreglar todo a la vez. En cambio, prioriza y resuelve primero los problemas básicos. Optimizar el sitio no es una tarea que realice una vez y puede olvidar. Más bien, es un proceso continuo que requiere su atención continua. Como sugerí anteriormente, siempre debe comenzar con una auditoría para tener una idea de su sitio. Entonces es una buena idea trabajar con un experto en webmaster para establecer prioridades e implementar un plan de optimización. Los expertos en codificación pueden hacer esto por usted. Codable se adapta a los clientes con expertos y desarrolladores de WordPress cuidadosamente verifica. Para determinar los candidatos mejor calificados, cada especialista pasa por un proceso de verificación que incluye un examen técnico y pruebas de codificación en vivo. Los profesionales codibles pueden realizar cualquier cosa, desde pequeñas tareas y remedios para completar trabajos de desarrollo personalizados y abordar la optimización de su sitio web para garantizar que esté listo para enfrentar el mes de mayo de 2021 con confianza. Lo mejor es que puede conectarse con un experto confiable en solo tres a cinco horas.