Cómo optimizar su sitio web de WordPress para los principales elementos web vitales

Mantener con el algoritmo de Google en constante cambio es algo inteligente como propietario de un sitio. Y si este es tu objetivo, ¡prepárate! Hay otro. En 2020, Google anunció que los elementos web básicos vitales se convertirán en un factor de clasificación en los motores de búsqueda. Estos elementos vitales se agregarán a las otras señales de experiencia que Google ya está utilizando. Las otras señales son la compatibilidad con los dispositivos móviles, la seguridad del sitio (HTTPS) y evitan las ventanas emergentes innecesarias. En este artículo, descubrirá qué son los centrales vitales web y cómo puede optimizar su sitio web para esta actualización de algoritmo.
Contenido:
¿Cuáles son los centrales vitales (CWV)?
Cómo medir los valores web vitales de la web básica
El mayor contenido de contenido (LCP)
¿Cuál es un buen puntaje LCP?
¿Qué causa una puntuación LCP baja?
Cómo mejorarlo.
Retraso a la primera entrada (FID)
¿Cuál es una buena partitura FID?
¿Qué causa un puntaje de FID bajo?
Cómo optimizarlo.
Cambio de apariencia acumulativo (CLS)
¿Cuál es un buen puntaje?
¿Qué causa una puntuación de CLS baja?
Cómo optimizarlo.
Conclusión
Cuáles son los centrales de Web vitals de Google Core Web Vitals es un conjunto de valores de velocidad de página que les dan a los propietarios del sitio una mirada a cómo está su sitio.
Actualmente, hay valores de velocidad de 3 páginas que constituyen vitales web de Google Core. Son:
El mayor contenido de contenido (LCP)
Retraso a la primera entrada (FID)
Cambio de apariencia acumulativo (CLS)
Le mostraremos cuáles son y cómo mejorar sus elementos web vitales básicos. Pero primero, echemos un vistazo a cómo medirlos. Cómo medir los valores web básicos vitales El contenido más grande lleno de contenido (LCP) Esto simplemente se refiere al tiempo requerido para cargar el elemento más grande en su sitio web. ¿Cuál es una buena puntuación LCP? Un buen puntaje LCP es entre 0-2 segundos. Necesita una mejora cuando el tiempo de carga es entre 2-4. Cualquiera más allá de eso es pobre. ¿Qué causa una puntuación LCP débil? Las causas de LCP deficientes incluyen: el tiempo de respuesta lento del servidor LCP débil podría ser el resultado de un servidor lento. Cuando un navegador envía una solicitud al servidor, pero el servidor no responde rápidamente, afecta el tiempo de carga de su página, así como los vitales web centrales. JavaScript y CSS que bloquean la representación cuando un navegador recibe contenido del servidor, debe analizar la página HTML. Después de que esto suceda, se mostrará el contenido. Sin embargo, hay momentos en que los guiones y estilos bloquean el análisis HTML. Tiempos de carga lenta de recursos Los elementos que tardan demasiado en cargar afectan la puntuación LCP, especialmente cuando se juegan por encima del pliegue. Algunos de los elementos incluyen imágenes, videos y elementos a nivel de bloque.

Deberá administrar los tiempos de carga de recursos comprimiendo archivos y optimizando imágenes. Cómo mejorar su puntaje LCP aquí es qué hacer si la puntuación LCP es débil o requiere una mejora. Actualice su plan de alojamiento web (o cambie el webhost), esta es una idea. Un buen plano de alojamiento web lo ayuda a mejorar su tiempo de carga general y le brinda una mejor puntuación LCP. Un plan de host web con buenos recursos, como una unidad SSD, más ancho de banda y RAM le brinda un mejor rendimiento del sitio. Elimine los scripts de terceros cuando se trata de cargar problemas de velocidad, los scripts de tercera parte suelen ser culpables. Esta es la razón por la que necesita limpiar un poco el sitio, verifique si no se necesitan scripts de terceros y eliminarlos. Estos scripts pueden incluir comerciales, incorporar y compartir botones que hacen un sitio web más reportable, pero póngano en peligro de que velocidad del proceso. Si las Escrituras no ayudan a la funcionalidad de un sitio, puede dejarlas ir. Elimine los elementos de la página grande si hay un elemento que afecta su puntaje LCP, una prueba de Google PageSpeed ​​Insights le revelará. Simplemente ingrese la URL de su sitio y haga clic en el botón y obtenga un informe. Si es necesario, elimine las grandes sugerencias. Minimice las herramientas de CSS como complement Better WordPress Minify puede ayudar a reducir el CSS. Toma su CSS bien codificado y elimina el espacio, la sangría, las nuevas líneas, los comentarios y otros elementos que no son necesarios para la implementación del código.
Retrasar a la primera entrada (FID) Cuando un usuario hace clic en un enlace en su sitio o toca un botón en su página web, está esperando una respuesta. El tiempo entre la introducción del usuario y el momento en que el navegador responde se llama First Input Delay. Este es el tiempo requerido para que un sitio web responda después de que un usuario interactúa con el sitio. ¿Cuál es una buena partitura FID? FID se mide en milisegundos. 100 ms o menos se considera una buena puntuación. Los puntajes entre 100 ms – 300 ms requieren mejoras. Cualquiera de más de 300 ms es débil. ¿Qué causa un FID débil? El pobre FID aparece cuando el hilo principal del navegador está ocupado con la ejecución del pesado JavaScript después de que se ha cargado el contenido de la página. Un usuario está tratando de interactuar con algunos elementos en la página, pero el navegador está ocupado con otras cosas. Esta es la causa principal de un retraso débil en la primera entrada.
Para remediarlo, optimice cómo un navegador trata a JavaScript en su sitio web. Esto reduce automáticamente el primer retraso en la reproducción en WordPress y mejora los vitales de la web central. Cómo optimizar el retraso en la primera entrada son algunas formas de mejorar el retraso en la primera entrada a WordPress. Incluyen: 1. APUMENCIÓN DE JAVASCRIPT, puede administrar los problemas de JS posponiendo los archivos JavaScript. Cuando haga esto, los recursos de bloqueo de representación solo se cargarán después de que el navegador haya hecho contenido más importante. Como resultado, el rendimiento de carga mejora, así como la puntuación FID.
Primero, identifique los recursos JS de aplazamiento, luego agregue el atributo de diferir a los archivos JavaScript. El atributo de diferir le dice al navegador que no se ejecute de inmediato. Más bien, el navegador continúa procesando HTML y construyendo DOM. El script se ejecuta solo cuando DOM está completo. Un ejemplo: También puede usar complementos como WP Rocket para posponer JavaScript. 2. Elimine JavaScript sin usar al instalar temas y complementos en su sitio web de WordPress, cargan scripts en sus páginas para hacer su trabajo. Si bien algunos scripts son útiles, otros pueden no ser esenciales para la funcionalidad de su sitio.

Para conocer la lista de archivos JS que no necesita, consulte las ideas de PageSpeed. Te da un desglose de los archivos JS no utilizados para eliminar.
Si no desea eliminar los archivos, solo puede cargarlos cuando sea necesario. Puede usar los perfmatters de complemento de WordPress para este propósito. También puede retrasar la ejecución de JavaScript hasta la primera interacción con el usuario (por ejemplo, ejecutar, hacer clic en un enlace o un botón, ejecutar la página, etc.). Entonces, excepto que el usuario interactúa con su sitio, no se cargará ningún script JS. Esto mejorará los valores vitales de su sitio web.
3. La minería de los archivos JS Otra forma de mejorar el FID (y la puntuación Core Web Vitals en general) es reducir los archivos JavaScript. Esto significa que eliminará los descansos ordinarios, los comentarios y los espacios blancos en el código. Cuando haces esto, el tamaño del archivo se vuelve más pequeño. Puede usar una herramienta de mini -compilador para hacer el trabajo para hacer el trabajo. Cambio de apariencia acumulativo (CLS) ¿Alguna vez ha intentado abrir un enlace en un sitio web y luego el aspecto del sitio cambia? En lugar de hacer clic en el enlace, ha hecho clic en un anuncio, banner u otro elemento en el sitio. Y peor, intenta comprar un producto en una tienda en línea. Pero, los productos parecen tener sus propias mentes: moverse a la izquierda y a la derecha, hacia arriba y hacia abajo en la página. Ahora tiene el producto incorrecto en el carrito. Si esto le sucedió, comprenderá lo desagradable que es. Ese cambio repentino en la apariencia de la página se llama cambio de apariencia. Ocurre cuando un elemento visible se ve obligado a moverse porque se ha insertado otro elemento en la página o redimensionada. Estos elementos se llaman elementos inestables. La suma de todos los cambios de aspecto que aparecen en una página (excluyendo los causados ​​por la interacción del usuario) se llama cambio de apariencia acumulativa. ¿Cuál es un buen puntaje? Para brindar la mejor experiencia a los visitantes, es importante mantener su puntaje CLS en 0.1 o incluso menos. Puede parecer difícil de lograr, pero es posible. Cualquier puntaje entre 0.1 y 0.25 necesita una mejora, y cualquier puntaje superior a 0.25 es débil.

¿Qué causa CLS débil?Si su puntaje CLS es bajo, podría ser el resultado de lo siguiente: Imágenes sin dimensiones hasta ahora, los desarrolladores web eran una práctica ordinaria para agregar los atributos de ancho y altura a la etiqueta
. Esto asegura que el navegador asigne suficiente espacio a la imagen. Sin embargo, con la introducción del diseño web receptivo, los desarrolladores han dejado de usar el ancho y la altura del atributo. Más bien, adoptaron el enfoque CSS (usando CSS para dimensionar las imágenes). Aunque este enfoque es bueno, tiene una desventaja: el navegador no asigna suficiente espacio para la imagen. Entonces, cada vez que se descarga una imagen, se deben rechazar otros elementos. Esta es una fuente muy común de cambios de apariencia inesperados. Anuncios dinámicos Los anuncios dinámicos son uno de los mayores contribuyentes a los cambios de apariencia en una página web. Aunque los anuncios son fáciles de instalar y se ejecutan automáticamente en su sitio web, sus dimensiones varían. Incorporar lo mismo que los anuncios dinámicos, las incorporaciones contribuyen a los cambios. Cuando incorpora videos, mapas y páginas, los navegadores no reservan suficiente espacio para ellos. Entonces, al descargar, se deben rechazar algunos otros elementos para crear espacio para el elemento construido. Contenido dinámico El contenido dinámico viene en forma de pancartas, botones de exhortación, formularios, etc. Al igual que los anuncios, la incorporación e imágenes, si no hay espacios asignados para contenido dinámico, otros elementos deben moverse tan pronto como se carguen. Fuentes web personalizadas Fuentes web personalizadas pueden afectar su puntaje CLS. Cuando se usa fuentes personalizadas en su sitio, su navegador primero debe usar una fuente alternativa antes de descargar sus fuentes personalizadas. Su navegador también puede usar texto invisible.

Después de una descarga completa de fuentes personalizadas, cambia la ubicación de los elementos. Cómo optimizar los cambios de aspecto acumulativo Si desea tener una puntuación de CLS 0.1 o menos, aquí hay algunas cosas que hacer: especificar las dimensiones de las imágenes y videos al ingresar una imagen o elemento de video, no olvide especificar su ancho y altura. Solo puede establecer el ancho y el navegador establece automáticamente la altura. No habrá cambios en la apariencia cuando hagas esto. Esto, a su vez, mejora los vitales de su web central. El espacio de reserva utilizando la reserva CSS para AD y el espacio de incorporación puede reducir la cantidad de cambios de apariencia en su sitio. Puede adoptar técnicas como casillas de informe de aspecto CSS. Esto le dice al navegador cuánto espacio debe asignar los comerciales e incorporaciones mientras se carga la página. No coloque anuncios cerca de la parte superior de su ventana de visualización, los anuncios colocados cerca de la parte superior de la ventana de visualización dan como resultado más que cuando se colocan en el medio. La razón es simple: los anuncios en la parte superior de la ventana de visualización tienen más contenido. Esto significa que más elementos tendrán que cambiar. Por otro lado, los anuncios ubicados en el medio de la ventana de observación no tienen tantos elementos debajo de ellos. Esto significa que habrá cambios de apariencia más pequeños. ¡CONCLUSIÓN NO SE ABATA A LA INESESTADO! A partir de junio de 2021, los elementos web básicos vitales se utilizarán como factores de clasificación de Google. Esto significa que perderá la clasificación si no optimiza su sitio ahora.