Optimización de Astra con Hummingbird y Smush: ¡de impresionante a fuera de este mundo!

Astra es un tema fácil creado para la velocidad. Sin embargo, tomé el puntaje de Google PageSpeed ​​Insights de una impresionante 96 a una estrella de 99. Le mostraremos cómo hacerlo aumentando el rendimiento Astra y más con nuestros complementos de optimización gratuitos, Smush y Hummingbird. Astra Theme es uno de los temas de WordPress más populares de todos los tiempos, utilizados por más de 1.6 millones de sitios web. Fue creado como una base fácil para cualquier tipo de sitio de WordPress. Por lo general, está por debajo de 50 kb en el tamaño del archivo y no tiene adicciones de jQuey, lo que lo hace interferir con el tiempo de carga de la página.
¡Es increíble! Pero hay más que puede hacer para que su sitio Astra esté cerca de la optimización perfecta. En este artículo, echaremos un vistazo a … cómo lo haremos con un poco de optimización Astra y con la ayuda de nuestros complementos, Smush y Hummingbird. Además, un toque de buen alojamiento. Y si no lo sabía, Smush es nuestro complemento de optimización de imágenes de 5 estras. Tiene más de un millón de instalaciones activas y puede optimizar las imágenes, cargar perezoso, cambiar el tamaño, el mantequilla a granel y puede comprimir todas las imágenes a mayor velocidad.

Smush es nuestra respuesta a la optimización de imágenes de WordPress. Cuando se trata de velocidad, nuestro propio colibrí, clasificado con 5 estrellas, tiene un rango para hacer que su sitio sea súper rápido, con mejoras de archivos ajustables, descuento para CSS y JS, carga perezosa, caché y más comentarios. Tiene más de 100,000 instalaciones activas y continúa aumentando en popularidad diariamente.

Hummingbird está aquí para ayudarlo a hacer su sitio. ¡Por supuesto, debemos mencionar que tanto Smush como Hummingbird son gratuitos! Crearemos un sitio web Astra usando Astra Pro y luego lo optimizaremos al máximo potencial. También hay una versión gratuita de Astra, pero decidimos ser profesionales, porque pensamos que esta es la versión que la mayoría de los desarrolladores web profesionales usarán. Cubriremos: presentación general Astra y aspecto de prueba
Configuración de la prueba de optimización
Una prueba de velocidad sin optimización
Optimización con Astra y Smush
Optimización con Astra y Hummingbird
Mejora adicional en Hummingbird y su anfitrión
Otros consejos de optimización
Para seguir, necesitará Astra Pro, Smush y Hummingbird. Si no está familiarizado con Astra y desea probarlo primero, puede usar la versión gratuita. Sin embargo, los resultados pueden ser significativos en vista de las ventajas de rendimiento, como la generación de archivos CSS.
Haga clic aquí para obtener una guía de comparación de lo que incluye gratis vs. Pro. Al final de este artículo, ¡tendrá su sitio web Astra completamente optimizado para el rendimiento! Como se mencionó anteriormente, se usa en más de 1.6 millones de sitios web y no más. En cuanto a Astra, es un WordPress increíblemente personalizable que ofrece muchas funciones. Por ejemplo, hay más de 150 plantillas de diseño de sitios web prefabricados, lo que hace que sea más fácil para los no desarrolladores. Además, todo se puede ajustar (por ejemplo, colores, estilo, etc.).
Además, viene con muchos complementos gratuitos para su uso, ¡incluyendo fuentes personalizadas, Astra Bulk Edit, Astra Hooks y más! Cuando se trata de velocidad, según los desarrolladores, siendo tan fáciles, los sitios Astra deben cargarse en menos de medio segundo cuando se usan datos predeterminados de WordPress. Pruebe el diseño con todos los sitios web prefabricados que Astra ofrece, es difícil elegir lo mejor para esto artículo. Después de todo, no podemos probarlos todos en esta publicación (tomaría algún tiempo). Astra trabaja con creadores de páginas preferidos, incluido Elementator, Div (requiere el complemento Divi Builder), Beaver Builder … incluso Gutenberg.vem va con la plantilla de montaña para este artículo. Tiene una excelente combinación de imágenes y texto, por lo que me parece un ganador. Puede encontrar la plantilla de montaña desde el tablero bajo las plantillas de inicio y Gutenberg en el menú de caída. También hay una barra de búsqueda para encontrarla.
La plantilla de montaña parece una gran opción. Ahora tenemos una buena vista para trabajar 🙂
Las montañas crean un ambiente de trabajo agradable. Debido a que tenemos nuestra plantilla para nuestro sitio web, pasemos a … Configuración de la prueba de optimización Esta prueba comienza con un lienzo de WordPress prácticamente vacío para trabajar.

El sitio web no tiene complementos instalados, excepto WPMU Dev Dashboard, Astra Pro y plantillas de inicio. Las plantillas de inicio son de la fuerza de la lluvia de ideas y se pueden activar directamente desde el tablero de WordPress Astra, para que tenga acceso a la plantilla de montaña que usamos. Otros parámetros para esta prueba incluyen:

Organizado en el plano de bronce de WPMU de.
Mi región es EE. UU./Oeste.
Versiones gratuitas de Smush and Hummingbird. Tenga en cuenta que, con WPMU Dev Hosting, instalará versiones Pro. Para este ejemplo, he deshabilitado las funciones Pro. Utilizo la versión WordPress 5.7.2.
La versión PHP es 8.0
El almacenamiento en caché de la página, el CGI rápido (almacenamiento en caché del servidor estático) y CDN están deshabilitados para iniciar. Además, la optimización de los colibríes utiliza varios tipos de funciones de almacenamiento de caché y compresión en sitios de WordPress, de modo que el almacenamiento de la página, Guary y RSS se hayan desactivado.
Navegador Chrome (escritorio).
En cuanto a cómo se realiza esta prueba, es un proceso de paso por paso que se ve así:
Instale Astra Pro y complementos que acompañan, como se mencionó anteriormente, en un sitio WP limpio.
Optimiza Astra.
Ejecute una prueba de velocidad.
Habilite las recomendaciones de Smush y Configure.
Ejecute otra prueba de velocidad.
Habilite Hummingbird y configure recomendaciones.
Ejecute otra prueba de velocidad.
Active las funciones de alojamiento.
Realice una prueba de velocidad final.
Para las pruebas de velocidad, usaré Google PageSpeed ​​Insights. Cuando los resultados de las pruebas son los mismos durante la prueba (que es el caso en este artículo) después de varios rodamientos, incluiré una captura de pantalla. Tenga en cuenta que cada sitio será un poco diferente. No se puede enfatizar lo suficiente que sus regiones geográficas, el tamaño de su biblioteca de medios, su host y otros factores determinarán diferentes resultados.
También mencionamos esto antes en algunos de nuestros artículos anteriores sobre optimización de rendimiento, verifíquelos si aún no lo ha hecho:
Cómo acelerar y optimizar a Avada gratis usando nuestros complementos Smush and Hummingbird
Cómo optimizar la división gratuita utilizando nuestros complementos Smush y Hummingbirdcum para optimizar el elemento libre usando nuestros complementos Smush y Hummingbird
Pero, independientemente de su configuración de WordPress, aún obtiene resultados con la optimización del sitio utilizando este proceso. Dicho esto, comencemos! Una prueba de velocidad sin optimización cuando se trata de optimizar su sitio de WordPress, siempre es aconsejable comenzar con su tema.
¡Mientras tocé en este artículo, Astra viene bastante bien optimizado inmediatamente de la caja! Una de sus principales prioridades es la velocidad y mejorar constantemente. Realmente no puedes ajustar o cambiar lo contrario. La única recomendación que tiene Astra Pro es activar la generación de archivos CSS. Cuando se active, CSS In Line ya no aparecerá en el código fuente y se agregará como un archivo separado. La generación de archivos CSS hará que el almacenamiento de su navegador sea más rápido y mejorará su tiempo de respuesta y velocidad de carga. Simplemente haga clic en Activación de generación de archivos.
¡Se necesita solo un clic! ¡Eso es todo! Una vez que tenemos esto activado, estamos preparados para nuestra primera prueba de velocidad. En primer lugar, la puntuación de escritorio …
¡Eso es genial! 96 es una muy buena puntuación. Y ahora para el móvil …
88 no es horrible, pero podemos hacerlo mejor. Como puede ver, ¡estos son puntajes notables! Sin embargo, hay poco espacio de mejora y se puede hacer más para acercarse a esa puntuación perfecta y mantener nuestro sitio Astra a largo plazo. Optimización con Astra y Smush porque ya he hablado sobre lo que Smush puede hacer en términos de optimización de imágenes, no me jactaré. Entonces, por otro lado, verá cómo puede ayudar a mejorar este puntaje de velocidad más cerca de la perfección. ¡Smush está listo para abordar un buen puntaje de velocidad y hacerlo aún mejor! La primera parte del proceso es la instalación y activación del complemento. Inmediatamente, Smush anuncia cuántas fotos están listas para ser aplastadas. Esto se puede gestionar con un solo clic con un triturador a granel. Simplemente toque el flujo a granel ahora. En este caso, 21 accesorios deben ser triturados. Solo toma unos momentos y luego dibujará los resultados.
Guardé 10 MB con su ayuda. Puede ver que Smush tiene una economía total de 10.0 MB/33.3% y 821 imágenes batidas (muchas de ellas de la activación inicial).

A medida que agrega más fotos a su sitio web de Astra, mantendrá sus poderes súper aplastantes para que continúen los ahorros. Además, Smush tiene un asistente de configuración que incluye compresión automática, metadato exif, imágenes de tamaño completo, carga perezosa y datos de uso. Pase y deje la configuración predeterminada activada. Por supuesto, siempre puede ajustar o deshabilitar cualquier configuración si lo desea. Ejecutemos otra prueba para Google PageSpeed ​​Insights para escritorio …

¡Oh mi! A 99. y móvil …

¡Y esto ha estado molestando bastante! Los puntajes subieron aún más con Smush. Google PageSpeed ​​Insights pasaron de 96 a 99 en escritorio y 88 a 94 para dispositivos móviles. Quiero decir, podríamos parar aquí y estar perfectamente contentos con estos puntajes. ¡No mejora mucho! Sin embargo, sigamos moviéndonos. Puedes hacer más con … Optimización con Astra y Hummingbird No podemos hablar de optimización sin nuestras propias chozas. Es increíblemente bien, para optimizar la compresión de texto, precargar las solicitudes de clave, almacenar en caché y muchos más. El siguiente paso del proceso es la instalación de Hummingbird y su determinación de trabajar en una optimización aún mayor. Hummingbird está aquí para llevar la optimización a un nivel completamente nuevo. Para comenzar, una vez instalado, le preguntará sobre la ejecución de una prueba de rendimiento. Haga esto haciendo clic, adivinó, ejecuta la prueba de rendimiento. Realizar una prueba es rápido y fácil. Al igual que Google PageSpeed ​​Insights, Hummingbird calcula una puntuación de rendimiento después de una prueba. En nuestra primera prueba, obtuvimos un puntaje 97/100 para escritorio y 93/100 para dispositivos móviles, con dos oportunidades para verificar si hay mejoras. ¡Nada mal!

Un vistazo a nuestro puntaje de escritorio. Las oportunidades de mejora consisten en:

Reducir el tiempo de respuesta inicial del servidor

Eliminar los recursos que bloquean la representación

Resolver oportunidades es solo cuestión de hacer clic en cualquier fila de alerta. A partir de ahí, mostrará una descripción detallada del problema, una lista de activos específicos involucrados e instrucciones paso a paso sobre cómo resolver el problema. Después de abordar los problemas y conocer algunas oportunidades para mejorar, continuaremos y ejecutaremos la prueba de optimización de activos de colibrí. Haremos esto con el almacenamiento en caché de la página y la discapacitado por CDN. La prueba de optimización de activos se realiza desde la optimización de activos y haciendo clic en archivos. Una vez listo, tiene una lista compilada de archivos CSS y JavaScript que se pueden optimizar.

Aquí hay un vistazo a los archivos CSS. Pueden revisar el uno al otro o configurar automáticamente y asegurarse de que el control deslizante rápido esté activado.

La configuración automática de los activos se comprimirá y se organizará para usted. Si la función automática se activa, el colibrí puede detectar automáticamente archivos de complementos y temas recientemente agregados y los optimiza para usted, no eliminará ningún archivo anterior de un complemento o un tema que se ha sido eliminado. Esto evita conflictos y problemas. Ahora que hemos probado nuestro sitio con Hummingbird, hagamos algunas pruebas nuevas. En primer lugar, lo comprobaremos con Google PageSpeed ​​Insights. Aquí está el puntaje para el escritorio …

No puedes mejorar, ¿verdad? Y aquí está el puntaje móvil PSI …
¡Esta es también una puntuación increíble! ¡Estos puntajes son excelentes! Estaría feliz de irme lo suficientemente bien solo; Sin embargo, hay … Mejora adicional en Hummingbird y su anfitrión Sí, escuchaste bien. Todavía tenemos un poco más, lo que se puede hacer para optimizar su sitio Astra. Una cosa es comenzar el CDN en Hummingbird. Desde el área de optimización de activos, solo debe activar el control deslizante CDN. Ya sea que nos aloje u otro proveedor, esta característica está disponible para usted. Es un salto rápido en el centro para que Fastcgi suceda. Si aloja con nosotros desde el Hub, puede activar FASTCGI trabajando en caché del servidor estático. Vaya a su sitio web, alojamiento y luego herramientas. Simplemente haga clic y estará listo! Haga clic en esto en el centro. Ahora que hemos activado estas funciones de optimización, ejecutemos algunas pruebas finales …
El escritorio se ve casi perfecto.
Además, ¡el móvil se ve bien! También verificaremos lo que Hummingbird tiene que decir.

Un 99? ¡Me lo llevo! Como puede ver, aunque Astra comienza con una excelente puntuación, puede mejorarlo mejor con algunos cambios. Además, todas estas opciones de optimización son a largo plazo, por lo que a medida que aumenta su sitio, su optimización sigue siendo la misma que un pequeño TLC y monitoreo. Este sitio comenzó con una puntuación de 96 PagesPeedS Insights de Google para escritorio y 88 para dispositivos móviles. Logramos obtener puntajes hasta 99 para escritorio y 95 para dispositivos móviles. Podemos concluir que las mejoras más significativas fueron las móviles, donde el escritorio ha mejorado un poco, pero no mucho teniendo en cuenta cuán optimizado estaba. Cada sitio será un poco diferente. Sin embargo, el seguimiento de esta ruta de optimización ayudará a su sitio web Astra y debe ver mejoras., A medida que desarrolla su sitio web Astra, aquí hay algunas otras cosas a considerar para mantenerlo optimizado: eliminar complementos y temas no utilizados o obsoletos

Remedio la corbatas rotas

Tener un gran anfitrión

Mantenga las imágenes optimizadas

Mantenga la memoria de caché activada

Actualice su WordPress, tema y complementos según sea necesario

Monitoree el rendimiento de su sitio utilizando la administración del sitio de WordPress, como el Hub

Para obtener más consejos de optimización, asegúrese de leer la guía final de Mega para la aceleración de WordPress. Astra La Vista, mala optimización

Astra es un hermoso tema fácil para optimizar su sitio y obviamente no necesita mucho.Las mejoras menores que hemos cubierto pueden aumentar la velocidad de su sitio a su máximo potencial y pueden mantenerlo.Además, no tiene que gastar mucho tiempo o dinero para hacer una buena optimización de Astra.Smush y Hummingbird son accesibles para usted y hay muchas opciones económicas (por ejemplo, WPMU Hosting – Wink, Wink) que pueden hacer su trabajo cuando se trata de alojar.Si no tiene Astra, asegúrese de elegir la versión gratuita o profesional e intente.En combinación con nuestros complementos y un buen alojamiento, y dirá “Astra La Vista” mala optimización! ¿Usas Astra?¿Has probado estos consejos de optimización?¡Dinos en los comentarios!