Cómo llegué a un puntaje móvil de Google PageSpeed ​​en WooCommerce con WP Rocket

¿Su objetivo es obtener un 100 perfectos en las ideas de PageSpeed ​​de Google para dispositivos móviles con su tienda WooCommerce?

En este artículo, te mostraré exactamente cómo lo logramos con Femme-Fatale.gr, una tienda electrónica de belleza que originalmente funcionaba en Magento. En ese momento, las cargas de la página móviles tomaron entre 5 y 15 segundos, y el sitio estaba sangrando las ventas, a pesar de un catálogo de 35,000 productos con 500 categorías de productos y 450 atributos de productos.

Soy Dimitris Vayenas, fundador de Oxford Metadata. En las últimas tres décadas, he estado obsesionado con cada milisegundo del rendimiento web. A principios de 2022, mi amigo Nikos Orfanos me pidió que me ayudara con su tienda en línea, y nos pusimos a trabajar.

Después de migrar a WooCommerce y centrarse completamente en la velocidad, utilizando el cohete WP como nuestro arma secreta, rompimos los puntajes de la velocidad de las páginas móviles con un puntaje constante entre 99 y 100/100. Más importante aún, el sitio pasó de estancamiento a una máquina de ingresos.

Sigue leyendo y aprenderá cómo logramos obtener tales resultados y cómo WP Rocket nos ayudó a alcanzar un puntaje de más de 95 años, además del ajuste final que nos llevó a 100 perfectos. Más importante aún, descubrirá el impacto comercial que siguió una vez que el sitio comenzó a cargar en solo 300 milisegundos.

¿Por qué centrarse en el rendimiento, especialmente en los dispositivos móviles?

En Femme -Fatale.gr, más del 90% de las compras ocurren en dispositivos móviles. Eso hizo del rendimiento móvil nuestra máxima prioridad desde el primer día.

Los dispositivos móviles son la prueba de estrés final para cualquier sitio web. Las conexiones limitadas de CPU, memoria y inestables pueden hacer que incluso las páginas más delgadas se carguen hasta 10 veces más lentas que en el escritorio. Es por eso que cada optimización importa.

La velocidad significa eficiencia. Código más limpio, activos más pequeños y un DOM más delgado se traduce en una experiencia más suave para cada visitante, especialmente en dispositivos móviles.

Como me gusta decir: "Si su experiencia móvil no es instantánea, está perdiendo dinero real con cada milisegundo adicional".

El punto de inflexión: migrar de Magento a WooCommerce

En diciembre de 2021, Nikos contactó con un desafío claro. "Mi tienda alcanzó su punto máximo durante el bloqueo a € 0.81 por sesión. Luego las ventas volvieron a € 0.15 por sesión. ¿Podemos volver a los máximos de bloqueo?"

Sabíamos que el primer paso era cambiar las plataformas.

En primer lugar, elegimos WooCommerce por su pila ágil y moderna. Ofreció un ecosistema de complementos y creadores de temas que cubren cada funcionalidad imaginable, junto con la comunidad más grande de ingenieros web con mentalidad de rendimiento.

Fuimos en vivo en marzo de 2022 sin cambiar los datos del producto o aumentar el gasto de marketing. La única diferencia era la velocidad. Cortamos las cargas de la página de 5 a 10 segundos a solo 1 a 2 segundos.

Esta es la captura de pantalla de Gtmetrix que muestra los resultados del tiempo de carga antes de la migración de Magento: 5.8 segundos para la página de inicio y 7.9 segundos para la categoría, capturados mientras todavía estábamos desarrollando el nuevo sitio web.

Por otro lado, este es el rendimiento actual, con todos los vitales de web centrales en verde:

¿Cuál es el verdadero valor de la velocidad para un WooCommerce?

El impacto comercial en el rendimiento era imposible de ignorar, y los números lo dejaron claro.

Antes de la migración, Femme -Fatale.gr había estado atrapado en una rutina de rendimiento. En Magento, la facturación mensual varió de € 7,000 a € 10,000 con aproximadamente 40,000 sesiones, promediando solo € 0.15 a € 0.20 por sesión. Incluso durante el pico de bloqueo en 2020, cuando el tráfico aumentó a 62,500 sesiones, el mejor rendimiento superó a € 0.81 por sesión.

Para febrero de 2022, justo antes de emigrar a WooCommerce, el sitio había mejorado ligeramente a € 0.29 por sesión, pero aún estaba lejos de su potencial.

El impacto del rendimiento más rápido fue inmediato. En marzo de 2022, el primer mes completo después de la migración, los ingresos por sesión se duplicaron a 0.58 €, a pesar de una caída temporal en las sesiones, mientras que los bots calentaban los cachés.

Las ganancias no se detuvieron allí. Para diciembre de 2023, coincidimos con el pico de bloqueo de € 0.81 por sesión. Hoy, ese número ha subido aún más: el sitio web ahora gana € 1.11 por sesión con 40,000 visitas mensuales.

Nikos, el dueño de Femme -Fatale.gr, lo dice mejor:

Al igualar y ahora exceder nuestro Peak Covid, demostramos que la velocidad es la palanca más grande en nuestro negocio.

La base de rendimiento que cada sitio de WooCommerce necesita

Antes de que WP Rocket pudiera ofrecer su potencial de rendimiento completo, debe estar en su lugar una base sólida. Estas decisiones iniciales tuvieron un gran impacto en nuestros resultados, y esto también es lo que recomiendo a cualquiera que ejecute una tienda de WooCommerce:

1. Elija un tema de rendimiento: probamos docenas de temas antes de decidirse por las mejores opciones. La botiga (basada en Gutenberg) por Athemes y Ray Temo (basado en el elemento) obtuvieron más de 90 en demostraciones de proveedores. ¿Algo por debajo de 70? Lo evitamos.

2. Elija un anfitrión verdaderamente rápido: usamos Cloudways , respaldadas por Linode, Vultr y Digitalocean en regiones europeas clave como Londres, Frankfurt, Amsterdam, Milán y Estocolmo. Nos brinda actualizaciones de PHP y base de datos con un solo clic, barniz incorporado y redis, además de una detección de dispositivos móviles sin problemas. Eso asegura que las llamadas de API sin dejar consistir siempre alcancen contenido optimizado. Hemos tenido cero tiempo de inactividad en tres años, y su equipo de apoyo es sobresaliente.
   
   En E -Commerce, la proximidad a sus clientes no es negociable: cada consulta de productos, actualización del carrito y cheque de inventario toca su origen. Con los compradores en Atenas o las islas griegas, y las nubes que no tienen un nodo local, tenemos que desplegar FastPath . Se mira directamente con todos los principales operadores móviles griegos y CloudFlare, entregando TTFB de sub - 50 MS y una experiencia verdaderamente local.

3. Asociarse con proveedores de apoyo: elegimos a los proveedores que ofrecen apoyo confiable y rápido para responder preguntas y solucionar problemas a su lado, desde Athemes y Fibosearch hasta WelAunch , Pixel su sitio , formularios de gravedad , Aioseo y WP Rocket .

4. Optimice su contenido: convertimos todas las imágenes en WebP y las organizamos en carpetas basadas en fechas, asegurando que cada carpeta contenga menos de 10,000 archivos. Para las fuentes, los archivos Woff2 autohospedamos y los subconjulamos para incluir solo los personajes que nuestra audiencia necesitaba. Que redujeron los tamaños de archivo de fuentes en un 70 a 80 por ciento. Servirlos localmente y precargar temprano ayudó a eliminar las búsquedas externas y evitar los cambios de diseño.

5. Utilice la carga de la base de datos de la base de datos quirúrgica: utilizamos el organizador de complementos y los filtros manuales para cargar solo los complementos necesarios por página. También limpiamos transitorios semanalmente y deshabilitamos AutOload para grandes entradas WP_options.

Las características del cohete de WP que nos llevaron a 99/100 en páginas

Una vez que la base estaba en su lugar, WP Rocket nos ayudó a aumentar la velocidad y lograr resultados de rendimiento sobresalientes rápidamente. Estas características jugaron un papel clave para llevarnos a una puntuación de 95+ en Google PageSpeed ​​en Mobile:

• El caché móvil y el mapa del sitio precargado: WP Rocket detecta automáticamente dispositivos móviles y crea un caché dedicado para ellos. Eso significa que los usuarios de teléfonos inteligentes siempre obtienen una instantánea HTML precargada. El precargador basado en Sitemap también rastrea sus páginas justo después de cualquier purga de caché, lo que elimina el retraso que a menudo ocurre en las primeras visitas.
  
• Minificación CSS y JS : WP Rocket elimina el espacio en blanco y los comentarios para encoger el tamaño de los archivos. También puede combinar archivos JavaScript en uno, reduciendo el número de solicitudes HTTP. Eso es especialmente importante para los usuarios móviles en redes más lentas.  
  
• Eliminar CSS no utilizado (RUCSS): A diferencia de la minificación simple, RUCSS analiza sus páginas 'HTML y elimina todas las reglas CSS que nunca se usan en la parte delantera. Este declutador de hojas de estilo a menudo corta decenas de kilobyte, por lo que el navegador produce más rápido con menos bytes. Vimos de primera mano que solo RUCSS se afeitó 200 kb de nuestra carga útil de la página de inicio, lo que resultó en páginas de carga más rápidas.
  
• Retrasar la ejecución de JavaScript : los scripts como análisis, herramientas de chat o widgets de terceros generalmente no necesitan ejecutarse de inmediato. WP Rocket los retrasa hasta que el usuario se desplace, golpee o haga clic. Esto hace que las páginas sean interactivas más rápido y mejora la interacción con la próxima pintura y la capacidad de respuesta general a las interacciones del usuario.

Después de habilitar estas funciones, obtuvimos un puntaje de rendimiento de 99 páginas móviles:

Bonificación: acumulaciones de cohetes WP para casos especiales

A veces, la configuración fuera de la caja necesita un poco de impulso. Para configuraciones seleccionadas como nuestras, con programadores complejos, reglas de fuentes personalizadas o detección de dispositivos inusuales, instalamos cinco complementos de cohetes WP gratuitos después de consultar a los ingenieros senior de WP Rocket:

• Cambie los parámetros RUCSS: ajustamos con qué frecuencia y cuán profundamente se ejecuta el cohete WP elimina el CSS no utilizado. Esto fue esencial para la compatibilidad con complementos como AutomateWoo, que puede sobrecargar el programador de tareas.
• Desactivar fragmentos de carro de WooCommerce: dado que nuestra base de datos ya estaba optimizada, deshabilitamos el caché de fragmento de carrito de WP Rocket para acelerar las llamadas de pago aún más.
• Desactive la precarga de fuentes CSS usadas: utilizamos fuentes woff2 autohostadas personalizadas con reglas de precarga manual. Este complemento aseguró que esas reglas no fueran anuladas por la precarga de fuente automática de WP Rocket.
• Eliminar las reglas de expiración de HTML: Nuestro CDN y el servidor ya manejaron los encabezados de caché, por lo que eliminamos las reglas de HTML predeterminadas de WP Rocket para evitar conflictos.
• Establezca tabletas como dispositivos móviles: tratamos tabletas como dispositivos móviles para garantizar que se beneficiaran del almacenamiento en caché móvil y las optimizaciones receptivas. Esto era importante para la funcionalidad personalizada que depende de la verificación WP_IS_MOBILE ().

Además del complemento de la tableta, la mayoría de estos complementos solo se necesitan en tiendas de alta complejidad. Para las configuraciones de comercio electrónico típicas, WP Rocket funciona muy bien de la caja.

El secreto de 100/100: perfeccionar lazando lazyloading y esa imagen LCP

Llegar a 99 en las ideas de PageSpeed ​​de Google fue un gran hito, pero no estábamos satisfechos. Un punto se encontraba entre nosotros y la perfección.

Primero, abordamos la hinchazón de elementos, lo que significa reducir el número de elementos HTML en la página. Google penaliza las páginas con más de 810 elementos DOM, y nuestros menús, controles deslizantes y pie de página solos nos llevaron más allá de 1,000.

Esto es lo que hicimos:

• Contenido estático con carga perezosa : diferimos elementos no críticos como menús de encabezado, controles deslizantes de categoría de productos, carruseles de marca y el pie de página hasta después de la pintura inicial.

• Eliminamos elementos innecesarios : podamos los niveles de menú profundo y las áreas de widget inactivos deshabilitados en dispositivos móviles. Eso nos ayudó a obtener el recuento total de DOM por debajo del umbral de penalización de Google.

Incluso con una página más limpia, todavía no pudimos descifrar 100. El problema final fue la imagen del héroe.

Originalmente, era una imagen de 350 × 622 PX con superposiciones, sombras y texto, demasiado complejo para cargar rápido. Lo simplificamos a una webp 350 × 350 PX y lo precargamos con alta prioridad utilizando el siguiente código:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

Y así es como, al simplificar y precargar la imagen del héroe, logramos un puntaje perfecto de 100/100 PSI de Mobile.

El impacto comercial: la velocidad como motor de crecimiento

Como expliqué, Speed ​​no solo mejoró nuestra puntuación de PageSpeed. Aumentó directamente nuestro resultado final.

Después de optimizar el rendimiento y aprovechar las características del cohete WP, vimos ganancias medibles en los resultados:

• Las tasas de conversión aumentaron en un 33%.

• Los ingresos por sesión aumentaron más de cinco veces , de € 0.20 a € 1.11.

Esos resultados se tradujeron en ingresos adicionales de € 384,000 durante los primeros 18 meses después de la migración .

Estas no fueron mejoras menores. Combinaron y finalmente superaron nuestro rendimiento máximo de bloqueo, lo que demuestra que la velocidad del sitio fue la palanca clave para el crecimiento .

Como me gusta decir: "Cada milisegundo afeitado agregó euros reales al resultado final".

3 consejos prácticos para dueños de negocios

Si está ejecutando una tienda de comercio electrónico, me gustaría compartir algunos consejos prácticos adicionales puede ayudarlo a aprovechar al máximo sus esfuerzos de rendimiento, ya sea técnico o no.

1. Rastree a los usuarios reales: use el monitoreo real del usuario (ron) para vigilar los datos de campo. Los puntajes de laboratorio son útiles, pero lo que realmente cuenta es cómo funciona su sitio para los visitantes reales. Solo asegúrese de deshabilitarlo al ejecutar las pruebas de PageSpeed ​​Insights para evitar resultados sesgados.
2. Geoloce su origen: aloje su sitio cerca de sus clientes. Cuando su servidor de origen está cerca de su audiencia, todo, desde búsquedas de productos hasta el pago, se vuelve más rápido y más confiable.
3. Apóyate en WP Rocket: comience con la configuración predeterminada. Manejan automáticamente la mayoría de los problemas de rendimiento de inmediato. Una vez que su línea de base es sólida, puede ajustar el fino habilitando algunas características adicionales, por ejemplo, para optimizar los archivos CSS y JS. Y si no es experto en tecnología, recuerde: "Los sitios más rápidos significan menos frustración, más ventas y clientes más felices".

Concluir

Nos mudamos de Magento a WooCommerce, aumentamos nuestro puntaje de Mobile PageSpeed ​​de 55 a los 100 perfectos, y aumentó los ingresos por sesión de € 0.20 a € 1.11. Ese viaje demostró una cosa claramente: la velocidad es más que un hito técnico. Es un verdadero impulsor del crecimiento empresarial.

Nos centramos en el rendimiento, construimos una base técnica sólida y utilizamos WP Rocket para desbloquear los resultados rápidamente. Si su tienda WooCommerce se siente lenta o de bajo rendimiento, ahora es el momento de actuar. Un sitio más rápido significa una experiencia más suave para sus visitantes y ganancias reales para su negocio.