Estudio de caso: Divi con WP Smush y Hummingbird

Todos quieren un sitio web más rápido. Con Google utilizando la velocidad de carga como uno de los valores principales para clasificar en los resultados de búsqueda, cuanto más rápido sea su sitio web, mejor. También proporciona una mejor experiencia de usuario. Sin embargo, garantizar que su sitio se esté ejecutando tan rápido puede ser mucho trabajo. Gracias a WPMU Dev, aumentar la velocidad de su sitio web puede requerir menos esfuerzo y tiempo de lo que piensa debido a sus complementos de optimización de rendimiento de Smush y Hummingbird. En este artículo le mostraremos lo que sucedió cuando tomamos un sitio web de cartera Divi on Shade y agregamos los poderes de optimización de estos complementos.
Nociones introductorias sobre WPMU Dev lo primero que debe saber es que estos complementos son parte de una suite premium ofrecida por WPMU Dev. Cualquiera que sea miembro tiene acceso a ellos. Estas son las versiones que utilicé para este estudio de caso. También puede descargar versiones gratuitas que no tienen acceso a funciones premium desde el almacén de complementos WordPress.org. La versión gratuita de Smush está aquí, y Hummingbird está aquí. Para acceder a la página de membresía, debe explorar el centro de los miembros de WPMU Dev. Si no es miembro, puede registrarse para un período de prueba gratuito de 7 días en cualquier momento para darles una imagen a estos complementos (y otras ventajas) para ver cómo pueden ayudar a su propio sitio.

Al hacer clic en el botón Agregar un sitio web, solo ingrese la URL de su sitio y conéctela por nombre de usuario / contraseña de WordPress. Después de haber hecho esto, su sitio está en el WPMU Dev Hub. El complemento WPMU Dev Hub se ha instalado y ahora se ha activado en su sitio web. Puede manejar cada uno de los complementos premium en esta página. Para instalar y activar WP Smush y Hummingbird, simplemente presione Agregar complementos. En este momento, puede elegirlos de la lista de todos los complementos de desarrollo WPMU Pro.

Los complementos ahora aparecerán en el panel de depósito WPMU.

Para cambiar la configuración, puede encontrarlos en la barra lateral (justo encima del DIV) o haga clic en los iconos de clave que se tomarán allí de inmediato. WP Smush y Hummingbird Pro Con div para esta prueba, creamos un nuevo sitio web, que solo ejecuta el tema Div. Con respecto al alojamiento, el sitio fue creado en el sitio de SiteGround Growbig. La página de comparación enumera las estadísticas del servidor de la siguiente manera:

Procesos simultáneos del servidor: 20
Conexiones simultáneas de la IP única: 15
Segunda CPU / Ejecuciones de programas y escrituras: 2000 / hora, 20000 / día, 600000 / mes
El proceso promedio de procesar el proceso por día: 2 segundos
Uso de Servicio Permanente de CPU: no más del 20% por un período superior a 10 segundos
Servidor de memoria por proceso: 768 MB
Ahorros: 300,000
Trabajos mínimos de trabajos de Chron: 30 minutos
Consultas en la base de datos: no más del 10% de los recursos del servidor
También utilizamos una página de cartera con imágenes pesadas de un diseño div. Cargué el aspecto de la cartera de maquilladores, que importaba las imágenes y el contenido para el paquete de diseño antes de instalar y activar WP Smush Pro o Hummingbird Pro. Antes de WP Smush y Hummingbird cargué el sitio, instalé los complementos a través del cubo WPMU. Dev e importó el paquete de diseño de Divi Builder. Las pruebas de rendimiento iniciales se ven así. Instrumentos de pingdom
Gtmetrix

Con estos resultados, ciertamente podemos ver que necesitamos la compresión de las imágenes, la reducción del código, el CDN y las capacidades de caché del WP Smush y Hummingbird Pro. Así que veamos qué sucede cuando los configuramos. Configuración de Hummingbird Pro cuando se encuentre por primera vez en la configuración de Hummingbird, puede optar por una configuración rápida. Le sugerimos que comience este proceso haciendo clic en la prueba de rendimiento de la regla de ejecución. Incluso si tiene las pruebas anteriores si las ejecuta solo, se personaliza para el sitio y el complemento y puede brindarle orientación sobre qué configurar.

No debe durar el complemento durante más de un minuto o dos para ejecutar la prueba (si corresponde) y lo redirigirá a su tablero de colibrí. Aquí está su informe de rendimiento.

Se trata de la misma información que las otras pruebas nos han proporcionado, por lo que sabemos que las cosas son consistentes. Podemos pasar cómodamente a través de las diferentes configuraciones para cada complemento y rectificar tantos de ellos.

Ningún sitio web debe estar sin un complemento de caché. Y Hummingbird Pro es excelente. (No es todo lo que hace, lo que también es maravilloso. Quieres memorizar en caché. Lo único que queremos ajustar aquí es la activación de la precarga de caché, porque mantendrá todo en caché antes del tiempo y no esperará a que un visitante acceda a su sitio.

Luego haga clic en la optimización de los activos en la barra lateral. En la página siguiente, presione el botón de activación para iniciar. También es posible recibir ocasionalmente una notificación en la parte superior de la pantalla, como la siguiente. Si esto sucede, le sugerimos que vacíe su caché con el botón, porque precarga y debe solucionar los problemas causados ​​por otros ajustes.

Una vez presionado, tomará una decisión muy importante: ¿desea utilizar WMPU CDN para sus medios? Le sugerimos que lo use. Sin embargo, si usa CloudFlare u otro CDN (o incluso la imagen CDN JetPack), es mejor tener solo uno activo a la vez.
Al elegir el uso de CDN, Hummingbird Pro buscará en su sitio cualquier activo que pueda moverse a los servidores de desarrollo WPMU. Este es un nuevo sitio de prueba, por lo que solo hay 18. Probablemente será mucho más grande que este ejemplo.

Luego verá qué activos están disponibles para la compresión y cuáles se comprimen automáticamente. Elegimos comprimir todos los archivos que podrían comprimirse.

Luego haga clic en Herramientas avanzadas y active la eliminación de cadenas de consulta de mis activos y elimine los archivos predeterminados de iMoji JS y CSS. Agregan muchas solicitudes adicionales para su página para algo que probablemente no use. Sin embargo, puede activar el monitoreo del tiempo de operación, que recomendamos.

Haga clic en tiempo de tiempo y luego presione el botón de activación. Esto no afecta el rendimiento en absoluto. Sin embargo, es tan importante saber cuándo algo está mal con su sitio.

Configuración de WP Smush Pro por primera vez que haga clic en el elemento Smush Pro en el menú del Dashboard WP, ​​verá un modo. Smush Pro es un complemento de optimización y compresión de imágenes. Como tal, es bastante simple hacer cosas para trabajar. Por lo tanto, creemos que es mejor presionar comenzar la configuración y poner la pelota en el rodamiento lo antes posible.

Primero, desea activar la optimización automática de nuevas cargas. Esta opción significa que no tiene que comprimir (o bloquear) las imágenes. El complemento lo hace automáticamente.

Después de eso, probablemente desee trabajar, habilite una mejor compresión con pérdida de paso múltiple. No todos los sitios querrán una compresión de pérdidas para sus imágenes, pero para los sitios superiores, esta opción es buena.


El siguiente es asegurarse de eliminar los datos de exif de sus imágenes prácticas, esta es la información que dice de dónde proviene la imagen y cuándo. No son datos de SEO. Entonces no lo necesitas. Inicie decodifique mi imagen y haga clic en Siguiente.
Finalmente, necesitamos tomar una decisión sobre sus imágenes grandes. ¿Quieres tabletas o solo variantes de tamaño? Decimos que sí. Por lo tanto, active comprimir mis imágenes de tamaño completo y prepárese para romper algunas imágenes. Ahora, esta configuración era solo eso: configuración. De hecho, no comprimiste nada. Aún no se ha destrozado ninguna imagen. Vea en la siguiente pantalla cuántos archivos multimedia puede destruir y cuántos ahorros al tamaño del archivo tendrá.

Cuando presionas ahora a granel Smush, el complemento funciona. Debe mantener la ventana abierta durante este proceso, por lo que si tiene una gran cantidad de imágenes de tabletas, este es el momento de ir a hacer un sándwich o una taza de café. O ambos. Cuando regrese, verá (con suerte) un mensaje que le indique que todo ha sido destrozado y una cantidad total de ahorros.

Para nosotros, uno de nuestros sitios de cartera de cartera de una sola página, ahorramos el 23% de los datos con 2.9 MB. Es mucho para una sola página. Si continúa ejecutándose, verá todas las opciones y configuraciones que ha configurado en el experto en configuración. Sin embargo, hay una opción que queremos resaltar, que desea mantener generalmente desactivado.

Probablemente no quiera dejar que WP Smush Pro cambie mis imágenes a tamaño completo. Esto es diferente de la compresión que activé anteriormente. Esto regula la resolución de imagen. Como puede ver en la imagen de arriba, WordPress, comenzando con la versión 5.3, lo hace automáticamente. Si necesita imágenes más altas que los valores predeterminados (pero más pequeños que las que carga), active esto. Si no, manténgalo cancelado. Lo mismo es cierto para la conversión automática de PNG en JPEG (Lossy). Aunque probablemente ahorrará un poco de espacio con esto, la oportunidad de romper imágenes en un sitio existente es increíblemente alta. Active esto solo si no le preocupa las imágenes claras o la modificación de la URL. Otras opciones de carga Lazy Smush Pro se sorprenden por WP Smush Pro. Le recomendamos que continúe. Nuevamente, si usa la carga perezosa de otra fuente, solo desea usar 1. así que elija dónde desea venir y apagar a los demás.

WPMU Dev CDN también es una característica importante de WP Smush Pro. Por defecto, está inactivo. Esto se separa del almacenamiento de CDN de Hummingbird, por lo que también querrá activar esto. Cuando haga esto, navegue por el panel de Smush Pro y luego elija CDN en el menú de la pantalla izquierda (o el menú desplegable si está en una ventana más pequeña).

Recibirá una página de opción desactivada y una advertencia que muestra que CDN aún no está activo. Configure su configuración a continuación y haga clic en. Hemos activado todas las opciones, porque queremos que se transmitan las imágenes de fondo, queremos que todas las imágenes que hemos tenido de gran tamaño se reduzcan a la coincidencia adecuada para su contenedor, pasar por el resto pueden más fácilmente cosas y, lo más importante, activar. La conversión de WebP puede incluso hacer que las imágenes trituradas sean mucho más pequeñas. (Lea aquí sobre el formato WebP si no está familiarizado con él). Después de hacer clic en Guardar y activar en la parte inferior de la pantalla, se le dará un mensaje de que el CDN se ha activado o se activará en 30 minutos. Los tenía a los dos. Y luego … nada. ¡Han completado! Bueno, en términos de configuración inicial. Ha logrado configurar Hummingbird Pro y WP Smush Pro para que su sitio esté tan optimizado. Sin embargo, veamos cuán optimizados estamos, fuera de la puerta. Después de WP Smush y Hummingbird con estos cambios realizados, volvimos a Pingdom Tools y Gtmetrix. Instrumentos de pingdom

Con Pingdom, vi aumentos significativos al instalar y activar estos complementos. Disminuí el tiempo de carga inicialmente a menos de 1 segundo a 935 milisegundos, y el tamaño total de la página se redujo en casi 1/3 a un poco por debajo de 1 MB. Gtmetrix Usando gtmetrix, vi resultados similares al pingdom.