Tabla de contenido
JetPack Boost es un nuevo plugin de Automattic usado para optimizar la carga tu sitio; es independiente del JetPack que conoces, y por supuesto viene justo en el momento en que el desempeño de los sitios con WordPress está en el ojo del huracán. JetPack Boost es una colección de herramientas que se hacen disponibles al usuario a través de una interfaz bastante mínima, y que pretende ayudar a tu sitio a mejorar su puntuación con las nuevas métricas las Core Web Vitals, de las que ya he hablado con anterioridad. Independientemente de lo que aquí concluyamos, hay que recordar que JetPack Boost es un producto que está en pañales, apenas va comenzando y los autores han dicho que piensan mejorar sus prestaciones en un futuro cercano. Así que vamos a ver, ¿qué tal funciona JetPack Boost?
Mi banco de pruebas
En mi caso probaré JetPack Boost con un sitio en línea usando WordPress 5.7.1, con el tema GeneratePress Premium (del que siempre hablo y me parece el mejor que hay tanto en prestaciones como en velocidad), todo montado en el excelente hosting HawkHost. No hay caché de ningún tipo, y otros plugins instalados son iThemes y Limit Login Attempts Reloaded. En otros momentos estará instalado WooCommerce y Elementor, ambos en sus últimas versiones disponibles al momento de escribir esto. El contenido se generará con FakerPress (25 entraditas con todo), y sólo se mantendrá activo para generar tal contenido falso y se desactivará para las pruebas.
Probaré con contenido en tres formas: GeneratePress Premium, Elementor y WooCommerce, estos dos últimos siendo los más problemáticos a la hora de optimizar un sitio.
Instalación de JetPack Boost
Vamos a instalar JetPack Boost primero que nada; vamos a Plugins > Añadir nuevo y en la caja de búsqueda introducimos el nombre del plugin, lo que nos producirá los resultados más o menos así:
Ahora presiona el botón que dice “Instalar ahora”, espera un momento y ese mismo botón debe cambiar a “Activar”, presiona el botón de nuevo. Con esto ya tendremos instalado y activado JetPack Boost.
¿Cómo configurar JetPack Boost?
Una vez que esté instalado y activado JetPack Boost, encontrarás un nuevo menú (ugh) con el mismo nombre. No tiene opciones; si le das clic irás directo a un splash que te recibe con una bienvenida y un botón de “Get started”:
Al hacer clic en este botón, te pedirá conectar con un perfil de wordpress.com:
Una vez que lo hayas hecho, por fin llegamos a la pantalla donde está la carnita de JetPack Boost; encontrarás un par de medidores (para móviles y escritorio), y tres switches. Vale la pena que en mi experiencia los medidores no funcionan del todo bien; a veces funcionan, la mayor parte del tiempo marcan un time-out, es decir, se sobrepasa el tiempo de espera en lo que debiera regresar una respuesta del servicio consultado para medición, el cual supongo es la API de Lighthouse de Google.
Regresando a los switches, cada uno de ellos controla una cosa, a saber:
- Optimize CSS loading: como su nombre lo dice, permite optimizar la carga de CSS calculando el CSS crítico, es decir, el CSS necesario para cargar lo visible por encima del doblez (del término “above the fold”, el cual expliqué en el artículo sobre carga diferida de imágenes), y todo lo que no sea necesario cargarlo después.
Cuando habilites esta opción, verás que aparece una barra de progreso e inicia el cálculo de cual es el CSS crítico, y al terminar genera varios archivos que se usarán para cargar el sitio más rápido:
- Defer non-essential JavaScript: permite aplicar el atributo
defera código JavaScript que no sea esencial para la carga del sitio, aligerando la carga del mismo con esto. El atributodeferindica al navegador que se cargue de forma asíncrona un script, y se procesan hasta que se termine de procesar el HTML, con esto evitando el bloqueo del renderizado. - Lazy Image Loading: este seguro ya lo conoces pues ya he hablado de el anteriormente; consiste en cargar sólo lo que se ve en el área visible del monitor; lo que aún no se vea se carga bajo demanda, cuando la parte de abajo del monitor (el “doblez”) se acerca.
Como puedes ver, las opciones son pocas y tratan de ser tan simples como sea posible. El que la opción de CSS crítico sea un switch me parece muy bien, hay otras implementaciones que son mucho más complejas que ésta.
Antes de continuar con las mediciones, vuelvo a recordar que es útil leer mi artículo sobre las Core Web Vitals para que entiendas todas las abreviaturas y que significan. Para todas las mediciones que vienen, TBT = total blocking time.
Prueba #1: JetPack Boost con WordPress y GeneratePress Premium
GTmetrix
| Sin JPB | con JPB | |
|---|---|---|
| Performance | 95% | 92% |
| Structure | 92% | 93% |
| LCP (<1.2s) | 1.3s | 1.4s |
| FCP (<0.9s) | 842ms | 947ms |
| CLS (<0.1) | 0.01 | 0.13 |
| TBT (<150ms) | 5ms | 0ms |
PageSpeed Insights (móvil)
| Sin JPB | con JPB | |
|---|---|---|
| Score | 84% | 87% |
| LCP (<1.2s) | 3.2s | 3.1s |
| FCP (<0.9s) | 2.8s | 1.0s |
| CLS (<0.1) | 0 | 0.763 |
| TBT (<150ms) | 0ms | 170ms |
PageSpeed Insights (PC)
| Sin JPB | con JPB | |
|---|---|---|
| Score | 95% | 91% |
| LCP (<1.2s) | 0.8s | 0.9s |
| FCP (<0.9s) | 0.8s | 0.8s |
| CLS (<0.1) | 0.002 | 0.778 |
| TBT (<150ms) | 0ms | 0ms |
Análisis de la prueba #1
Honestamente no veo muchas mejoras a través de los números en las distintas mediciones; apenas y son significativos. No deja de llamarme la atención que el CLS se incrementó en algunas pruebas, incluso muy por encima de lo recomendado, es decir, el layout se mueve regular mientras carga, mientras que en otras las puntuaciones bajaron un poco incluso. Debo decir que veo sospechosas estas cifras, pero al menos en primera instancia no veo que JetPack Boost sea muy efectivo usándolo sólo con WordPress y un tema como GeneratePress Premium.
Prueba #2: JetPack Boost con WordPress y Elementor
Ah, llegamos a uno de los culpables de todo es revuelo que están causando las Core Web Vitals; es bien sabido por todos que Elementor les da una paliza a todas y cada una de ellas, y puede ser considerablemente difícil optimizar un sitio con este builder. Para la siguiente prueba, hice una página de inicio con un template incluido con Elementor, con imágenes y un vídeo. Veamos como le va:
GTmetrix
| Sin JPB | con JPB | |
|---|---|---|
| Performance | 66% | 83% |
| Structure | 95% | 93% |
| LCP (<1.2s) | 1.9s | 1.9s |
| FCP (<0.9s) | 1.3s | 1.2s |
| CLS (<0.1) | 0.03 | 0.03 |
| TBT (<150ms) | 413ms | 140ms |
PageSpeed Insights (móvil)
| Sin JPB | con JPB | |
|---|---|---|
| Score | 54% | 63% |
| LCP (<1.2s) | 7.0s | 8.1s |
| FCP (<0.9s) | 2.7s | 1.0s |
| CLS (<0.1) | 0.007 | 0.088 |
| TBT (<150ms) | 490ms | 400ms |
PageSpeed Insights (PC)
| Sin JPB | con JPB | |
|---|---|---|
| Score | 90% | 91% |
| LCP (<1.2s) | 1.4s | 1.7s |
| FCP (<0.9s) | 0.8s | 0.3s |
| CLS (<0.1) | 0.009 | 0.009 |
| TBT (<150ms) | 70ms | 80ms |
Análisis de la prueba #2
Aquí si vemos una ligera mejora con respecto al uso de JetPack Boost; la puntuación mejora un poco, aunque las Core Web Vitals se mantienen relativamente estables (sin mucha variación respecto a usar o no JetPack Boost). Un punto a favor es que mejora el FCP y el TBT tiene una leve ganancia, por lo que la responsividad del sitio pudiera mejorar también.
Prueba #3: JetPack Boost con WordPress y WooCommerce
GTmetrix
| Sin JPB | con JPB | |
|---|---|---|
| Performance | 87% | 92% |
| Structure | 99% | 100% |
| LCP (<1.2s) | 1.6s | 1.2s |
| FCP (<0.9s) | 1.4s | 1.2s |
| CLS (<0.1) | 0 | 0 |
| TBT (<150ms) | 0ms | 22ms |
PageSpeed Insights (móvil)
| Sin JPB | con JPB | |
|---|---|---|
| Score | 84% | 97% |
| LCP (<1.2s) | 3.8s | 1.7s |
| FCP (<0.9s) | 2.8s | 1.1s |
| CLS (<0.1) | 0 | 0 |
| TBT (<150ms) | 0 | 170ms |
PageSpeed Insights (PC)
| Sin JPB | con JPB | |
|---|---|---|
| Score | 95% | 97% |
| LCP (<1.2s) | 0.9s | 0.8s |
| FCP (<0.9s) | 0.8s | 0.3s |
| CLS (<0.1) | 0 | 0.016 |
| TBT (<150ms) | 90ms | 0 |
Análisis de la prueba #3
Curiosamente los valores de referencia (es decir sin optimizar) de esta prueba empezaron fuertes, y pensé que no vería mucha varianza respecto a los valores con optimización aplicada. Pues extrañamente en esta prueba fue donde más mejora encontré, en particular en la prueba en móviles que es donde hubo una ganancia considerable. Las demás pruebas no están nada mal, y todos los valores se mantiene cerca a lo óptimo o por debajo de tales valores. No es una barbaridad de incremento, pero al menos con WordPress y WooCommerce parece funcionar bien por ahora, lo cual no me extraña siendo que todos son productos de Automattic (por decirlo de una manera simplona).
Veredicto sobre JetPack Boost: pinta bien, pero por ahora no
No hay que perder de vista que es JetPack Boost; es un producto mínino estable, siendo así, tiene un mínimo de características. Y no hay que perder de vista lo que quieren hacer, que me parece algo bueno si es que lo logran: un optimizador basado en switches, lo más simple posible, para que cualquiera lo pueda usar; y es que si les das a muchos un, digamos, Autoptimize o herramientas similares, muy probablemente se pierdan sin saber que hacer, puesto que son herramientas hechas para cierto tipo de usuarios. Construir un optimizador simple pero potente puede ser una muy buena idea considerando la demografía de usuarios de WordPress.
Sin embargo, por ahora el set de características es raquítico y aún no aporta una cantidad de mejoras sustanciales que hagan considerarlo antes que otras opciones. Promete, pero le hace falta mucha madurez en un ramo donde hay productos muy capaces tanto gratuitos como de paga, y no la van a tener fácil.
Entonces, ¿porqué existe en su estado actual JetPack Boost? porque como dije antes, es un producto mínimo viable y estable; lo liberaron no para que someta a los demás competidores, sino para que la gente lo use y esa retroalimentación vaya definiendo el producto. Por tal razón y como lo dije antes, es un proyecto prometedor, pero le falta mucho camino por recorrer.
Orlando es un ingeniero en sistemas de 45 años de edad, apasionado del desarrollo de software y con un cariño especial por WordPress. Le encantan los libros, la música, la fotografía, los cómics y es un AFOL. De último pero no menos, esposo y padre de dos trolls.
Buenas tardes, muy bueno tu análisis, te agrego un dato: con Divi no permite editar en el frente por ahora, todo el día intentando y volvió a funcionar Divi después de desactivar y borrar Jetpack Boost
*Tenía instalado WP Fastest Cache y todas las pruebas de g-metrics y PageInsights me dan y daban mejores con este último.
Miguel,
Gracias por el aporte.
Saludos.