jueves, marzo 28, 2024
No menu items!
InicioBlogsCómo optimizar Core Web Vitals para sus sitios de WordPress

Cómo optimizar Core Web Vitals para sus sitios de WordPress

Cómo optimizar Core Web Vitals para sus sitios de WordPress

Si está buscando optimizar “Core Web Vitals” para sitios de WordPress con un enfoque probado, le encantará esta publicación.

Como sabrá, Core Web Vitals será una factor de clasificación En 2021, es el momento adecuado para mejorar Core Web Vitals en sus sitios de WordPress.

Sin perder mucho tiempo, este es mi enfoque para optimizar los “Core Web Vitals”.

Optimice los elementos básicos de WordPress Web Vitals

Optimice Core Web Vitals en WordPress

Los Core Web Vitals se miden según la carga de la experiencia del usuario, la interactividad y la estabilidad visual, y Google los caracteriza en tres métricas:

  • Pintura con contenido más grande (LCP): mide el tiempo de carga inicial y el LCP debe ocurrir en 2,5 segundos.
  • Retraso de la primera entrada (FID): mide la interactividad y debe ser inferior a 100 milisegundos.
  • Cambio de diseño acumulativo (CLS): mide la estabilidad visual final, que debe ser inferior a 0,1
Cómo optimizar

Google recopila datos de usuarios reales que visitan su sitio e ingresa los datos para medir Core Web Vital. Más allá de eso, puede utilizar herramientas como PageSpeed ​​​​Insights, Chrome Audits e informes de Search Console para monitorear el rendimiento de sus sitios de WordPress para los usuarios.

Al mejorar las puntuaciones de LCP, FID y CLS, podemos lograr los mejores resultados tal como lo hemos hecho a continuación. Si está buscando una guía más detallada, aquí está nuestro enlace a otras publicaciones.

Cómo optimizar

Esta es nuestra forma más sencilla de mejorar Core Web Vitals y a continuación se encuentran las cuatro métricas obligatorias que deben mejorarse primero.

1. Reducir TTTB para mejorar el tiempo de respuesta del servidor

El tiempo hasta el primer byte, como su nombre indica, es el tiempo que tarda el navegador en recibir el primer byte de datos del servidor.

Baje el TTFB, más rápidos serán sus servidores.

Dado que TTFB es la base para mejorar LCP, que es la base para mejorar Core Web Vital, puede comprender lo importante que es TTFB y elegir el mejor alojamiento TTFB según su presupuesto.

Así es como nuestro sitio se carga con un TTFB de menos de 50 ms en 14 ubicaciones globales y Utilice esta herramienta para verificar su TTFB y Google recomienda que sea bueno por debajo de 200 ms.

Cómo optimizar

Haciendo un cálculo aproximado, el valor TTFB inferior a 1000 ms se puede optimizar con las siguientes técnicas y si el TTFB es superior a 1 segundo, entonces definitivamente deberá cambiar y elegir el alojamiento WP más rápido.

🔥 Leer:  Cómo realizar un restablecimiento completo de fábrica en Huawei P9 Plus

2. Configuración óptima de caché de WordPress

Para este tutorial, utilizo WP Rocket ya que es el complemento de almacenamiento en caché número uno para WordPress. Una vez activado, marque la pestaña Caché y habilite esta opción.

Cómo optimizar

Simplemente deje Minify {HTML, CSS & JS} en el complemento, ya que haremos lo mismo en CDN, que suele ser más rápido. Ahora habilite “Combinar archivos de fuentes de Google” y “Eliminar cadenas de consulta de recursos estáticos”.

Al combinar fuentes de Google, reduce las solicitudes HTTP.

Cómo optimizar

En Medios, imágenes, iframes y vídeos LazyLoad. Además, desactive Emojis para reducir las solicitudes HTTP.

Cómo optimizar

Vaya a Prefetch.xyz, inicie sesión en su sitio y obtenga la lista de dominios que se pueden recuperar previamente desde su dominio. De esta forma, se reducirá el número de solicitudes HTTP y mejorará el tiempo de carga.

Cómo optimizar

3. Utilice CDN pagas

En mi publicación sobre LCP, recomendé que la versión gratuita de Cloudflare es mejor que la versión paga. Pero estaba equivocado. La versión gratuita es buena, pero Cloudflare no utiliza todas las ubicaciones POP para los usuarios gratuitos.

En un caso, que encontré aquí, Cloudflare utiliza POP de Singapur para entregar contenido a visitantes indios, aunque tienen más de siete POP en India. Así es, Cloudflare utiliza algunas ubicaciones POP limitadas para ofrecer contenido en la UE y EE. UU.

Esto causa algunos problemas de latencia y debes optar por una opción paga de $20 por mes. Pero el precio es más alto y sólo puedes alojar un dominio. Afortunadamente, descubrí que StackPath solo cuesta $10 al mes y también permite un número ilimitado de sitios alojados, lo cual es lo mejor. StackPath promete “Todos los PoP globales incluidos”, mientras que Cloudflare da preferencia a los clientes Enterprise > Business > Pro > Free.

Cómo optimizar

4. Elimine los complementos de carga lenta no deseados

Esto debería ser lo primero que hago cuando adquiero un nuevo cliente. Simplemente les pido la lista de complementos que menos necesitan y los elimino sin piedad.

¿Por qué? Tanto los complementos como WordPress tienen la culpa. Digamos que estás usando un complemento para una función particular en una sola publicación, WordPress carga todos sus scripts en todas las páginas, aumentando así una lista enorme de scripts cargados incluso si no lo usamos.

Aparte de eso, una vez cada pocos meses, debe revisar su sitio y eliminar los complementos de tiempo de carga y considerar reemplazar los complementos que consumen muchos recursos en su sitio.

Instalar Monitoreo de consultas y hace el trabajo de mostrar qué complemento ralentiza la carga de WordPress.

5. Utilice CDN de imagen

¿CDN para el sitio y nuevamente CDN para las imágenes? Sí, ambos son diferentes. La mayoría de las CDN minimizan scripts como HTML, CSS y JS y los almacenan localmente en todos los POP para mejorar los tiempos de carga.

Pero la optimización de la imagen es otra cosa. El propósito de Image CDN es proporcionar imágenes adaptables basadas en los navegadores de los usuarios. Todas sus imágenes tienen un tamaño predeterminado y no se ajustan bien a las pantallas, lo que afecta el tiempo de carga y también los cambios de diseño acumulativos.

🔥 Leer:  Principales extensiones gratuitas de Chrome para análisis web

Para solucionar este problema, Image CDN es lo último desarrollado en la industria web.

  • Proporcionar imágenes adaptativas.
  • Cargar imágenes desde la ubicación CDN global
  • Cargar imágenes solo en la ventana.
  • Convierte automáticamente imágenes a WebP

WP Compress es uno de esos complementos que utiliza Google CDN para ofrecer imágenes en todo el mundo y también hace todo lo mencionado anteriormente. Aquí está mi panel de WP Compress. Hay algunos otros complementos como Optimole en el mercado, pero WP Compress es perfecto para este trabajo.

Cómo optimizar

6. Eliminar JavaScript no deseado

JavaScript es lo único que debe mejorarse para optimizar sus sitios para el retardo de la primera entrada. FID mide el tiempo que tarda entre la primera interacción de un usuario en la página y el tiempo que tarda el navegador en responder a la interacción.

Tomo una cita de mi post anterior.

En pocas palabras, cuando visitas una página, el texto se vuelve visible primero y luego los demás elementos. Incluso si los textos son visibles, no podrá desplazarse por la página ni ampliar las imágenes ni hacer clic en ningún elemento basado en JavaScript. Después de algunas veces, estos elementos estarán disponibles para interactuar. El FID mide aquí el período de tiempo y debería ser inferior a 100 ms.

Lo primero y más importante es eliminar el JavaScript no deseado antes de realizar cualquier optimización.

Cargue la URL de su sitio en modo incógnito y haga clic en Inspeccionar elemento, busque en la pestaña Red. Ahora seleccione JS y Chrome enumerará todo el JavaScript cargado en la página. Aquí está uno de nuestros sitios de la competencia.

Cómo optimizar

Cuando pasas el cursor, Chrome muestra JS, que tarda mucho en cargarse. Simplemente elimínelos o reemplácelos con complementos livianos similares. A continuación se muestra nuestro uso perfecto de JS, solo utilizamos el JS más esencial para el sitio.

Cómo optimizar

7. Reducir la ejecución de JavaScript

Cada complemento y creador de páginas inyecta una gran cantidad de JS en todas sus páginas. TablePress es un gran ejemplo en el que solo los he usado en tres publicaciones, pero su JS se carga en más de 100 páginas de nuestro sitio, lo que aumenta desesperadamente el tiempo de carga. Ahora reduciremos la ejecución de JavaScript cargando solo el JS necesario.

Cómo optimizar

Puede utilizar PerfMatters o WP Asset Clean up y hará el trabajo por usted. Cargue cualquiera de sus páginas y haga clic en Administrador de secuencias de comandos. Con la nueva ventana, el complemento enumera todos los CSS/JS cargados en la página y usted puede simplemente desactivar los innecesarios.

8. Minimizar y comprimir JavaScript

Al minimizar y comprimir JavaScript, el tamaño de JS se reducirá y se cargará más rápido. Con la siguiente opción en WP Rocket, reduzca los espacios en blanco y los comentarios para reducir el tamaño del archivo.

🔥 Leer:  ¿Cómo eliminar Vpn Proxy Master?
Cómo optimizar

9. Posponga el análisis de JavaScript

Con la pestaña “Optimización de archivos” de WP Rocket, habilite “Cargar JavaScript diferido” y seleccione “Modo seguro para jQuery” para diferir el análisis de JS.

Cómo optimizar

10. Optimice el desplazamiento de diseño acumulativo

¿Cuántas veces intentas hacer clic en un elemento pero terminas haciendo clic en otra cosa?

La mayoría de los sitios que muestran anuncios utilizan este truco. Es posible que haya planeado hacer clic en un botón y, en unos pocos milisegundos, se mostrará un nuevo anuncio gráfico y es posible que haga clic en él accidentalmente.

Esto es frustrante y sucede cuando el botón visible se mueve para permitir que se carguen anuncios gráficos. Esto puede ser intencional o no y afecta la puntuación acumulativa del cambio de diseño.

CLS mide la inestabilidad del contenido y mide los cambios de diseño en una página durante las interacciones del usuario.

Aquí hay algunas cosas que debe tener en cuenta para mejorar CLS.

  • Agregue dimensiones a imágenes, anuncios, incrustaciones e iframes
  • Disminución de la presencia de Contenido Dinámico
  • Acciones esperando una respuesta de la red antes de actualizar el DOM

Google dice que Response Design causa tales problemas. Anteriormente, las imágenes se mencionaban con el “alto” y el “ancho” correctos. Para solucionar este problema, Google recomienda agregar “alto” y “ancho” ahora y con WordPress no tienes este problema ya que la mayoría de los temas especifican la relación de aspecto de la imagen, por lo que no se cambiará el diseño.

Google también recomienda tener algo de espacio de reserva para los anuncios, de modo que incluso si los anuncios se cargan más lentamente, el cambio de diseño no se producirá y lo mismo ocurre con las incrustaciones y los iframes.

A diferencia de la optimización para LCP y FID, CLS requiere que revises manualmente tu sitio web para identificar los problemas exactos. Puede utilizar cualquiera de las herramientas como WebPageTest, PageSpeed ​​​​Insights o Chrome Audits para identificar el mismo.

Si utiliza Google Fonts, alguien visita su sitio, se realiza una solicitud para cargar las fuentes desde una fuente de terceros.

Durante este tiempo, el sitio intenta cargar la fuente alternativa que tiene su sitio y luego carga la nueva fuente más tarde, lo que hace que el diseño cambie.

Utilizar el DIOS MÍO complemento que no solo ayuda a alojar sus fuentes localmente sino también a precargarlas.

Terminando

Esta es nuestra primera copia de la optimización de Core Web Vitals para sitios de WordPress. Puede consultar nuestras publicaciones individuales de LCP y FID que incluyen un enfoque más detallado para mejorar su puntuación de Core Web Vitals.

Dado que este es un tema en evolución, espere que actualice esta publicación varias veces en una semana con la guía de referencia más precisa para optimizar Core Web Vitals.

Recomendamos

Populares