Preguntas frecuentes sobre las estrategias de rendimiento de WordPress Core Web Vitals

Los nuevos valores de rendimiento web de Google están en la mente de todos en estos días. A principios de este año, abordé este sujeto clave durante un seminario web – Optimización de Core Web Vitals. A partir de esa sesión, respondí muchas preguntas serias sobre los vitales de la web central: lea las preguntas frecuentes a continuación. También organizamos un en vivo en los espacios de Twitter con Google, XWP y WordPress VIP Performance Experts. Escuche grabar aquí: Preguntas básicas con frecuencia para Web Vitals
¿Los valores centrales de Web Vitals cambiarán en el futuro? Google dice que tiene la intención de actualizar el Core Web Vitals anualmente. Esta frecuencia alcanza un buen equilibrio entre mantenerse al día con las mejores y más recientes experiencias del usuario y proporcionar a los propietarios de sitios web y empresas suficientes para la planificación.
Nuestro sitio tiene buenos puntajes en los datos de campo, pero nuestros datos de laboratorio no son impresionantes. ¿Deberíamos preocuparnos? Los datos de campo o los datos métricos de usuario reales (RUM) son datos más perspicaces y valiosos para los propietarios de sitios. Le dice cómo los usuarios reales están experimentando esto podría verse afectado por el lugar donde se encuentran la mayoría de sus usuarios, a qué hora del día acceden a sus usuarios a su sitio, si lo visitan el fin de semana y muchos otros. Los propietarios del sitio a menudo se sorprenden por los factores que no han tenido en cuenta en sus entornos de prueba. La forma en que construye su sitio debe determinarse por la forma en que realmente los usuarios reales lo experimentan.
Sé que el tiempo hasta el primer byte (TTFB) es importante. ¿Cuál es el umbral aceptable? ¿Cómo mejoro el tiempo al primer byte? TTFB es el primero y más fundamental de todas las métricas. Si TTFB es lento, debe compensar para mejorar otros valores, incluidos los vitales de Web Core. La mejora de TTFB se realiza a nivel de plataforma o host. Es mejor transmitir contenido lo más cerca posible de sus usuarios y solo los hosts con redes de bases de datos globales pueden hacerlo. Además, querrá tener una aplicación confiable de WordPress, dada el rendimiento. El uso de páginas de almacenamiento y objetos en caché, por ejemplo, puede hacer que las solicitudes complejas se vean rápidamente. Es importante tener un buen rendimiento en todo el mundo, porque los valores centrales de Web Vitals se miden para los usuarios reales que tiene su sitio si tiene visitantes de todo el mundo, se mide en todo el mundo; No está en una ubicación de prueba de rendimiento central. Consulte estos datos en datos de campo de Google Page Speed ​​Insights y Core Web Vitals en la consola de búsqueda de Google. Las últimas recomendaciones de Google para TTFB son: • Bien: 1500 ms
¿Cómo funciona la escala del sitio?¿Se pueden aumentar automáticamente los recursos del sitio cuando aumenta el tráfico, para mantener altas las puntuaciones de CWV?Debido a que los valores reales de los usuarios (ron) son importantes para el rendimiento central de la web vital, si su sitio web no hace frente a los aumentos de tráfico, probablemente notará una disminución en su puntaje, por lo que es importante proporcionar una buena constante constante experiencia. A todos los visitantes del sitio.Busque una plataforma de sitios web que se ahorre para funcionar bien, incluso en el mejor día de tráfico.
Mis puntajes con la pintura de contenido más alta (LCP) son muy altas. ¿Cómo los mejoran? Primero, identifique lo que se considera que LCP en su sitio puede ser una imagen heroica, una diapositiva, una gran pieza de texto, un video o una animación. Sorprendentemente, el culpable podría ser algo inesperado: una ventana de notificación emergente o anuncios. Para mejorar su entrega de LCP, asegúrese de trabajar en el artículo correcto. Si su LCP es una imagen de héroe, aquí hay consejos: • Asegúrese de que no sea perezoso por terceros o la carga perezosa en el navegador incorporado (use la carga ansiosa). • Aplique su precarga, para que el navegador lo descubra anteriormente. • Asegúrese de que la instrucción Meta Viewport esté antes. Debido a la densidad de los píxeles, el ancho máximo versus el ancho máximo del dispositivo, es posible que una imagen incorrecta de CSS Hero no se identifique como la primera en la página. • Manténgalo por debajo de 200 kb de uso Las dimensiones apropiadas y los formatos de nueva generación. • Investigar otros elementos de la ruta crítica. Dividen el ancho de la banda, compitiendo con la imagen del héroe. A menudo, es lógico ver qué puede eliminar para liberar el ancho de banda para el contenido sobre la página. Por ejemplo, un archivo CSS grande se puede dividir en dos o las fuentes se pueden eliminar de la ruta crítica.
Para la medición de LCP, los webmasters pueden determinar cuál es el “contenido más importante” en una página, en lugar de permitir que Google lo determine.El LCP se basa en el momento en que el elemento más grande se reproduce en la pantalla, por lo que depende casi por completo del tamaño.Recientemente, comenzó a considerar una estimación de importancia ignorando las imágenes de ancho completo como fondos del elemento del cuerpo.
Hemos revisado nuestro sitio y parece que las fuentes contribuyen a la desaceleración, pero nuestras marcas necesitan esta estética. ¿Cómo equilibra las necesidades creativas con el rendimiento de la velocidad de la página? El rendimiento es una mentalidad: debe tratar esto como un objetivo a largo plazo, no solo como un proyecto único en el que equilibra pequeñas decisiones entre sí. Debe comprender la imagen completa de qué más podría contribuir al rendimiento de baja página. Si no puede identificar todos los factores contribuyentes, no puede hacer datos basados ​​en datos en el lugar donde puede sacrificar el rendimiento de las necesidades creativas. En cuanto a las fuentes, no hay solución plateada: comienza con las mejores prácticas de Google. También puede consultar muchas otras estrategias de carga. Aquí hay algunas técnicas para comenzar con: • Comience con una pregunta simple: ¿la usamos? Asegúrese de no cargar fuentes que no se usen en ningún lado. Esto también se aplica a imágenes, videos, hojas de estilo, guiones: deshacerse de lo que no use. • Averigüe qué fuentes son parte de la ruta de carga crítica. Cargue las antes posible (use precarga) y retrase la carga de otros. • El propósito de alojar todas las fuentes a nivel local (por ejemplo, desde su propio campo). • Asegúrese de usar la pantalla de fuentes: intercambio;
propiedad para cargar fuentes del sistema local antes de que se carguen las fuentes personalizadas/de terceros para que el texto permanezca visible mientras se cargan las fuentes remotas. Recomendamos usar un instrumento como Font-Style-Matcher para obtener una fuente del sistema que está casi en kerning, espaciado y otros elementos como una fuente personalizada. También puede usar fontfaceBereberver.js para ayudarlo con las promesas de palanca mientras carga fuentes. • Para las fuentes de iconos dependen de la situación: use el bloque como un valor de pantalla de fuente, cree una fuente de subconjunto para cargar solo los iconos utilizados o incluso “en línea” como SVG. Para el cambio de diseño acumulativo (CLS), los valores van desde 0.10 a 0.25. ¿Qué representan estos números? Cambiar el aspecto acumulativo mide la suma de la explosión más grande de todos los aspectos inesperados de apariencia que tienen lugar a lo largo de la vida de la página. Las imágenes, anuncios, fuentes, incorporaciones y muchas más pueden ajustar el aspecto de su página a medida que cobran. Los desarrolladores deben asegurarse de que no se hayan perdido la adición de anchos y alturas en áreas que no forman parte del contenido editorial. El valor del CLS se ha actualizado. Ahora, cuando remedia el desplazamiento más alto, el puntaje de valor va al valor de la próxima explosión más alta. Puede estar bastante cerca del anterior, por lo que no verá una mejora significativa en los puntajes hasta que remedia todos los grandes saltos.
¿Por qué mi sitio obtiene un resultado débil en la consola de búsqueda de Google (GSC) y un excelente resultado en Lighthouse? Una buena puntuación del faro generalmente significa que usted es principalmente el camino hacia sus objetivos, desde el punto de vista del laboratorio, bajo las condiciones especificadas, mide una determinada puntuación. Pero, como hemos notado, hay varios aspectos que no se pueden medir durante una prueba de laboratorio. Ejemplos de estos son FID y CLS durante la interacción del usuario. Además, otros factores como la latencia de la red, el hardware del dispositivo y la complejidad de carga significan que sus usuarios reales podrían ser más lentos que su sitio óptimo. Hay API disponibles para ayudarlo a enviar la solución de problemas al análisis, que luego se puede ver en un informe de vitalidad web. Esto lo ayudará a descubrir qué problemas causan la diferencia entre GSC y Lighthouse. Google utiliza el Informe de experiencia de usuario de Chrome (Crux) en GSC y PageSpeed ​​Insights (PSI). Debe dirigirse a obtener puntajes “buenos” para el percentil 75 de todos sus usuarios. Dadas las variaciones, hay condiciones que sus usuarios podrían cumplir más lento (o más rápido) que las condiciones de laboratorio y debe usar datos de valores de usuarios reales (ron) Para garantizar que sus esfuerzos tengan un impacto después de implementarlos.

¿Por qué WordPress deprecia la versión anterior de JQuey? ¿Está esto de acuerdo con los vitales de la web central que sale de IE11? ¿Qué tal youumightnotedjquery.com? JQuey fue esencial para traer funciones web avanzadas. Sin embargo, es una gran biblioteca que a menudo tiene un gran impacto en el rendimiento de LCP, TTI y FID (dependiendo del tiempo que esté cargado y por qué algo más está en la página). Hay esfuerzos continuos para reducir su uso en web y en el ecosistema de WordPress. , como garantizar que los nuevos temas no los usen como adicción y eliminación de los complementos de WordPress utilizados con frecuencia, como JetPack. La versión no es una gran preocupación en este contexto, sin embargo, en términos de rendimiento, el principal problema es la necesidad de cargar jQuery en la ruta crítica, no qué versión ocurre. Todos nuestros CWV se ven bien. Pero después de usar complementos de rendimiento, nuestro primer retraso de entrada (FID) sigue siendo alto. ¿Cómo mejoramos eso? Arregle lo que tiene control. Esto podría incluir la evaluación de los complementos de terceros para el valor ganado frente a la penalización incurrida. El rendimiento de perfil en Chrome Devtools es tu amigo. Minimice el impacto de terceros que usan scripts intensos retrasando su carga hasta los períodos de bajo uso del procesador. Si la CPU no está abrumada por el rendimiento de 15 tareas diferentes, el impacto del complemento en la interactividad del sitio podría minimizarse.
Google Tag Manager (GTM) y otros scripts de terceros impiden nuestros informes del faro. ¿Cómo podemos mejorar nuestro puntaje y mantener GTM? Los scripts de análisis generalmente no afectan la velocidad del sitio web de manera significativa, pero puede continuar optimizándolos. Básicamente, agrégalo cuando sea necesario, no antes. Siga este modelo: 1. Coloque el script GTM al final del código HTML, no al principio. 2. Descargue y analice después de procesarse el HTML (posponga el script). 3. Ejecutarlo en 1-3 segundos después de cargar el modelo de documento (DOM). De esta manera, GTM o cualquier otro script de análisis no será un bloqueador y continuará recopilando los datos necesarios. Si continúa registrando un éxito de rendimiento significativo, DIG más allá de GTM, puede no ser la culpa del administrador de la etiqueta, sino más bien la forma en que se usa. Hay buenas estrategias en esta discusión: profundizar en el desempeño de terceros. Por ejemplo, puede eliminar los scripts críticos del GTM y posponer su carga hasta el final de la cascada. ¿Qué recomendaciones tiene para los sitios web que monetizan a través de anuncios? El gerente de anuncios y los anuncios en general (especialmente programático) pueden tener un impacto significativo en TTI y TBT. ¿Deberíamos posponer la carga de anuncios para publicar la interacción del usuario? ¿Cómo mejoramos el rendimiento sin perder oportunidades?
Esta elección puede parecer tan difícil como equilibrar la velocidad del sitio y los ingresos, pero no debería serlo. El propósito aquí es encontrar formas creativas de hacer que los anuncios formen parte de la experiencia del usuario, en lugar de una interrupción. Entonces no tiene que elegir entre ingresos y rendimiento. Aquí hay sugerencias: • El contenido esperado siempre debe ser en primer lugar. • Asegúrese de que los anuncios (y la forma en que aparecen) se vean orgánicos. • Asegúrese de que los anuncios no aparezcan repentinamente en el medio de la página, causando cambios de apariencia e interrumpiendo la interacción del usuario. Estar sobre el espacio para ellos temprano usando JavaScript y configurar la altura mínima para envoltorios. • No cargue demasiadas cosas a la vez. El hilo principal está sobrecargado y subpalado y puede funcionar más rápido si se sirve en piezas más pequeñas. Recomendamos dos enfoques: el uso creativo del método requestIdlecallback integrado en los navegadores y esperando que el DOM complete la carga antes de cargar múltiples elementos. • Cargar anuncios después de que un usuario interactúa con el comienzo de una página no tiene mucho sentido; parece que fueron castigados por su participación, lo que no es una experiencia excelente para el usuario. Los anuncios se cobran de acuerdo con el contenido se sirve respeto La realidad de los navegadores es un solo hilo. En lugar de encontrar soluciones, la implementación de una estrategia sólida que siempre tiene en cuenta el usuario lo mantendrá en la línea de flotación a largo plazo, incluso a medida que evolucionen los valores de respuesta.
Queremos medir los cambios a medida que lanzamos nuevas funciones en nuestro sitio. ¿Existe una ruta o mecanismo para incluir estos valores como parte de los sistemas CI/CD como la acción de GitHub? Los vitales de Web Core no son adecuados para las pruebas de laboratorio, por ejemplo, en un sistema de CI/CD. Es difícil para un entorno de laboratorio reproducir las condiciones que enfrentan usuarios reales, y estos valores son muy situacionales. Dicho esto, debes usar todo lo que puedas, en este caso, el faro. Para la integración con la acción de GitHub, hay algunos mecanismos populares ya construidos y listos para su uso. Encuéntralos en el mercado de acciones. Tenemos escritores que no son expertos en rendimiento web. Podemos tener una lista de verificación cuando cargamos imágenes para decir: “¿Estás seguro de que quieres subir un PNG de 2 MB en lugar de un JPG de 100 kb?” Tener una lista de verificación es un enfoque. Otro enfoque es la automatización de esto. Algunas plataformas específicas de WordPress incluyen funciones de medios adaptativos que optimizan automáticamente los medios para la velocidad de carga, eliminando esta tarea de control de calidad del trabajo de publicación.
Obtenga más información sobre CWV en nuestro seminario web, optimizando para Core Web Vitals.