Revisión de NitroPack: optimización de la velocidad del sitio de WordPress en modo fácil

Publicado: 2021-12-27

Si tiene un sitio web, debe preocuparse por la optimización de la velocidad del sitio.

La velocidad de la página tiene un efecto enorme en la experiencia del usuario de su sitio: hay todo tipo de datos que vinculan la velocidad lenta del sitio con tasas de rebote más altas, tasas de conversión más bajas y, en general, usuarios insatisfechos.

Pero, sinceramente, no necesitas datos para probar este punto porque probablemente ya sabes lo increíblemente molesto que es un sitio web que se carga lentamente, ¿verdad?

Además, con la nueva actualización de Page Experience de Google, Google también utiliza métricas de Core Web Vitals como la pintura más grande con contenido como un factor de clasificación del motor de búsqueda, por lo que la velocidad lenta de la página también puede ser un lastre para la optimización del motor de búsqueda de su sitio.

Entonces, la velocidad del sitio es importante... pero también es complicada.

Hay almacenamiento en caché, optimización de JavaScript, optimización de CSS, optimización de HTML, redes de entrega de contenido (CDN), optimización de imágenes, captación previa, compresión... entiende la idea.

NitroPack es un complemento fácil de usar que lo ayuda a implementar prácticamente todas las tácticas de optimización del rendimiento que su sitio necesita en una sola herramienta.

En WordPress, todo lo que debe hacer es instalar el complemento NitroPack, hacer clic en algunos botones y su sitio se beneficiará instantáneamente de tácticas como el almacenamiento en caché, una red de entrega de contenido (CDN), optimización de CSS/JavaScript y mucho más.

En nuestra revisión práctica de NitroPack, vamos a echar un vistazo práctico a esta herramienta, que incluye lo siguiente:

  • Un resumen rápido de las características
  • Un tutorial de NitroPack y mira la interfaz
  • Reflexiones sobre si las mejoras de NitroPack son "reales" (esto tendrá sentido más adelante)
  • Algunas pruebas de rendimiento antes/después con NitroPack
  • Precios
  • Pensamientos finales
Herramienta de optimización de la velocidad del sitio NitroPack

Revisión de NitroPack: ¿Qué hace?

NitroPack es un complemento de optimización de velocidad todo en uno para WordPress (y algunas otras plataformas).

Esa es una de las cosas más singulares de NitroPack: realmente es todo en uno .

Esto es sorprendentemente raro. Por ejemplo, WP Rocket es un complemento de velocidad de página muy completo por derecho propio, pero aún debe combinarlo al menos con una solución de optimización de imágenes, un CDN y algunos otros ajustes.

Con NitroPack, no hay necesidad de crear una "pila" de herramientas de optimización del rendimiento. Simplemente hace todo por ti. Aquí están las características de alto nivel que cubre:

  • Almacenamiento en caché : incluido el almacenamiento en caché de páginas inteligentes con precarga y borrado inteligente de caché, así como el almacenamiento en caché del navegador.
  • CDN : una CDN integrada con más de 70 puntos finales globales, compresión Gzip/Brotli y más.
  • Optimización de CSS , incluido el manejo de CSS crítico en la parte superior de la página para que pueda aumentar sus tiempos de carga iniciales, incluida la métrica de pintura más grande con contenido.
  • Optimización de JavaScript : puede aplazar las secuencias de comandos para mejorar los tiempos de carga iniciales y, de lo contrario, optimizar todo el JavaScript de su sitio. NitroPack también tiene una forma única de sacar los scripts del subproceso principal de la CPU y retrasar los scripts hasta la interacción del usuario; más sobre esto a continuación.
  • Optimización de imágenes : puede comprimir/cambiar el tamaño de las imágenes automáticamente y convertirlas a WebP. También hay una nueva función de tamaño adaptable que le permite mostrar de forma dinámica diferentes imágenes a los usuarios según el tamaño de sus pantallas.
  • Optimización de HTML , incluidos detalles avanzados como preconexión de DNS para recursos clave.

Esta imagen hace un buen trabajo al resumir las características clave:

Características de NitroPack

Una característica única de NitroPack es su "cargador de recursos patentado". El concepto/beneficio de esto es bastante complejo, pero la idea básica es que NitroPack optimiza la forma en que se carga su sitio (especialmente su JavaScript) para que todos los archivos separados se carguen de manera óptima para la experiencia del usuario.

Básicamente, si habilita esta función, intenta cargar solo los archivos mínimos necesarios para representar el contenido de la mitad superior de la página y luego esperar para cargar el resto hasta que un usuario comience a interactuar con su sitio. Al hacer esto, puede acelerar en gran medida el tiempo de carga inicial de su sitio, incluida la métrica de mayor pintura con contenido.

Puedes leer todo sobre esto aquí.

Cómo usar NitroPack

Más allá de las características integrales de optimización de la velocidad del sitio de NitroPack, su fácil configuración es otro de sus mayores beneficios.

Literalmente, puede estar en funcionamiento con un sitio completamente optimizado en solo unos minutos gracias a los múltiples modos de optimización preestablecidos.

Veamos cómo funciona…

1. Agregue su sitio web

Para comenzar, querrá agregar su sitio web a través del panel de control de NitroPack:

NitroPack añadir sitio

Luego, puede conectar su cuenta de NitroPack a su sitio usando una herramienta de conexión. Para WordPress, eso significa el complemento NitroPack dedicado en WordPress.org:

Complemento de WordPress NitroPack

2. Elija su modo de optimización

Ahora, está listo para elegir su modo de optimización. Esta es una de mis partes favoritas de NitroPack porque es lo que hace que NitroPack sea tan simple.

En lugar de jugar con un montón de configuraciones separadas como tendría que hacer en la mayoría de los complementos, NitroPack simplemente le permite elegir una configuración preestablecida según sus necesidades. Sin embargo, para los usuarios más avanzados, aún puede jugar .

Puede seleccionar esto desde su panel de WordPress o el panel de NitroPack.

Hay cinco modos diferentes, pero creo que la mayoría de la gente querrá elegir Fuerte , ya que ofrece un buen equilibrio de mejoras de rendimiento y al mismo tiempo preserva el funcionamiento de su sitio.

A muchas personas también les gusta el modo Ludicrous , ya que hará la mayor mejora en sus puntajes de PageSpeed ​​​​y Core Web Vitals. Sin embargo, recomiendo tener cuidado con este modo ya que la forma en que retrasa JavaScript puede interferir con ciertas funciones en su sitio.

Por ejemplo, si su menú móvil se basa en JavaScript, el modo Ludicrous podría causar un comportamiento extraño allí. Por otro lado, si tiene menús basados ​​en CSS, eso podría no ser un problema.

Entonces, siéntase libre de jugar con el modo Ludicrous para comenzar, pero prepárese para volver al modo Strong si experimenta algún problema:

Modo de optimización NitroPack

3. … Beneficio

Para muchos usuarios, esto es literalmente todo. Una vez que elija su modo de configuración, puede dejar de pensar en el rendimiento porque NitroPack se encarga del resto.

4. …O Tinker (Para usuarios avanzados)

Para usuarios más avanzados, NitroPack también les ofrece muchas opciones para jugar. Puede excluir ciertas páginas, scripts, cookies, recursos, parámetros de consulta, etc.

También obtiene algunas opciones interesantes, como la capacidad de optimizar los scripts de anuncios, borrar el caché mediante webhook ( combine esto con WP Webhooks para divertirse ) y realizar otras acciones avanzadas:

Configuración avanzada de NitroPack

Si eres un usuario casual, siéntete libre de ignorar todas estas cosas. Pero si es un usuario avanzado, probablemente apreciará esta configuración.

Esta configuración también puede ayudarlo a usar el modo Ludicrous sin problemas porque puede excluir ciertos scripts que no desea retrasar la carga.

NitroPack y “Blackhat SEO”: ¿eso es real?

Si ha buscado otras revisiones de NitroPack, es posible que haya visto la acusación de que NitroPack es una herramienta de "SEO blackhat" que engaña a Google para que piense que su sitio se carga rápidamente, aunque en realidad no es así.

Entonces, ¿cuál es el trato aquí?

Bueno, la respuesta es bastante técnica, pero creo que está bastante claro que NitroPack no está haciendo nada malo.

El problema principal aquí parece ser la diferencia entre los datos de la prueba de velocidad de laboratorio y los datos de la prueba de velocidad real de "campo":

  • Datos de laboratorio (sintéticos) : datos de rendimiento simulados recopilados por una herramienta de prueba de velocidad.
  • Datos de campo : los datos de rendimiento reales de su sitio tal como los experimentan los visitantes humanos reales. Por lo general, recopilará esto a través del Informe de experiencia del usuario de Chrome, que está disponible en PageSpeed ​​Insights si su sitio tiene suficiente tráfico.

Los datos de campo son lo que realmente importa para el rendimiento en el mundo real (y para la actualización del algoritmo SEO de Page Experience de Google), pero la mayoría de las personas se centran demasiado en los datos de laboratorio y las "puntuaciones" porque son mucho más fáciles de recopilar.

La forma en que el cargador de recursos patentado de NitroPack funciona en modo Ludicrous al mover ciertos procesos fuera del hilo principal y retrasar la ejecución de JavaScript significa que su sitio se verá "anormalmente" bien en algunas herramientas de prueba de velocidad de laboratorio ( porque muchas herramientas no pueden detectar el procesos fuera de hilo ).

Y entiendo lo que dice la gente aquí: un sitio que usa NitroPack y el modo Ludicrous se verá "sospechosamente" bien en ciertas herramientas de prueba de velocidad.

Sin embargo, el verdadero problema aquí es si cree que NitroPack está haciendo esto maliciosamente para "engañar" a Google o si es solo un subproducto natural de la forma en que funciona su cargador de recursos y optimiza su sitio.

Personalmente, creo que está bastante claro que NitroPack es el verdadero negocio y esto es más un problema con la forma en que funcionan algunas herramientas de prueba de velocidad que con NitroPack tratando de jugar con el sistema.

Este es el por qué:

En primer lugar, NitroPack no está tratando de ocultar nada aquí porque ellos mismos recomiendan a los usuarios de NitroPack que miren los datos de rendimiento del usuario real en lugar de confiar solo en los datos de laboratorio.

NitroPack recomienda datos de campo

Además, NitroPack está trabajando para poner los datos de campo reales al frente y al centro en el tablero de NitroPack. Si observa los datos de campo reales, verá que NitroPack realiza grandes mejoras tanto en los datos de laboratorio como en los datos de campo reales.

No se puede engañar a los datos del mundo real. Entonces, si NitroPack realmente estuviera tratando de engañar a las personas, no sería inteligente de su parte animar a sus usuarios a centrarse en los datos del mundo real en lugar de los datos de laboratorio.

La última acusación es que NitroPack está haciendo algún tipo de SEO de sombrero negro que Google eventualmente penalizará.

Honestamente, esto no tiene sentido para mí.

En primer lugar, la velocidad de la página sigue siendo un factor de clasificación pequeño, por lo que no es como "engañar" a Google para que piense que tiene un sitio rápido y lo disparará en la clasificación. Google ha dicho que la velocidad del sitio es más un "desempate" entre sitios igualmente relevantes, en lugar de algo que mejorará su clasificación por sí mismo.

Es decir, no es como si el hecho de que su sitio pasara de dos segundos a un segundo cambiaría nada: dos segundos ya es lo suficientemente rápido como para ganar el desempate de Google.

Más allá de eso, creo que las acusaciones de SEO simplemente no tienen sentido debido a la cantidad de sitios populares que usan NitroPack y aún se clasifican bien.

De hecho, ¡usamos NitroPack aquí en WP Mayor! No estaríamos haciendo eso si pensáramos que hay algún impacto negativo en el SEO.

Si quieres verificar esto, puedes mirar los encabezados de WP Mayor y verás que efectivamente estamos usando NitroPack:

Encabezados WP Mayor NitroPack

Finalmente, si está realmente preocupado, puede usar la herramienta de inspección de URL en Google Search Console para ver cómo se ve su sitio con NitroPack cuando Google lo rastrea. Si lo hace, verá que Google detecta el contenido completo de su página como lo haría sin NitroPack.

Es decir, no hay ninguna diferencia en el contenido de su sitio a los ojos de Google según la propia herramienta de rastreo de Google.

Rendimiento de NitroPack antes/después

Con esa larga discusión fuera del camino, quiero ver algunos datos de rendimiento de WP Mayor.

A pesar de lo que dije anteriormente acerca de que los datos de campo son más importantes que los datos de laboratorio, aquí voy a usar una herramienta de prueba de velocidad sintética porque, bueno, es difícil para mí recopilar datos antes/después con tiempos de carga de usuarios reales.

Sin embargo, usaré WebPageTest, que hace un trabajo mejor que el promedio para capturar la experiencia de velocidad de página completa porque muestra métricas completas y completas del documento.

La métrica totalmente cargada capturará gran parte del JavaScript que NitroPack aplaza/retrasa en la carga inicial.

Debido a que vivimos en un mundo en el que priman los dispositivos móviles, configuré WebPageTest con un enfoque que prioriza los dispositivos móviles:

  • Prueba desde un iPhone 8 emulado
  • Usar una conexión LTE acelerada
  • Ejecute nueve pruebas separadas y tome el valor de la mediana

Aquí están los datos de la página de inicio de WP Mayor con y sin NitroPack:

Antes de NitroPack Con NitroPack
Tiempo hasta el primer byte 0.722 s 0,742 s
Pintura con contenido más grande 2.123 s 0.970 s
Cambio de diseño acumulativo 0.006 0
Tiempo total de bloqueo * 0,174 s 0,033 s
Tiempo de finalización del documento 3.063 s 1.598 s
Documentar solicitudes HTTP completas 88 9 **
Tamaño completo del documento 1,45 MB 0,48 MB
Tiempo de carga completa 3.161 s 2.457 s
Solicitudes HTTP completamente cargadas 89 46
Tamaño completamente cargado 1,45 MB 0,85 MB

*Este es un buen proxy para First Input Delay, que solo está disponible a partir de datos de campo .

**Puede ver que las solicitudes HTTP son realmente bajas al principio porque NitroPack está retrasando muchos de estos scripts.

En general, puede ver una mejora bastante masiva en todos los ámbitos con NitroPack, especialmente cuando se trata de las métricas de Pintura con contenido más grande y Documento completo.

Tenga en cuenta que puede lograr estas mejoras con solo unos pocos clics. Nuevamente, creo que lo que hace que NitroPack sea único es la combinación de mejoras de rendimiento y simplicidad.

Si está interesado en los puntajes de PageSpeed ​​Insights ( personalmente, no lo estoy ), también los recopilé para la página de inicio de WP Mayor con y sin NitroPack:

Antes de NitroPack Con NitroPack
Puntuación móvil 38 80
Escritorio 88 96

También puede ver grandes mejoras allí, especialmente con la puntuación móvil.

Precios de NitroPack

Ahora que hemos cubierto todo lo demás, hablemos de los precios de NitroPack.

En primer lugar, NitroPack tiene un plan gratuito que admite hasta 5000 visitantes por mes y un ancho de banda CDN de 1 GB con todas las funciones. Si tiene un sitio de poco tráfico, ese plan gratuito podría funcionar bien para usted, al menos al principio.

Sin embargo, la desventaja del plan gratuito es que incluye una insignia de NitroPack en el pie de página de su sitio. No es muy intrusivo, pero es algo a tener en cuenta.

Si supera los límites gratuitos o simplemente desea eliminar la insignia de NitroPack, deberá pagar un plan. Los planes pagos de NitroPack permiten la facturación mensual y anual. Si pagas anualmente, tendrás dos meses gratis.

Todos los planes tienen las mismas características: las únicas diferencias son los límites de visualización de páginas y el ancho de banda de CDN. Además, cada plan solo admite un único sitio. Si tiene muchos sitios, puede comunicarse con el equipo de ventas de NitroPack para conocer las opciones de agencias personalizadas y planes de sitios múltiples, lo que puede ahorrarle algo de dinero.

Precios de NitroPack

Si su sitio tiene más de un millón de páginas vistas o consume más de 500 GB de ancho de banda CDN, también puede comunicarse con el departamento de ventas de NitroPack para obtener un plan personalizado.

Además, todos los planes vienen con una garantía de devolución de dinero de 14 días, por lo que no está arriesgando nada.

Reflexiones finales sobre NitroPack

En general, creo que hay algunos pros y contras definidos en el uso de NitroPack para acelerar su sitio web.

Las principales ventajas de NitroPack son que es tan simple y tan completo . Es una herramienta que implementa prácticamente todas las tácticas de optimización del rendimiento, incluidos enfoques únicos, como la forma en que retrasa JavaScript y lo saca del hilo principal de la CPU. No creo que encuentre una forma más sencilla de pasar de cero a tener un sitio completamente optimizado.

Para muchas personas, especialmente las personas sin conocimientos técnicos, esa es una propuesta de valor realmente poderosa.

La principal desventaja de NitroPack es que es caro , al menos para el espacio de WordPress. Si tiene un presupuesto limitado, puede encontrar complementos de velocidad del sitio más baratos para optimizar su sitio (como WP Rocket) o incluso podría crear una pila de optimización bastante buena utilizando complementos de WordPress completamente gratuitos.

Al final, todo se reduce a esto...

La velocidad del sitio es increíblemente importante, por lo que no puede simplemente ignorarla.

Cuando se trata de lo que haces con respecto a la velocidad del sitio, debes responder esta pregunta:

¿Está dispuesto a pagar una pequeña prima por una solución de un solo clic para resolver los problemas de velocidad de su sitio?

Si no es una persona muy técnica o si prefiere concentrarse en crear contenido y comercializar su sitio en lugar de optimizar el rendimiento, creo que podría encajar en la categoría "Sí".

Por otro lado, si desea mantener sus costos lo más bajos posible, puede encajar en la categoría "No", en cuyo caso puede preferir un complemento de velocidad de página de WordPress más barato o gratuito.

¿Son esos complementos tan simples como NitroPack? Realmente no. Pero si está dispuesto a trabajar, aún puede crear un sitio web de carga rápida utilizando herramientas gratuitas o más baratas.

Si está indeciso, le recomiendo registrarse en NitroPack y realizar algunas pruebas. El proceso de configuración solo lleva unos minutos, por lo que no necesitará invertir mucho tiempo.

Más allá de eso, hay una garantía de devolución de dinero de 14 días, por lo que tampoco está arriesgando dinero ( o simplemente puede probar el plan gratuito si está de acuerdo con la insignia de NitroPack ).

Sitio web de NitroPack