Cómo optimizar el elemento libre usando nuestros complementos Smush and Hummingbird

Elementor no es extraño para la comunidad de WordPress, dado que él es uno de los mejores y más populares creadores de páginas allí. Y para mejorarlo aún mejor cuando se trata de optimización, puede mejorar mucho con nuestros complementos gratuitos: Smush y Hummingbird. Los sitios de WordPress construidos con Elementor a veces tienen una carga lenta innecesaria de la página debido a varios factores, incluidas imágenes grandes, caché, CDN y otros. Afortunadamente, con Smush y Hummingbird, puede ayudar a mitigar cualquier desaceleración y hacer que el sitio funcione durante todo su potencial.
Echaremos un vistazo a algunos ejemplos de lo que todo Smush and Hummingbird puede hacer para mejorar su sitio web de Elementer. Además, veremos algunos ejemplos en acción con dos temas populares: Hello Elementor y Astra. También incluiremos algunos consejos generales para garantizar que su sitio de elementor esté actualizado. En este artículo pasaremos:
Cómo optimizar el elementor usando Smush
Cómo optimizar la primaria usando colibrí
Ejemplos para mejorar dos Toppress Toppress – Hello Elementor y Astra – con Smush, Hummingbird y Elementor
Consejos generales para acelerar Elementor
Al final de este artículo, tendrá todas las herramientas y conocimientos para optimizar su sitio web de Elementer para obtener el máximo rendimiento.
Y le mostraremos exactamente cómo tomamos un sitio elemental de un puntaje de velocidad de páginas 80/100, a 99/100 usando solo Smush y Hummingbird … así que lea más. Para comenzar, asumiremos que tiene elemento (y si no lo hace, obténlo gratis aquí). Además, si aún no lo ha hecho, descargue Smush y Hummingbird. Al ser un complemento de optimización de imágenes de 5 estrellas y 5 estras, tiene más de un millón de usuarios activos hasta ahora. Colabora bien con Elementor para garantizar que la optimización de su imagen esté en los más altos estándares y que su sitio sea rápido.

Veremos algunas de sus maravillosas capacidades que funcionan bien con Elementor y cualquier tema que use. Incluyen:
Smushing todas sus imágenes Elemento a granel
La compresión automática de nuevas cargas
Súper insuficiente por duplicar la compresión
Agregar imágenes más grandes con el cambio de tamaño de la imagen de Smush
Conversión de archivos PNG a JPEG
Smushing desde la biblioteca de medios
Carga lenta
Usando CDN de Smush
Smushing todas sus imágenes Elementor a granel Dependiendo del sitio elemental que construya, es posible que ya tenga muchas imágenes en su sitio.
Afortunadamente, la función Bulk Smush puede manejarlo con un clic desde el tablero de Smush.
Como puede ver, 51 accesorios de este ejemplo requieren volver a insucitar. Una vez terminado, Smush te lo hará saber.

¡Todo está aplastado! Con Smush, puede excluir ciertas imágenes (por ejemplo, miniaturas). Es una manera perfecta de optimizar rápidamente sus imágenes con Elementor. Obtenga información más detallada sobre el flujo a granel aquí. Compresión automática de nuevas cargas cada vez que agrega nuevas imágenes al elemento, puede comprimirlas automáticamente con un solo clic. En el tablero de Smush, puede activar rápidamente esta opción. Van nuevas imágenes haciendo clic en el botón. ¡Se necesita mucho! Todas sus nuevas imágenes serán comprimidas. Super-Smush puede ofrecer una doble compresión a un fruncido ordinario. Lo hace eliminando cada gramo de datos que no es necesario. Lo mejor es que tiene una compresión de pérdidas, por lo que hay una disminución de muy baja calidad. Es muy mínimo y no observado para el ojo humano en la mayoría de los casos. Como la mayoría de las cosas con Smush, puede hacer esto con un solo clic del administrador.

Super-Smush está listo para todas sus imágenes elementales. Compruébelo y vea si nota una diferencia en la calidad de la imagen. Sospechamos que no hará esto. Poder generar una dimensión de imagen optimizada de imagen máxima. Si desea agregar imágenes más grandes a su biblioteca de medios, puede reemplazar esto con el cambio de tamaño de la imagen Smush.

Estás a un clic de cambiar el tamaño de la imagen. Después de hacer clic, puede elegir un nuevo tamaño de imagen. Inserte cualquier tamaño nuevo que desee. También puede elegir si las imágenes de tamaño completo están incluidas o no en un bosque a granel.
Haga clic en estas opciones para aplastar las imágenes originales a tamaño completo y almacenar una copia de sus pequeños originales. Mantenga el control sobre sus imágenes de tamaño completo con cambio de tamaño de imagen. Mejor que el otro. Dicho esto, cuando se trata de velocidad, el uso de JPEG en lugar de PNG debería ser una buena mejora.

Smush le verificará si su conversión en formato JPEG reducirá el tamaño del archivo y ayudará a acelerar su sitio de elementor.

La conversión automática de un PNG en un JPEG se realiza automáticamente si se produce un tamaño de archivo más pequeño. La conversión automática de archivos PNG no puede ser más fácil. Con activado Smush, verá que hay una nueva columna llamada Smush. Te mostrará qué imágenes están optimizadas. Si no lo son, puede hacer clic en Smush y optimizarlo con un solo clic.

Todo el aplastante que quieres está fuera de alcance. A veces, mostrarlos todos a la vez puede ejercer presión sobre el servidor. Con carga perezosa, deja de cargar imágenes fuera de la pantalla hasta que un usuario se desplaza hacia ellos. Esto hace que la página se cargue más rápido, use menos ancho de banda y arregle la recomendación “Post Offreen Images” a través de una prueba de Google PageSpeed. Puede elegir qué tipos de medios y refinar la carga perezosa en ciertas salidas de medios. Hay muchos que puede hacer con la carga perezosa, incluida la forma en que desea imágenes de precarga, opciones de animación y duración del tiempo antes de mostrar la imagen.
Puede leer más sobre la carga perezosa en este artículo. Aproveche el CDN de Smush cuando esté cerca del servidor que proporciona su contenido, se cargará más rápido. Esto hace un CDN (red de entrega de contenido). Es una serie de servidores ubicados en todo el mundo, por lo que cuando un navegador hace la demanda de HTTP, el contenido se sirve desde el servidor más cercano a su ubicación. Esta característica está disponible con Smush Pro y vale la pena usar. Está orgulloso de un CDN con 45 puntos. Además, puede cambiar el tamaño automáticamente de sus imágenes y también convertirlas en el formato WebP de Google.

Al hacer clic en “Inicio”, iniciará el CDN. Un CDN mejorará la velocidad de la página de cualquier sitio web de Elementor con imágenes pesadas almacenando y transmitiendo a los niños de todas sus imágenes JPG, PNG y GIF de los servidores Smush Edge. Para opciones avanzadas, Smush Pro CDN incluye imágenes de fondo, cambio de tamaño automático, conversión de WebP e imágenes de solicitudes de API REST. Obtenga información más detallada sobre CDN de Smush aquí. Ayuda a optimizar el rendimiento de su sitio ajustando finamente los controles con la compresión de archivos, reduciendo CSS y JS, comentarios perezosos y más. ¡Hummingbird está aquí para ayudarlo a acelerar su sitio de elementos! Es un complemento nominal gratuito de 4.5 estrellas, con más de 100,000 instalaciones activas en wp.org (¡y continuo!). Al escanear su elemento de sitio rápido, ella dará un solo clic que lo ayudará a acelerar su sitio. Analizaremos algunos fragmentos de detalles de todo lo que puede hacer para mejorar su sitio elemental y hacerlo volar. Echemos un vistazo a:
Evaluación de su sitio con una prueba de rendimiento

Proporcionar páginas y contenido más rápido con la memorización en caché
Compresión GZIP que reduce el tamaño del archivo para un servicio más rápido

Mejore la velocidad de su página con la optimización de activos

Evaluación de su sitio con una prueba de rendimiento desde el principio, Hummingbird le permite realizar una prueba de rendimiento para ver cómo es su sitio de elementor. Puede comenzar con un solo clic en la prueba Run. Está a un clic de distancia de un informe de rendimiento. Después de realizar la prueba, Hummingbird le mostrará las oportunidades, el diagnóstico y las auditorías pasadas. Además, puede ver los resultados de Desktop vs Mobile. Simplemente haga clic entre escritorio y móvil. Toda la información detallada se enumera a continuación. Comienza con oportunidades. Estas son sugerencias para mejorar la velocidad de carga de su página.
Como puede ver, las economías potenciales también están indicadas. El siguiente es el diagnóstico. Esto proporciona información adicional sobre cómo su página se adhiere a las mejores prácticas de desarrollo web.
Esta prueba pasó con gran. Y finalmente puedes ver todas tus auditorías pasadas. Incluye todo con un puntaje de 90 o más. Además, puede hacer clic en el menú desplegable para cada categoría para obtener más información.
Había muchos 100 en esta auditoría. La prueba de rendimiento es una excelente manera de evaluar su sitio elemental desde el principio, por lo que puede ver al instante donde se pueden hacer mejoras. Lea más sobre las pruebas de rendimiento en nuestro artículo sobre la optimización de los colibríes. Y lo que es excelente en Hummingbird es que ofrece muchos tipos de memoria en caché, que funciona muy bien cuando se usa Elementor con su tema de WordPress, gracias a varias opciones de página. Sus habilidades de almacenamiento en caché incluyen almacenamiento en caché de páginas, almacenamiento en caché del navegador, almacenamiento en caché grave y almacenamiento en caché RSS. Además, si su sitio está alojado a través de nosotros, la velocidad de su sitio se mejora y más con caché de objetos, caché de objetos redis y caché estático. Hummingbird mantenga a velocidad. Controlará todos los aspectos de su funcionalidad de almacenamiento de caché. Esto hace que Hummingbird sea perfecto para el elemento, dado que cada generador de páginas es diferente y contiene configuraciones que variarán. Puede ver todas las funciones y puede obtener una mirada más detallada al caché de Hummingbird en nuestra documentación. Más rápido comprimiendo los recursos basados ​​en texto de su sitio en archivos más pequeños y más compactos que llegan a los navegadores de sus usuarios más rápido.
Como puede ver, GZIP está activo para HTML, JavaScript y CSS.Si no nos aloja, puede cambiar la compresión GZIP para que coincida con el tipo de servidor (por ejemplo, Apache) y seguir las instrucciones para activarlo. El lugar donde puede automatizar o configurar fácilmente opciones avanzadas cuando se trata de optimizar su sitio.
Como puede ver, muestra que mis ahorros de compresión son del 9,7%. Puede usar la optimización de los activos de dos maneras: automáticamente: optimizar los activos y mejorar los tiempos de carga de la página basados ​​en las opciones automáticas de Hummingbird. Manual: Configure manualmente cada archivo para obtener la configuración exacta que necesita para su sitio de elementos. Cuando se activa la optimización de los activos, Hummingbird escanea instantáneamente los activos de su sitio de WordPress para indicar aquellos que podrían optimizarse para el rendimiento. Hay muchos cambios y ajustes que se pueden hacer con la optimización de los activos de colibrí. Asegúrese de leer nuestra documentación para ver qué tan bien puede hacer su sitio para obtener la máxima optimización. Ejemplos para mejorar dos toppress toppress-hello element y Astra-with smush, colibring y elementor ahora que miramos qué husmeo y colmes puede hacer para mejorar el rendimiento de su sitio. Echemos un vistazo más de cerca a ejemplos específicos que usan dos temas populares: Hello Elementor y Astra. Como se mencionó anteriormente, utilizaremos la versión gratuita de Elementor, por lo que no hay costos involucrados en esta configuración inicial (nuevamente, Smush y Hummingbird también son gratuitos). Este es un sitio nuevo, sin otras páginas, complementos o nada instalado al principio, excepto el elemento y el tema. Pasaremos por cómo se ve agregando todas estas características y la diferencia que hacen. Para romper todo, así es como lo haremos: Configurar un sitio de WordPress usando el contenido y el tema Elementer Page Builder

Ejecutar pruebas de velocidad con Google PageSpeed ​​Insights y gtmetrixactivati ​​colibrí y smush y configurar recomendaciones

Ejecutar otra prueba de velocidad

Habilitar funciones de alojamiento (por ejemplo, CGI Rapid)

Realizar una prueba de velocidad final

Tenga en cuenta que cada sitio será diferente. La ubicación, la cantidad de imágenes, su host y otros factores marcarán la diferencia. Sin embargo, esto debería darle una idea general de lo que se puede hacer y luego puede cambiarla en consecuencia en su sitio web de WordPress en función del elemento. Comienza con el tema Hello Elementor. Este tema gratuito es el favorito entre los usuarios de elementor y ha sido creado por Elementor, por lo que sabes que es bueno.

Hola, Elementor es un tema popular, apreciado por los usuarios Elementor. Creé un sitio usando este tema y activé la página de destino: la página del hotel en la biblioteca Elementor. Este tema presenta un puñado de imágenes y texto, siendo un buen ejemplo.


Puede activar esta página de destino directamente desde la biblioteca en el tablero de WordPress. También hice esta página mi página de inicio. Puede asegurarse de que esto se haga accediendo a la configuración de Configuración de Aspecto> Personalización> Seleccionando esta página de destino. Ahora que esto está instalado, ¡estamos listos para irnos! Hagamos una prueba de velocidad rápida en este sitio. Comenzaremos con Google PageSpeed ​​Insights. Cuando ingresa a la URL, aquí está nuestro puntaje de Google PageSpeed ​​Insights:
Como puede ver, está en el rango promedio. Ahora verifiquemos con GTMetrix. Notaré que uso la configuración predeterminada de GTMTRIX para la ubicación del servidor (Vancouver, Canadá) y el navegador (Chrome). Esto no cambiará en todos estos ejemplos. “E”? Sí. Sigamos y activemos Smush y Hummingbird y veamos lo que encontramos. Comenzaré a ejecutar una prueba de rendimiento de Hummingbird y verificar sus recomendaciones. Una vez que ha hecho esto, menciona que tenemos un puntaje de 56/100 y ofrece más oportunidades, como precargar las solicitudes clave, eliminar los recursos de bloqueo de renderizado, reducir el tiempo de respuesta del servidor inicial y eliminar CSS no utilizado. Sus diagnósticos también muestran que debemos asegurarnos de que el texto permanezca visible durante la fuente web. También muestra que había 15 auditorías pasadas (¡DAI!).
Hummingbird tiene algunas recomendaciones para nosotros. Seguiré adelante y administraré todas las sugerencias posibles. El menú desplegable Hummingbird menciona exactamente cómo cuidar las recomendaciones. Por ejemplo, aquí, Hummingbird muestra cómo eliminar el CSS no utilizado.
Cómo remediar está escrito para usted. También activé el caché de la página de colibrí para ayudar en el tiempo de respuesta inicial, optimicé mis activos y las tabletas combinadas y. Luego continuaré y activaré Smush. Inmediatamente, Smush enfatiza que tengo 61 imágenes y archivos adjuntos que necesitan un rubor, lo que puede ayudarme a ahorrar alrededor de 815.5 kb. Los destruiré a granel con un solo clic.
La destrucción a granel está a un clic de distancia. Después de unos momentos, aquí están los resultados:
¡Eso es genial! Como puede ver, hay ahorros totales de 872.5 kb/9.3%. Ahora, sigamos adelante y revisemos la velocidad de nuestra página nuevamente. En primer lugar, aquí está Google PageSpeed ​​Insights: 99 está bien en nuestros libros. Y aquí está Gtmetrix:
¡Muy bien aquí también! Incluso si estoy satisfecho con este puntaje y no puedo volverse mucho mejor que esto, haré las cosas más. Continuaré y activaré nuestro CDN en la sección de optimización activa del colibrí. Ya sea que aloje con nosotros u otra compañía, puede activar esta opción para una optimización adicional. Un solo clic para iniciar el CDN. Para obtener más información sobre los CDN y por qué es beneficioso para la velocidad del sitio, asegúrese de ver este artículo. Además, para asegurarme de tener la mejor velocidad posible, me pondré en herramientas en el Hub y activaré el servidor de caché estático para usar FastCGI.
Cambiaremos esto en “On” y estaremos en el negocio. Y ahora, con todos estos cambios en su lugar, mi sitio elemental que usa el tema ¡Hello Elementor está optimizado para la velocidad! Echemos un vistazo ahora a la optimización del tema popular Astra con Elementor, Hummingbird y Smush. Astra Astra es otro tema extremadamente popular que funciona bien con Elementor. Con más de 1 millón de descargas activas y una revisión sólida de 5 estras en wp.org, sabe que es una buena opción para muchos usuarios de elementos.

Astra es extremadamente popular, especialmente con Elementor. Al igual que con Hello Elementor, creamos un sitio usando este tema y activamos la página de destino: la página del hotel en la biblioteca Elementor. Además, como con los anteriores, hice desde la página del hotel en mi página de inicio. Sigamos y realicemos una prueba de velocidad de información de Google PageSpeed ​​y veamos cómo lo hacemos. Es una puntuación débil, de hecho. Veamos cómo tratamos con GTMetrix.

Esta es mejor. Inmediatamente, después de ejecutarlo varias veces, inmediatamente recibió un “A” con un puntaje de rendimiento del 97% y un puntaje de estructura del 95%. ¡Muy buen puntaje! Sin embargo, como se mencionó anteriormente, esto variará según la cantidad de imágenes, ubicación, host y otros factores que tenga. Además, si no lo sabía, hay razones para tales puntajes drásticos entre Google y Gtmetrix, debido a la forma en que prueban ambos. Para obtener más información sobre cómo varían cuando se trata de sitios de prueba, consulte este artículo en el sitio web de GTMTRIX. Ahora, veamos si podemos mejorar la puntuación en Google y aumentar GTMTrix a A+ activando Hummingbird y Smush. Comenzaremos con Hummingbird y realizaremos una prueba de rendimiento.

Hummingbird tiene este sitio web con 80/100 como puntaje de rendimiento. Como puede ver, hay dos oportunidades de mejora y 17 auditorías pasadas. Para mejorar, Hummingbird recomienda eliminar la representación y los recursos de eliminación de CSS no utilizados.

Puede ver los posibles ahorros con cada recomendación. Haremos las recomendaciones de Hummingbird y pasaremos a Smush. Con Smush, inmediatamente, nos dice que hay 15 artículos para hacer un bulto a granel, por lo que iremos más allá y lo haremos. Una vez que termine el bisurro a granel, ejecutaremos otra prueba de Google PageSpeed ​​(ya que esta es la que va tan estúpida) y veremos cómo nos vemos.

La prueba más nueva todavía no es tan buena. Debido a que no ha crecido tanto, intentemos algunos ajustes más. Smush recomienda cosas que puedan ayudarlo a mejorar su puntaje. En este ejemplo, incluyen:

Activación de súper smush para compresión avanzada con pérdidas

Asegurar que las imágenes tengan el tamaño de los derechos para nuestro tema (Astra)

La activación de las imágenes cambia el tamaño a tamaño completo para reducir las imágenes grandes a un tamaño razonable

Aquí están las recomendaciones para Smush. Ahora que hemos hecho las recomendaciones de Smush, revisemos nuevamente.

¡Un puntaje más alto! ¡Oh mi! Como puede ver, ha crecido un poco. Ni siquiera estamos a 90-100; Sin embargo, con algunos ajustes, como iniciar el colibrí y también fastcgi, deberíamos poder alcanzar ese punto más alto. Antes de eso, veamos cómo notamos con GTMetrix.

Todavía tengo un hermoso “A”. Como puede ver, esto no ha cambiado mucho. Ya fue un buen puntaje para el principio y aparecerán fluctuaciones menores. Esencialmente es lo mismo (que está bien). Finalmente, pongamos esto a alta velocidad. Cuando iniciamos CDN y FastCGI (vea un ejemplo de cómo hacer esto en el ejemplo de Elemento Hello), nuestra puntuación ha mejorado instantáneamente con Google. Un 90 no está demasiado aturdido. Probablemente podamos hacer algunos ajustes finos en Hummingbird para eventualmente obtener esa puntuación más alta; Sin embargo, está en un lugar bastante bueno. Con todas las herramientas que tenemos disponibles, debe seguir siendo así, y no disminuir. Base que puede seguir. Las cosas para recordar incluyen:

Elegir un host optimizado para el rendimiento como el nuestro aquí en WPMU Dev. Incluso ofrecemos plantillas que se ajustan perfectamente al elemento para la optimización total (por ejemplo, nuestra plantilla de caridad).

Usando un tema fácil.

Asegúrese de que las imágenes estén optimizadas con la ayuda de Smush.

Para deshacerse de los complementos lentos, anticuados o no utilizados.

Minimizar el código y la concatenación de archivos

Uso de la caché de la página para generar versiones HTML estáticas de su contenido con Hummingbird.

Considere estos consejos para garantizar que su elemento de WordPress esté optimizado para todo su potencial. Para estar en una forma excelente cuando se trata de rendimiento, optimización, alojamiento y todas sus capacidades.Y como puede ver, es fácil de hacer con la ayuda de Hummingbird y Smush.Cada sitio tendrá cambios y ajustes individuales que se realizarán, pero es solo una cuestión de ajuste fino a la perfección.Agregue un buen alojamiento y podrá tener un sitio primario increíble. ¿Utiliza Elementor?Y si es así, ¿trataste de optimizarlo con Smush y Hummingbird?¡Dinos en los comentarios!