Cómo acelerar el tema Astra y obtener una puntuación PSI móvil de 99 con WP Rocket

Este artículo apareció originalmente en Blog de WP Rocket y se ha publicado aquí con autorización.

Astra es uno de los temas más populares y ligeros que puedes elegir en WordPress. Por lo tanto, acelerar su sitio web y alcanzar una puntuación PSI superior a 90 debería ser factible. Aun así, te enfrentarás a varios retos: por ejemplo, tendrás que enfrentarte a recursos complicados como archivos JavaScript.

Si alguna vez ha intentado optimizar el rendimiento de su sitio web, sabrá lo difícil que es atender recomendaciones de PageSpeed Insights como "Reducir el tiempo de ejecución de javascript" y "Eliminar los recursos que bloquean la renderización". ¡Te sentimos!

Por eso te contamos la historia de Rick Orford, un empresario que consiguió acelerar su sitio web construido con Astra. Consiguió 99 PageSpeed Insights móviles e impulsó el Core Web Vitals. Suena bien, ¿verdad? Todos sabemos que la puntuación de rendimiento móvil es la más difícil de optimizar.

Así pues, ¡es hora de saber más sobre su reto de rendimiento!

Lanzar un nuevo sitio web y pasar por alto algo crucial

En 2020, Rick Orford lanzó su sitio web para ser económicamente independiente - un recurso integral para quienes buscan ahorrar más, ganar más y saldar deudas rápidamente. Como sitio editorial en primer lugar, la estrategia de adquisición de contenidos más relevante siempre ha visto el SEO en primer plano.

Aleja el zoom: probablemente ya sepa que el SEO es crucial para su tráfico y sus ingresos y que el Actualización de la página Experiencia puede afectar a su rendimiento orgánico.

Después de que Google anunciara la introducción de los Core Web Vitals como parte del nuevo factor de clasificación, Rick analizó las tres métricas. El Core Web Vital que obtuvo la peor puntuación de rendimiento fue el Largest Contentful Paint.

El LCP mide el tiempo que tarda el elemento más grande en cargarse y hacerse visible en la ventana gráfica. A menudo, el elemento más grande es una imagen. Más concretamente, es la imagen principal. ¿Y adivina qué? Ese era precisamente el mayor problema en el tiempo de carga del terrible sitio.

"Como muchos sitios de WordPress que se montan rápidamente, no tuvimos en cuenta los tiempos de carga en la puesta en marcha inicial", explica Rick. "Como el SEO empezó a ser rápidamente un factor clave para nuestro modelo de negocio, llegó el momento de empezar a optimizar el rendimiento del sitio y las puntuaciones de Core Web Vitals", añade. Le preocupaba de verdad que la clasificación del sitio empeorara en lugar de mejorar. Y tenía buenas razones para creerlo.

El retraso de JavaScript como punto de inflexión

Rick no empezó a usar WP Rocket de inmediato. Al principio, su equipo utilizaba otro plugin de almacenamiento en caché. Sin embargo, "el soporte era siempre una molestia", explica. Y todo el mundo sabe cómo una asistencia experta y amable marca la diferencia para los clientes.

Así que Rick siguió buscando la solución adecuada a sus necesidades. Quería un rendimiento de alta calidad, además de una excelente atención al cliente. ¿Puede culparle?

Aquí es cuando WP Rocket entra en juego. "WP Rocket resultó ser la solución adecuada y madura para el almacenamiento en caché", afirma Rick.

Lo que marcó la diferencia en la elección de Rick fue la Retrasar la ejecución de JavaScript característica proporcionada por WP Rocket.

De hecho, el punto de inflexión para su decisión fue la posibilidad de retrasar fácilmente la carga de archivos JavaScript hasta la interacción del usuario. No en vano, retrasar los archivos JavaScript ayuda a reducir el tiempo de carga y mejorar LCP - la métrica Core Web Vital que Rick pretendía mejorar en primer lugar.

Alejar: Lighthouse - por lo tanto, PageSpeed Insights - no detectará ningún archivo JavaScript que haya sido retrasado. Esto significa que obtendrá un impulso para la "Eliminar archivos Javascript no utilizados" Recomendación de la PSI, aunque no es la primera razón por la que debe retrasar los archivos JavaScript.

Volver a Rick: "También nos gustó la posibilidad de descargar un archivo de configuración de los ajustes actuales. Así, si cometemos un error, siempre podemos volver a una versión guardada anteriormente", añade. Una opción muy útil, ¿verdad?

Por último, pero no menos importante, Rick decidió comprar WP Rocket gracias al generoso periodo de reembolso que mitigaba cualquier riesgo. En caso de que te lo estés preguntando, le devolvemos el dinero si lo solicita en los 14 días siguientes a la compra. En otras palabras, aprovechar la oportunidad de optimizar el rendimiento de su sitio web nunca ha sido tan fácil y seguro.

Cómo optimizar el tema de Astra con WP Rocket

Pasemos ahora a los detalles de la optimización del rendimiento. Rick compartió los ajustes en los que trabajó para lograr una excelente puntuación de rendimiento con el tema Astra. Su equipo invirtió alrededor de 100 horas en conseguir que todas las piezas funcionaran a la perfección. Por lo tanto, compartió con nosotros una información muy valiosa - y está abierto a responder más preguntas si quieres ponerte en contacto con él.

Las herramientas

Empecemos por las herramientas. Esto es lo que utilizó el equipo:

• Cloudflare (incluido el registro del dominio)
• Servidor Amazon EC2
• Panel de control Plesk (Ubuntu)
• Servidor web Apache y Nginx
• Mysql y Redis para almacenamiento en caché
• WordPress 5.7 con Gutenberg
• Astra 3
• Qubely (para mostrar entradas destacadas en nuestra página de inicio)
• CDN gratuito de Jetpack para el alojamiento de imágenes
• WP Rocket.

Estos ajustes los consiguió 99% del camino. Las modificaciones personalizadas de CSS proporcionaron el jonrón.

La configuración de WP Rocket implementada

Los ajustes habilitados con WP Rocket son los siguientes:

Pestaña Caché:

• Activar el almacenamiento en caché para dispositivos móviles
• Vida útil de la caché: 10 horas

Ficha Optimización de archivos:

Todo ha sido comprobado.

Para que te hagas una idea, la pestaña Optimización de archivos te permite minificar archivos CSS y JS, optimizar la entrega de CSS, retrasar la ejecución de JavaScript y cargar JavaScript en diferido. En pocas palabras, es la forma de eliminar los recursos que bloquean la renderización y abordar el tiempo de ejecución de JavaScript. Y funciona, ¡no lo dudes!

La pestaña Optimización de archivos

Pestaña Media:

• Lazyload - Habilitar para imágenes, para iframes y vídeos
• Sustituir el iframe de YouTube por una imagen de previsualización
• Añadir las dimensiones de página que faltan

Ficha Precarga:

• Activar la precarga
• Activar la precarga de caché basada en el mapa del sitio
• Mapa del sitio Yoast SEO XML

Pestaña Latido:

• Controla Heartbeat (ayuda a ahorrar algunos recursos de tu servidor).

Pestaña Complementos:

• Cloudflare.

La regla 80/20 para optimizar el rendimiento

Después de ver la configuración, le pedimos a Rick que compartiera el consejo más importante a tener en cuenta a la hora de optimizar el rendimiento del sitio.

"Presta atención a la regla 80/20", respondió. "20% de tus modificaciones podrían conseguirte 80% del camino. Para nosotros, eso significa alojar nuestro blog en nuestro propio servidor EC2 de AWS, utilizando Cloudflare, Apache & Nginx, WordPress y WP Rocket. Para WP Rocket, en particular, recomiendo conectarlo con Cloudflare, Minificar y Combinar CSS, y asegúrese de diferir la carga de archivos .js".

La carga diferida de Javascript también es una función potente

Cargar JavaScript en diferido ha sido una de las características clave de WP Rocket para lograr una puntuación de rendimiento sobresaliente.

"El aplazamiento de JavaScript nos ha cambiado las reglas del juegoexplica. Como hemos mencionado antes, al aplazar las cargas de JavaScript, eliminarás los archivos JS que bloquean la renderización. Como resultado, la puntuación LCP mejorará.

Además, Rick acertó con la posibilidad de hacer copias de seguridad y restaurar la configuración de WP Rocket. "Permitió al equipo probar y volver a probar configuraciones hasta que estuvimos contentos", dice. Y mereció la pena - ¡sigue leyendo!

El impresionante resultado de la ISP y lo que implica

Gracias a los ajustes aplicados, el sitio de Rick obtuvo una puntuación móvil PageSpeed de 99.

Todos los indicadores Core Web Vitals están ahora en verde, incluida la difícil puntuación Largest Contentful Paint:

La puntuación del ISP móvil - Página de inicio

"WP Rocket desempeña un papel integral en nuestra puntuación de rendimiento PageSpeed"señala Rick. "Sin ella, nuestra calificación PageSpeed se resentiría, así como nuestro tráfico orgánico.

Antes de optimizar el sitio con WP Rocket, nuestra puntuación de PageSpeed Insights en móviles era terrible, 23, y en torno a 60 en ordenadores de sobremesa.. Ahora, obtenemos una puntuación casi perfecta de 100 en cada uno de ellos para nuestra página de inicio, y casi 100 en nuestros artículos", añade.

Gracias a los excelentes resultados de rendimiento web, ahora el sitio funciona a una velocidad óptima. El equipo de Rick puede ahora dedicar 100% de su tiempo a crear contenidos atractivos y concentrarse en la parte crucial del negocio.

"Muchas gracias a WP Rocket por hacerlo posible.", dice Rick. "Si estás considerando WP Rocket, adelante, haz la compra. Pero no se fíe sólo de mi palabra: compruebe Las increíbles críticas de WP Rocket!", termina.

A su disposición: Empiece hoy mismo a optimizar su sitio web

Es el momento de empezar a optimizar el rendimiento de tu sitio. Esperamos que hayas obtenido inspiración y valiosos consejos de la historia de Rick sobre cómo mejorar tu tema Astra con WP Rocket.

Y quizá algún día nos cuentes tu historia de éxito en la web. WP Rocket es la forma más fácil de mejorar tu puntuación de PageSpeed Insights y las calificaciones de Core Web Vitals - ¡y ahora es el momento de hacerlo realidad!

Autor: Valentina Orlandi

Valentina es la responsable de marketing de contenidos en WP Rocket. Le encanta el marketing, la psicología digital y entender el porqué de los comportamientos humanos. Es una lectora apasionada y siempre está dispuesta a trabajar con palabras.