Optimizar el elementor para los vitales de la web central utilizando Rose

Core Web Vitals es un estándar utilizado por Google para medir la experiencia general de la página web. Si usa Elementor, puede hacer mucho para optimizar su sitio de alto rendimiento. Este artículo le mostrará cómo transformar un sitio elemental mal configurado en uno que tenga altas puntajes de Google, basado en un proceso de 4 pasos llamado mecanismo de rosa (descuento, optimización, simplificación, eliminación). Nuestro miembro, Nathan Onn, tiene una serie completa sobre él aquí. Core Web Vitals pronto será un factor de clasificación SEO, por lo que es importante saber qué son, cómo trabajar y ajustar su sitio de WordPress en consecuencia.
Lo descompondremos y resumiremos este método en función del uso de nuestros complementos, Smush y Hummingbird, y nuestro alojamiento de WordPress. Pasaremos:
¿Cuáles son los principales elementos vitales de Google?
Obtener la configuración del sitio de Elemento
Reducir archivos con activos para facilitar el sitio de WordPress
Optimización del tiempo de respuesta inicial del servidor
Simplificando su contenido
Eliminar cambios inesperados
Hasta que lea esto, los elementos vitales del elemento de su sitio se verán bien con una salud limpia de Google.

¡Vital se ve bien! Este sitio se elimina para el lanzamiento. Para comenzar, verifiquemos … ¿Cuáles son los principales elementos vitales de Google? Core Web Vitals de Google se centra en los valores que más importan cuando se trata de la optimización. Es una iniciativa de Google que ofrece orientación para proporcionar a los usuarios una experiencia de calidad y es un nuevo estándar para medir la experiencia de la página general. Se aplica a todas las páginas web y debe ser medido por todos los propietarios de sitios. Aunque los elementos vitales evolucionan y cambian, en la actualidad, los elementos vitales básicos pueden ayudar a los sitios de WordPress, permitiéndoles centrarse en tres cosas: carga (pintura de contenido más grande de LCP): esto mide el rendimiento de carga. Una buena experiencia de usuario significa que el LCP debe aparecer en 2.5 segundos cuando la página inicial comienza a cargarse.
Interactividad (FID – First Entrada Retraso): esto mide la interactividad. Una buena experiencia de uso significa que las páginas deben tener un FID menos de 100 milisegundos.
Estabilidad visual (CLS – desplazamiento de diseño acumulativo): esto mide la estabilidad visual. Las páginas deben tener y mantener un CLS inferior a 0.1.
También puede ver el tiempo para cada artículo vital. Para tener una buena idea del lugar donde se encuentra su sitio, Google proporciona un informe central de Web Vitals que puede hacer. Muestra cómo funcionan sus páginas en función de los datos de uso del mundo real.

Y para otra perspectiva, puede ver bien cuáles son los principales vitales de Google Web en este video de presentación general rápida: Como puede ver, es fácil de entender una vez que lo es. Ahora que sabemos qué es Google Core Web Vitals, ¡implementemos! Primero configuraremos un sitio de primaria y iremos desde allí. Usaré el elemento de la página del producto Elemento. La vista del ejemplo de mi sitio. Esto es lo que usaré para el sitio:
Servidor: Plan de bronce de alojamiento de desarrollo WPMU, Región de la Costa Occidental de los EE. UU.: Hola, la página principal de la base: Product-Plugin Application Página: Elementor, Smush, Hummingbird y WPMU Dev Dashboard Php: 7.4 El sitio fue creado por cero. Ninguno de los modelos en la página Elementer ha sido ajustado o modificado. Lo único que hice con él era establecerlo como una página inicial. Lo tomaremos de esto:

67. Podemos hacerlo mejor. En esto:
98 es una gran puntuación! Todo esto se hará utilizando el método Rose. Si tiene un sitio Elementor, Hummingbird y Smush, siga y optimice el sitio con Core Web Vitals.

Es mejor comenzar configurando su propia configuración de optimización de temas. Sin embargo, esto variará dependiendo del tema que use. Configuré este elemento de tema de la misma manera que dije en este artículo. ¡Comencemos! Reducción de los archivos con los activos para facilitar su sitio de WordPress, comenzaremos reduciendo los archivos con los activos para facilitar nuestro sitio de WordPress. Después de todo, cuanto más tenga más archivos su sitio web de WordPress, más tiempo llevará la carga. Para lograr esto, cubriremos dos cosas: combinar archivos JavaScript

Sube tus imágenes Lazy
Después de pasar por las cuatro áreas, nuestros archivos de activos se reducirán, abriendo el camino a un sitio optimizado. Configurarlo para comprimir y organizar automáticamente archivos JavaScript o combinar manualmente haciendo clic en el icono Combinar.
Puede hacer esto individualmente o a granel. Pruébalos uno por uno para mejorar tu puntaje. Para obtener más información sobre cómo combinar archivos JavaScript, asegúrese de leer nuestra documentación.
Cargue sus imágenes perezosas Carga perezosa de sus imágenes. Deja de cargar imágenes fuera de pantalla hasta que un visitante se ejecute hacia ellas. Esto le ayuda a cargar sus páginas más rápido, utilizando un ancho de banda más pequeño y posponiendo imágenes fuera de pantalla. Puede activarlo con un solo clic con Smush en el área de carga perezosa.
Un solo clic es todo lo que se necesita para activar la tarea perezosa. Una vez activado, tiene opciones adicionales, como elegir tipos de medios para la carga perezosa, que incluye/excluir publicaciones, activar la pereza nativa y más (hablaré un poco sobre las características de carga perezosa específicas). Encuentre información adicional aquí. La información más detallada sobre estos pasos y los pasos que acabo de cubrir se pueden encontrar aquí. La optimización del tiempo de respuesta inicial del servidor es cuando se ingresa una URL en un navegador. Una vez terminado, el navegador envía una solicitud al servidor que aloja el sitio. El servidor genera una respuesta que se envía de vuelta al navegador. Luego obtendrá una foto del sitio web.

Algunos factores que pueden conducir a una respuesta lenta incluyen la configuración del servidor, la ejecución del código, el número de conexiones simultáneas y la ubicación del servidor. Es vital tener un tiempo de respuesta rápido, y cuando se trata de optimizar el tiempo de respuesta inicial, y como puede ver, puede hacer mucho. Incluyen:
Use un buen alojamiento con soporte HTTP/2

Elimine los complementos que no necesita
Use un buen complemento de caché como el colibrí
Verifiquemos estos métodos de optimización más de cerca. Mucho más rápido, sin la necesidad de un impulso adicional de su HTTP/2 tiene como objetivo reducir la latencia para mejorar la velocidad de carga de la página en los navegadores web.Incluye mejoras como Binary vs.Textual, completamente multiplexado, compresión de encabezado y más.Si desea optimizar el tiempo de respuesta del servidor, necesita un buen host.Nuestro desarrollo WPMU dedicado es HTTP/2 TLS (Nivel de transporte) 1.3 predeterminado.Le dará una configuración de servidor optimizada, lo que da como resultado tiempos de respuesta mucho más rápidos.
Para obtener más información sobre nuestro alojamiento, puede ver lo que incluye aquí. Eliminar los complementos que no necesita es una tarea que explica por sí misma, lo cual es fácil de hacer y puede ayudar a optimizar su sitio de WordPress. Todo lo que tiene que hacer es eliminar cualquier complemento no utilizado que no sea necesario. Los complementos innecesarios pueden bloquear su sitio y causar problemas de rendimiento. Si no los usas, deshazte de ellos. Siempre puede reinstalarlos más tarde, si es necesario. Use un buen caché, tal caché. La memorización de caché mejora el rendimiento al hacer que las páginas se carguen rápidamente. Hummingbird ofrece muchos tipos de almacenamiento de caché, que incluyen páginas de almacenamiento, almacenamiento de caché grave, almacenamiento del navegador y almacenamiento de caché RSS. Además, es fácil de activar. Solo toma un clic. Un solo clic es todo lo que se necesita para activar el caché de Hummingbird. Lea más sobre el caché de Hummingbird en este artículo. Simplificando su contenido hasta ahora, si ha seguido, los vitales de la web principales están a punto de mejorar. Sin embargo, puede hacer más, especialmente cuando se trata del contenido “por encima del pliegue”. Esto se refiere al contenido en la pantalla que es visible sin desplazarse o hacer clic. Veremos cómo simplificar las cosas por:
Compresando imágenes con Smush
Limitar las imágenes “sobre el pliegue”
Ningún contenido se basa en JavaScript en la sección “arriba del pliegue”.

Compresando imágenes con Smush, querrá comprimir sus imágenes para tiempos de carga más rápidos.Al igual que Hummingbird, Smush aparece nuevamente como la solución perfecta para comprimir imágenes en su sitio web de WordPress.Smush hace que sea fácil de hacer con sus poderes de mantequilla a granel, que optimiza sus imágenes de un solo clic.Después de eso, ella te hará saber cuántos ahorros tienes en MB.

¡Los ahorros de 593.5 MB definitivamente acelerarán su sitio! Hay muchas otras opciones de optimización cuando se trata de sus imágenes. Asegúrese de leer más sobre ellos aquí. Esto consiste en el logotipo de su sitio y la imagen de su héroe si tiene una imagen de fondo, también se incluye en el recuento. Por supuesto, es tentador agregar muchas campanas y silbatos, pero realmente puede afectar su sitio. La adición de imágenes adicionales aumentará el tiempo de carga. Si solo tiene dos imágenes, su puntaje LCP crecerá. Intenta mantenerlo como mínimo. No ponga contenido basado en JavaScript en la sección “arriba del pliegue”. Para resumir, es mejor mantener la sección “por encima del pliegue” sin desorden. Esto incluye todo tiene un contenido basado en JavaScript, como diapositivas, carruseles, animaciones, etc. La razón de esto es que puede causar una apariencia inesperada y cambios más extensos en los elementos LCP. Lo que nos lleva a … eliminar los cambios de aspecto inesperados anteriores, donde menciono que no colocé contenido basado en JavaScript por encima del pliegue, también abordo los cambios inesperados. Esto puede suceder, por ejemplo, con diapositivas. Los cambios inesperados de la apariencia son los cambios en la colocación de las características en una página web. Son un problema, porque pueden crear saltos y papas con animaciones, lo que hace que el contenido sea más difícil de leer. Hay diferentes formas en que pueden suceder. Incluyen: cambios de apariencia causados ​​por imágenes
Cambiar la apariencia causada por los fracasos de iframe
Cambio de la apariencia causada por el contenido basado en el cambio de apariencia de JavaScript (por ejemplo, Carousel) causado por Google Fonts
Puede tomar algunas pruebas para determinar el elemento correcto que causa un cambio en la apariencia. Sin embargo, si continúa mirando, encontrará al culpable y solucionará el problema. Echemos un vistazo a cada uno. Al hacer esto, el tamaño seguirá siendo el mismo y eliminará cualquier cambio. Además, establecer el lecho de los lados de los perezosos puede ayudar con este problema. Esta función deja de cargar las imágenes hasta que un usuario se ejecuta.
Elija una duración y retraso para la animación. Cambiando la apariencia causada por los marcos de iframe como con las imágenes, puede asegurarse de que la carga perezosa se active para iframe. Esto ayuda a evitar cualquier cambio en la apariencia con videos. En Smush, es una de las opciones que puede seleccionar en el área de tipos de medios.

Seleccione varios tipos de medios simultáneamente. Después de hacer clic en iframe (junto con las otras opciones), su sitio se cargará más rápido y ayudará a evitar cambios en la apariencia. Lo que puede resolver en el elemento en sí es uno causado por el contenido basado en JavaScript. Estos incluyen cosas como diapositivas, carruseles y cuadrículas de mampostería. Puede solucionar esto si usa el widget deslizante o el widget de carrusel agregando una altura fija a todas las ventanas de visualización diferentes en el tablero elemental. Si usa un complemento, a menudo puede tener una opción de altura adaptativa. Asegúrese de deshabilitar esto, o un carrusel salta y sale a medida que cambia la altura de la imagen. Para complementos de cuadrícula de mampostería, asegúrese de tener una altura fija al contenedor de cuadrícula. Al hacerlo, su cuadrícula ya no fluctuará ya que un usuario se está ejecutando en una página. Hay algunos problemas con la precarga de Google Fonts y otros en el elemento, pero no resolverá todo el problema. Continuará viendo algunos cambios de apariencia.
Ejemplo desde donde puede ajustar la carga de las fuentes de Google en el elemento. Hummingbird pronto lanzará una versión para optimizar las fuentes de Google. Puede consultarlo en nuestro centro de prueba (programado para ser lanzado en unos días). Al pasar la prueba después de establecer todo lo que pasé, ¡los puntajes hablan por sí mismos! En Google PageSpeed ​​Insights, mi sitio de Elementor obtuvo la Nota 98 ​​(como se ve al comienzo de este artículo). No está nada mal. Una cosa a tener en cuenta es que no todas las técnicas funcionarán con cada sitio y es posible que deba incluir cada paso en el proceso de optimización. Sin embargo, vale la pena probar todos los métodos mencionados y ver cómo se ve el propósito principal en su sitio es eliminar tantos elementos como sea posible, lo que conduce a una mejor puntuación de Google PageSpeed ​​Insights. ¿Te levantaste al frente? ¿Del desafío de optimizar tu WordPress? Esto se probó con un sitio elemental; Sin embargo, este método se puede utilizar para otros temas y constructores del sitio. Para obtener un resumen completo de estos métodos utilizando nuestros complementos y otras opciones, nuestro miembro, Nathan, lo ha tratado por completo en su artículo optimizar su sitio de WordPress para Core Web Vitals utilizando el mecanismo de rosa. Asegúrese de leerlo para comprender el método Rose y optimizar los sitios como Elementor. Y para obtener más consejos para la optimización primaria, asegúrese de leer nuestro artículo, cómo optimizar el elemento libre utilizando nuestros complementos Smush y Hummingbird. ¡Optimizar su sitio de WordPress será saludable y rosa en el menor tiempo! Colaboradores Este artículo fue escrito en colaboración con:
Nathan Onn: desarrollador de WordPress con más de 13 años de experiencia.Nathan está obsesionado con la construcción de productos de WordPress, además de compartir su conocimiento con otros entusiastas de WordPress.*** Nota: No aceptamos artículos de fuentes externas.Los miembros de WPMU DEM, sin embargo, pueden contribuir con ideas y sugerencias para tutoriales y artículos en nuestro blog Xchange. ¿Ha probado el método Rose?¿Cómo mejoró su sitio?¡Dinos en los comentarios!