Core Web Vitals / Google PageSpeed [Guía completa 2021]

Primero, explicaré que en este artículo me cuesta expresar con palabras todo lo que tengo que decir sobre Core Web Vitals o Google PageSpeed. Core Web Vitals (o Google PageSpeed ​​o Google Lighthouse) ha sido un tema candente desde mediados de 2020 porque Google ha pensado mucho y las opiniones difieren.

Como resultado, hay mucha información sobre este tema en Internet, pero hay mucho ruido y mucho se "escucha". Voy a cubrir los conceptos básicos aquí, ya que he estado trabajando en problemas de WPO durante 10 años y he visto muchos cambios en PageSpeed ​​y sus diversos algoritmos en el proceso.

Page Speed ​​y Core Web Vitals

Todo esto salió a la luz en 2010. Lo conocí más o menos en 2011 y 2012 y vi casos en los que los clientes querían mejorar sus resultados de Google PageSpeed. Mucho ha cambiado de 2012 a 2021, y el algoritmo ha cambiado 500 veces (exageración), aunque no todas han mejorado. Este fue originalmente un análisis de red que mostró las mejores prácticas, pero no tiene nada que ver con WPO y la velocidad de descarga (a pesar del nombre).

Siempre he estado con vehemencia en contra de Google PageSpeed ​​y de todas las herramientas que obtienen críticas sin sentido porque no siempre son muy objetivas en lo que respecta a la velocidad de carga. Por el contrario, el tiempo de arranque en segundos no miente.

A través de este enlace en la página del desarrollador de Google, todavía podemos ver algunos documentos sobre la velocidad de descarga en 2010: https://developers.google.com/search/blog/2010/04/using-site-speed-in-web- search - calificación

No voy a perder el tiempo más. Intentaré explicar la historia de Google PageSpeed ​​y cómo obtener buenos resultados en términos de lógica y verdad.

📑 Aquí podrás encontrar 👇

¿Qué es Google PageSpeed ​​Today?

Ahora voy a explicar qué es Google PageSpeed, sin mencionar el pasado porque Google PageSpeed ​​ha visto muchos cambios a lo largo del tiempo (no estoy exagerando).

Google PageSpeed ​​es actualmente la parte visible y la herramienta; en particular, se llama Google PageSpeed ​​Insights. Es una herramienta que te proporcionará estimaciones y algunos consejos o mejores prácticas para mejorar tu "velocidad de carga" y mejorar la experiencia del usuario.

¿Qué es Google PageSpeed?

Pero detrás está el algoritmo Google Lighthouse, es decir, Google PageSpeed ​​Insights Engine. Actualmente, Google Lighthouse está integrado en todo Google Chrome. Muchas herramientas (como GTMetrix) también utilizan esta implementación para ejecutar sus propias pruebas de Google PageSpeed:

Baliza de Google

Por otro lado, tenemos Core Web Vitals que han ganado mucho protagonismo en 2020. Utiliza el algoritmo Google Lighthouse, pero tiene pocas métricas para promediar y calificar.

Core Web Vitals es una "iniciativa" de Google que utiliza datos del informe de Chrome UX para mostrar promedios extraídos directamente de usuarios reales. Como veremos en la siguiente sección, esto puede ser contraproducente y causar muchos problemas. ...

Sabiendo esto, responderemos las siguientes preguntas.

¿Qué es Google PageSpeed ​​Insight?

Inicialmente, Google PageSpeed ​​eran herramientas, algoritmos y todo lo demás, pero hoy Google PageSpeed ​​Insights es solo una interfaz y una herramienta para que los usuarios "normales" saquen conclusiones (en su mayoría erróneas) y se vuelvan paranoicos.

Google PageSpeed ​​Insights

Google PageSpeed ​​muestra una combinación de datos de Google Lighthouse en tiempo real y datos de Core Web Vitals extraídos directamente de los informes de Chrome UX.

Es una herramienta bastante completa, excepto que tiene muy poca documentación (la mayor parte de la documentación es de Lighthouse y Core Web Vitals) y la mayoría de la gente no sabe cómo interpretar correctamente la información proporcionada.

¿Qué es Google Beacon?

Podemos decir que Google Lighthouse es actualmente el algoritmo detrás de Google PageSpeed ​​Insights.

Google Lighthouse no solo usa indicadores de velocidad de carga, sino que la mayoría de los indicadores de algoritmos se usan para las mejores prácticas en UX y desarrollo web.

Baliza de Google

Cualquier navegador basado en Google Chrome o Chromium puede medir Google Lighthouse porque están implementados en el núcleo.

Los datos almacenados en la base de datos de informes de Chrome UX se recuperaron utilizando Google Lighthouse y se seleccionaron algunos de sus indicadores. Los datos que vemos en la Consola de búsqueda de Google en Core Web Vitals se basan en los datos almacenados por Lighthouse.

¿Qué son Core Web Vitals?

Según Google, Core Web Vitals será un factor de clasificación en 2021. Este es un promedio del informe de Chrome UX y algunas métricas seleccionadas de Google Lighthouse.

Las métricas que se utilizan para obtener resultados de Core Web Vitals han cambiado muchas veces a lo largo del tiempo, pero en el momento de redactar este artículo son LCP, FID y CLS.

Hay algunos indicadores adicionales. Por ejemplo, FCP incluye LCP, y el índice de velocidad es un resumen general de los resultados de todos los indicadores, algunos de los cuales explicaremos más adelante.

También explicaremos el problema de eliminar Core Web Vitals del informe de Chrome UX y el problema real con la medición del rendimiento. Usuario.

Medir PageSpeed ​​/ LightHouse

Uno de los problemas con la objetividad de Google PageSpeed ​​/ Google Lighthouse / Core Web Vitals es que dependiendo de cómo y dónde lo midas, obtendrás un resultado u otro. Depende no solo de la implementación (cualquiera puede hacerlo) sino también de las funciones de prueba y conectividad disponibles.

Hay 4 métodos de medición (con diferentes nombres) que puedes ver en el siguiente video:

Como ves, los resultados y métricas que obtenemos con cada método son completamente diferentes, lo que hace imposible aislar los resultados y ser completamente objetivos.

¿Cuál es la relación entre PageSpeed ​​y SEO?

Bueno, realmente no. Si bien muchas personas atribuyen esta característica mágica al PageSpeed ​​Score de Google, la verdad es que no lo es. Lo que hace que el SEO se destaque en términos de velocidad de carga suele ser la indexación y el rastreo.

Hasta ahora, solo he visto un sitio web de baja velocidad de página que ha perdido su lugar en las SERP y el problema de indexación relacionado con la saturación de JS durante el proceso de rastreo es muy grande. Obviamente, resolver estos problemas mejorará la puntuación y al mismo tiempo Robot de Google Puede rastrear el sitio correctamente.

PageSpeed ​​y SEO

Este secuestro anterior es una herramienta que Google pone a nuestra disposición en Google Search Console para administrar la indexación y el rastreo. Para mí, esta es la herramienta principal para ver si hay un problema: es mucho más útil que toda la información proporcionada en Google PageSpeed ​​Insights. La mayoría de las personas que se quejan de una PageSpeed ​​baja nunca han visto los datos de la herramienta Estadísticas de rastreo en Google Search Console.

¿Google PageSpeed ​​o Core Web Vitals influirán en el futuro del SEO? Bueno, pasemos a la siguiente parte.

¿Afectan los elementos fundamentales de la Web al SEO?

La respuesta es exactamente la misma que la anterior, pero existen algunas diferencias sutiles.

Google ha comentado que se realizarán algunos cambios en los algoritmos de los motores de búsqueda en el transcurso de 2021, por lo que estas calificaciones afectarán los resultados de búsqueda como otro factor de posicionamiento. Para ser justos, si ciertos aspectos técnicos no mitigan el impacto en la cuenta, creo que no lo harán. es posible. Eso es exactamente lo que te expliqué en este video:

Por un lado, es difícil realizar ciertos ajustes sin afectar las decisiones comerciales. Por otro lado, como comenté en el video, la penalización basada en valores reales de carga de usuarios puede incluso ser "rating" dependiendo del mercado objetivo y país de nuestro sitio web. La red.

No todo es blanco y negro, hay un medio en la balanza, y en mi opinión eso falta ahora. Esto ha llevado a muchos webmasters a admirar los resultados de Core Web Vitals en Google Search Console.

¿PageSpeed ​​y Core Web Vitals = WPO?

No es necesario. Google PageSpeed, Core Web Vitals y Google Lighthouse no son sinónimos de "velocidad de carga" o WPO.

WPO es un concepto creado en los EE. UU. En 2004 que incluye las mejores prácticas para mejorar la velocidad de carga del sitio web, pero cada uno de los servicios de Google mencionados anteriormente es un 80% de buenas prácticas de UX y el 20% restante es la velocidad de carga.

Google PageSpeed ​​y Core Web Vitals han tomado la ruta UX. Los indicadores como LCP y CLS están más orientados al usuario que al rendimiento de la red, aunque pueden cubrir otros aspectos técnicos.

Durante más o menos dos años, Google PageSpeed ​​(y toda la pila) ha estado buscando usuarios que carguen elementos en la parte superior de la página primero. Esta no es una velocidad de carga real, sino una pose visual.

WPO va aún más lejos: el objetivo es optimizar un sitio web de tal manera que, como un reloj suizo, se cargue sin errores, utilice la menor cantidad de recursos posible y aumente la eficiencia. Desde 2016, he intentado transmitir este mensaje en varias conferencias a lo largo de los años, pero parece que muchas personas no lo han entendido completamente.

¿Debería buscar Google PageSpeed ​​100/100?

Sin mencionar Core Web Vitals, estamos discutiendo 100 de 100 en Google PageSpeed.

Muchas personas quieren obtener 100 sobre 100 en Google PageSpeed ​​pero no saben lo que eso significa, lo que necesitan o, en muchos casos, es imposible repensar los proyectos web y empezar de cero. La desventaja es que no solo no saben, sino que tampoco quieren saber. Los consultores de WPO como yo a menudo nos preguntan sobre cosas imposibles.

Hay que tener en cuenta que en el 99,9% de los casos, para conseguir 100 sobre 100, es necesario construir una red desde cero e invertir fondos muy importantes en su desarrollo. Por otro lado, también es necesario prescindir de las herramientas de marketing, que normalmente son vitales para una empresa a nivel empresarial. Olvídese de Google Analytics, herramientas de automatización de marketing, Pixel Facebook y anuncios de Google, etc.

Más importante aún, como puede ver en el video a continuación, si tiene un sitio de contenido y necesita una buena PageSpeed, tampoco puede alojar Google Adsense:

https://www.youtube.com/watch?v=TScKmn7y3wQ

Si has visto el video, podrías pensar: ¡ostras! Incluso si los propios servicios de Google han reducido la calificación de PageSpeed ​​de Google.

100 en PageSpeed ​​100 es difícil, si es que lo es, de lograr en la práctica. Cuando un sitio web es más que un simple prototipo y queremos que se venda o monetice adecuadamente, es difícil conseguir ese resultado sin perder ventas ni optimizarlo.

Mejora del ranking de PageSpeed ​​de Google

No existe una forma precisa de mejorar su puntaje de PageSpeed ​​de Google. Solo necesitamos mejorar los resultados en ciertos indicadores.

La mayoría de los indicadores se basan en el tiempo, mientras que otros indicadores (como CLS) se basan en algoritmos.

Mejorar la puntuación en Google PageSpeed

A continuación, intentaré explicar todos los indicadores que utilizan actualmente Google PageSpeed, Lighthouse y Core Web Vitals, y la relación entre ellos.

Debe tener en cuenta que para aumentar su puntaje, debe cumplir ciertas condiciones que aparecen en la interfaz de usuario de Google PageSpeed ​​Insights:

PageSpeed ​​Insight

Puede parecer simple, pero el 90% de las veces necesita conocimientos técnicos. El 10% restante no es que necesites conocimientos técnicos, sino milagros o sacrificios reales que te explicamos anteriormente.

El algoritmo de Google Lighthouse es público y el porcentaje y el peso de cada indicador son: https://googlechrome.github.io/lighthouse/scorecalc/

Algoritmo de baliza de Google

El problema es que el algoritmo de Lighthouse se actualiza y los porcentajes y pesos cambian en diferentes versiones. En el momento de escribir este artículo, estamos usando V7, pero los porcentajes e incluso las métricas pueden cambiar en versiones futuras.

Bueno, ya no juego. Explicaré algunas de las métricas de Google PageSpeed ​​/ Google Lighthouse y Core Web Vitals y cómo mejorarlas.

PageSpeed ​​de Google: FCP

Comencemos con una de las métricas más importantes y difíciles de mejorar.

FCP (First Contentful Paint) representa el 15% del puntaje total, generalmente el puntaje más bajo ya que CSS y JS complejos generalmente hacen mucho daño a FCP.

El FCP mide el tiempo que se tarda en cargar la parte superior del rollo, la parte “abocinada” o visible de la carga.

Para mejorar el ranking FCP en Google PageSpeed ​​y Core Web Vitals, podemos utilizar las siguientes técnicas de WPO:

  • Mejore los tiempos de respuesta y los TTFB, generalmente mediante el uso de un servidor web más eficiente (velocidad Oh nginx) O implementar un sistema de almacenamiento en caché a nivel de servidor.
  • Implementar el almacenamiento en caché del navegador o el almacenamiento en caché del navegador, aunque solo afecta a la medición de usuarios reales.
  • Utilice consultas de recursos o precarga de recursos para garantizar una carga rápida y bien estructurada: precarga, precarga de DNS, precarga, etc.
  • Implemente una CDN para acelerar la carga de JS y CSS.
  • Utilice HTTP / 2 y HTTP / 3 para implementar un servidor web o CDN, ya que la multiplexación puede acelerar el envío de archivos al navegador del visitante.
  • Utilice la carga asincrónica y diferida para completar la revisión de los requisitos externos y las personalizaciones para hosts de terceros.
  • Elimine el exceso de JS y CSS comprimiendo recursos y cargándolos condicionalmente o eliminándolos directamente. Si bien suena simple, este es uno de ellos. parte Con la tendencia general de los temas y temas de desarrollo web actuales, la complejidad es aún mayor.

En muchos casos, los problemas de FCP se deben a demasiados JS y CSS o algunas bibliotecas con muchas dependencias que causan problemas de carga.

Necesitamos entender que no es de extrañar si tenemos que usar Javascript o CSS en nuestro sitio web: o eliminamos la función y la usamos para eliminar el código, o no podemos hacer nada.

Cuando tenemos un sitio de WordPress con un tema complejo y multipropósito que tiene mucho CSS y JS, y queremos obtener buenos resultados con Google PageSpeed, podemos usar todas las tecnologías de WPO enumeradas anteriormente, pero a veces no lo hacemos. t. la capacidad de rediseñar completamente la red. Son posibles más mejoras.

PageSpeed ​​de Google: LCP

LCP (pintura con contenido más grande) contiene parte de la primera parte de FCP. LCP es el 25% del número total de puntos. Mide el tiempo que lleva descargar el elemento más grande en cualquier dimensión desde la parte superior de la red.

El elemento más grande de la primera pantalla puede ser una imagen o CSS. El problema es que cuando Google descubre que CSS es el elemento de mayor tamaño, puede contener varias imágenes y lleva mucho tiempo.

Pero hay más, esto se usa no solo para calcular el tiempo de este artículo, sino también para calcular el tiempo total de recogida. A partir de la web, todos los JS y CSS se bloquean hasta que se carga el elemento más grande. Por tanto, incluye la primera parte de FCP.

Google Pagespeed FCP

En la mayoría de los casos Mejorar FCP también mejora LCP. Mucha gente intenta optimizar completamente lo que Google define como LCP independientemente de los fallos anteriores.

Como dije, para mejorar LCP necesitamos arreglar el bloqueo y todo lo que se indica para FCP ya que la parte de FCP contiene LCP.

Además de mejorar FCP, LCP también se ha mejorado agregando "características" como "eliminar recursos, bloquear renderizado". Esto se puede hacer minimizando CSS y JS, o intentando cambiar el esquema de carga de recursos para que la carga nunca se bloquee debido a dependencias o tiempos. Podemos usar la precarga o la precarga para la carga por etapas, y también podemos usar la carga asincrónica y la carga diferida para JS, pero los milagros no suceden. En algunos casos, esto puede no ser suficiente en sitios web muy congestionados.

Si desea conocer más detalles, puede ir un poco más allá en este artículo e ir a la sección "Funciones" o "Diagnóstico".

PageSpeed ​​de Google: CLS

La ponderación CLS (cambio de diseño acumulativo) es muy baja, solo el 5%. No es un indicador de "velocidad de carga", sino un indicador UX que mide la estabilidad visual.

Es la única métrica basada en algoritmos, no en el tiempo, lo que significa que no puede ser muy objetivo. En la práctica, al igual que las escopetas para exteriores, las mediciones de CLS fallan.

CLS mide cómo se mueven los elementos por la pantalla después de que la página se carga por primera vez.

PageSpeed ​​Place CLS

Esto se puede evitar marcando el tamaño de todos los elementos en HTML, prestando atención a su carga diferida y evitando la inserción dinámica de nuevos elementos a través de JS después de la carga inicial de la página. Si nuestro tema no tiene uno en WordPress, WP Rocket facilita la especificación del tamaño en el código.

CLS no tiene más secretos, solo podemos lograr lo anterior. El problema es, como dije, en muchos casos las medidas son inexactas y aunque no tengamos un problema de red nos dan una mala nota.

PageSpeed ​​de Google: FID

El FID (First Entry Delay) no suele ser un indicador muy conocido, ya que es fácil de seguir. Si nuestro sitio web se congela en este punto, una implementación de una biblioteca Instant Click como Instant.page podría resolver el problema.

FID mide el tiempo que tarda una red en volver a estar en línea después de que un usuario hace clic en un enlace o botón.

FID de PageSpeed ​​de Google

El FID se mide en Core Web Vitals utilizando datos de usuario reales recopilados de los informes de Chrome UX, pero no se incluye directamente en Lighthouse.

Si tenemos problemas con otros indicadores, normalmente también tendremos problemas con los FID, en particular TTI y TBT, dos indicadores de bloqueo que suelen estar muy influenciados por JS y CSS complejo.

Google PageSpeed: tiempo de interacción

TTI (Time To Interactive) mide el tiempo que tarda un sitio web en interactuar con los usuarios después de la carga. Este indicador solo se puede ver en Google PageSpeed ​​Insights y Google Lighthouse y Core Web Vitals. No veo.

No existe una forma precisa de mejorar la TTI. Se trata solo de mejorar las métricas centrales y tratar de ejecutar Javascript asincrónico sin demorar demasiado ni obstaculizar la experiencia del usuario.

Google PageSpeed: tiempo total de bloqueo

TBT (Total Blocking Time) es un indicador que suma FCP y TTI pero no alcanza el índice de velocidad. TBT mide el tiempo total de bloqueo. Los bloqueos generalmente ocurren al cargar bibliotecas JS y sus dependencias, así como con hojas de estilo complejas que requieren diferentes archivos CSS.

Este es un indicador relacionado con FID, pero es mucho más complejo y artificial. Se puede mejorar mejorando FCP y TTI, pero podemos tener un FCP malo y un TBT bueno.

Google PageSpeed: índice de velocidad

El índice de velocidad es un indicador secundario. Si bien aparece en Google PageSpeed ​​Insight, no forma parte de Core Web Vitals.

Utilice el índice de velocidad para medir el tiempo desde la carga hasta que el usuario está completamente en línea, aunque debo agregar que la medición de Google PageSpeed ​​Insight no es objetiva ya que se mide por su ubicación.

No existe una forma directa de aumentar el índice de velocidad. Todo lo que necesita hacer es mejorar los 3 indicadores anteriores, especialmente FCP, y tratar de no pasar ningún JS asincrónico o retrasado que pueda afectar sus interacciones con nosotros.

Funciones de Google PageSpeed ​​Insight

En Google PageSpeed ​​Insights y Google Lighthouse tenemos una sección que explica las “Capacidades” en detalle. Podemos utilizar estas "habilidades" para mejorar las puntuaciones y, en algunos casos, podemos depender en gran medida de Computing Power (JS). Obtenga una carga ligeramente mejor en su dispositivo.

La buena noticia es que, siempre que fue posible, también nos enseñaron documentos específicos para ayudar a resolver el problema:

Funciones de PageSpeed ​​Insight

Creo que omitiré algunas de las "posibilidades" de la lista, pero intentaré cubrir la mayoría de ellas y descubrir cómo resolverlas.

Eliminar los recursos que obstaculizan la representación

Esta es una de las cosas más comunes sobre las funciones de Google PageSpeed ​​y Google Lighthouse. Se trata de eliminar los bloqueos de carga causados ​​por dependencias o algunas llamadas a otros archivos para JS y CSS, aunque el problema suele ser JS complejo.

Con sugerencias de recursos y carga asincrónica o diferida, podemos hacer cosas interesantes para mejorar esto, pero no es de extrañar.

Con algunos temas o creadores de páginas como Elementor, no es posible utilizar esta función y obtener 100 puntos de 100. El impacto depende completamente de la complejidad del sitio web en particular.

Reducir el tiempo de respuesta inicial del servidor

Esto suele ocurrir cuando Internet no está almacenado en caché o el servidor web tiene problemas de rendimiento. La primera vez que usamos Google PageSpeed ​​Insights para realizar pruebas, está bien si tenemos un caché, la segunda vez no.

Eliminar recursos de JavaScript no utilizados

Como sugiere el nombre, solucionar este problema es fácil. El algoritmo Lighthouse de Google teóricamente puede detectar cuando los recursos JS o CSS no están en uso.

Esto parece una solución simple, pero en muchos casos es un falso positivo y no podemos decirle a Google que lo estamos usando.

Si el JS se está cargando en algunas partes de la página web en lugar de en otras partes, podemos usar la carga condicional (en el caso de WP) para ajustar la carga.

Eliminar archivos CSS no utilizados

CSS y Javascript son exactamente lo mismo: el algoritmo Google Lighthouse utilizado por Google PageSpeed ​​Insights generalmente falla como una pistola de nivel abierto y, a menudo, proporciona falsos positivos con los que no podemos "competir".

Si CSS solo se usa para una o algunas páginas en un sitio web, podemos usar la carga condicional para ajustar la carga.

Utilice el tamaño de imagen correcto

Google Lighthouse puede saber si las imágenes son demasiado grandes (en píxeles) para mostrarse y deben cambiarse de tamaño con CSS.

Para la mayoría de las imágenes, esto suele ser fácil de solucionar: deberá ajustar el ancho máximo para el diseño más grande en el que aparecerán.

En WordPress podemos solucionar fácilmente este problema utilizando el plugin Imsanity, aunque también podemos solucionarlo con una aplicación de escritorio antes de subirlo a un sitio web.

Carga retrasada de imágenes que no están en la pantalla

Esta posibilidad ocurre si no tenemos carga diferida en el sitio web La carga implementada o diferida no afecta a determinadas imágenes.

La implementación de la carga diferida en WordPress es relativamente sencilla, pero en algunos casos siempre habrá imágenes inapropiadas (especialmente fondos) que pueden requerir métodos manuales o de otro tipo para introducir la carga diferida.

Se recomienda utilizar la carga diferida en línea en lugar de JS, ya que es más eficiente, aunque depende de la compatibilidad del navegador web.

Reducir la cantidad de recursos de Javascript

Como sugiere el nombre, simplemente nos dice que reduzcamos los recursos de Javascript. La teoría es simple, pero en realidad hay varios complementos o servicios que pueden lograr el nivel de limpieza requerido por el algoritmo de Google Lighthouse.

Ciertos recursos de Javascript pueden dejar de funcionar debido a que se minimizan demasiado.

Minimizar archivo CSS

Esto es exactamente lo mismo que el anterior: es necesario reducir el tamaño del CSS, pero podemos encontrar que no está al nivel requerido por Google.

Si lo simplificamos, también podemos estropear el aspecto del sitio web.

Evite el uso de Javascript heredado en navegadores modernos

Todavía no sé de dónde vino, ni he encontrado mucha documentación. No pude aislar la causa de esta situación, pero creo que será un código antiguo o una biblioteca desactualizada.

Diagnóstico de PageSpeed ​​Insights de Google

Además de las funciones, también tenemos una lista de diagnósticos en la interfaz de Google PageSpeed ​​Insights. El diagnóstico es más de naturaleza técnica y proviene directamente de Google Lighthouse.

Diagnóstico faro

A veces, las tareas enumeradas en los diagnósticos pueden brindarnos información más detallada sobre la resolución de problemas y mejorar los resultados.

Lo extraño de las listas de diagnóstico es que, por lo general, no tienen un término medio: demasiado técnico o demasiado obvio.

Dejaré algunas, pero intentaré explicar las más habituales.

Asegúrese de que el texto permanezca visible cuando se cargue la fuente web.

Esto es fácil de resolver. Esto suele ocurrir cuando optimizamos la carga de fuentes de Google u otras fuentes descargadas de servidores de terceros.

Solo necesitamos configurar la visualización de fuentes en SWAP.

Minimizar el trabajo del hilo principal.

Esto generalmente se mejora optimizando la carga de Javascript, ya que básicamente sobrecarga el navegador del visitante mientras se carga el sitio web.

No hay nada específico que mejorar en este sentido, pero necesitamos aplicar la tecnología WPO para mejorar FCP y LCP basándonos en todo lo discutido anteriormente en este artículo.

Al cambiar la carga de ciertos scripts a carga asincrónica o retardada, podemos simplificar un poco este diagnóstico.

Utilice estrategias de almacenamiento en caché efectivas para publicar activos estáticos

Para mejorar esto solo necesitamos aplicar el caché del navegador o el caché del navegador, que es simple y parece tonto, pero desde el punto de vista del usuario es muy útil descargarlo.

El problema es que, en la mayoría de los casos, esta regla se aplica a recursos de terceros descargados de otros servidores fuera de nuestro control. Por lo tanto, no hay nada que podamos hacer para solucionarlo.

Reducir el tiempo de ejecución de JavaScript

Además de "minimizar el trabajo del hilo principal", se basa completamente en la tecnología WPO para mejorar la utilización de FCP y LCP.

Reducir el impacto del código de terceros

Resolvimos este problema eliminando el script descargado de un servidor de terceros. En la mayoría de los casos, solo podemos eliminarlos. En otros casos podemos piratear los scripts y almacenarlos en caché localmente para poder realizar ciertas operaciones en ellos o utilizar algunas técnicas de WPO, pero no siempre es así.

Un elemento de imagen no tiene un ancho y un alto únicos.

Esto es exactamente lo que se explica en CLS: Tenemos que especificar el tamaño de todas las imágenes en el código para no perder la puntuación CLS.

Si desea saber qué es CLS, consulte la misma publicación anterior.

Evite sobredimensionar el DOM

Google PageSpeed ​​y Google Lighthouse configuran el elemento DOM anidado más grande como se recomienda. Si usamos un tema o un constructor de páginas con una estructura muy compleja, podemos alcanzar su máximo o incluso superar su longitud.

Esto tiende a romper fácilmente el FCP, pero no afecta demasiado la velocidad de descarga general. Su función es aumentar el consumo de recursos del navegador del visitante al cargar HTML. Si la batería del dispositivo del visitante es muy pequeña, esto puede ser tan dañino como demasiado Javascript durante el proceso de carga.

Mejorar el rendimiento de sitios web importantes

Si bien el algoritmo Lighthouse utiliza muchas métricas para diferentes propósitos y todas las métricas anteriores se capturan y muestran en Google PageSpeed, la realidad de Core Web Vitals es mucho más simple.

Los datos de Core Web Vitals se basan en informes de Chrome UX y los indicadores "efectivos" son LCP, FID y CLS. Recuerde que LCP también incluye FCP (al menos la primera parte), por lo que también medimos FCP.

Ahora llegamos a las cosas importantes. ¿Cómo podemos mejorar Core Web Vitals?

Mejorando la vitalidad de la red central

Necesitamos aplicar todo lo anterior para mejorar estas tres métricas, pero también necesitamos entender cómo funciona Core Web Vitals.

Repetiré lo que expliqué anteriormente.

La implementación de Google Lighthouse del navegador de cada visitante se utilizó para recopilar datos de estas tres métricas de Core Web Vitals. Estos datos se almacenan en informes de Chrome UX en los servidores de Google.

Tome el promedio que se muestra en la Consola de búsqueda de Google:

Consola de búsqueda de Google para Core Web Vitals

Como ha escuchado antes, los datos de Google Search Console son el promedio de los datos recibidos del navegador del visitante.

Esta medición no lo hace de inmediato: al igual que con el promedio de los últimos 28 días, pueden pasar varias semanas antes de que se produzca un cambio en el registro. El problema es que este GPA se basa en el rendimiento promedio y el número de conexiones de los visitantes de nuestro sitio web.

Si no ha visto mi video sobre el tema, lea la última parte y comprenderá por qué digo esto:

Se estima que los colores se pueden ver en la imagen anterior y en la escala de medición.

Todo esto significa que, en algunos casos, incluso si aumentamos significativamente el PageSpeed ​​Score, los tres Core Web Vitals que se muestran en Google Search Console pueden no cambiar o incluso empeorar porque no dependen directamente de nosotros. Sitio web, pero para nuestros visitantes.

Google comentó que Core Web Vitals será un factor de clasificación en 2021. Sin embargo, dado que se tienen en cuenta y en qué medida se utilizan, es difícil hacerlo.

Conclusión sobre Core Web Vitals y Google PageSpeed

No sé qué pasará en el futuro, pero mi consejo como profesional de WordPress y WPO con más de 10 años de experiencia es no dejarse llevar.

El problema comienza cuando las personas pierden el norte porque dejan de mejorar otras partes de la red que son más beneficiosas para ellos y se concentran en cosas que es poco probable que mejoren su negocio.

Si ha visto el video que agregué a este artículo, ya conoce mi opinión al respecto y ha visto evidencia abierta, por lo que no creo que pueda decir más sobre mis resultados.

En conclusión, me gustaría agregar que PageSpeed ​​no es un WPO si cree que esto está muy mal. Aunque se llama PageSpeed, no es uno Descarga el servicio de velocidad o iniciativa. Fue como abrir el bar y llamarlo Funeraria: nadie fue enterrado, solo nombres.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir