Cómo optimizar el tema Flatsome con WP Rocket

El tema Flatsome es uno de los más utilizados para tiendas online, desde hace años, y sigue siendo un tema muy elegido para muchos proyectos que, a pesar de sus múltiples funcionalidades, es muy fácil de optimizar para una carga rápida.

En esta ocasión quiero compartir contigo lo que, en mi experiencia con muchos clientes de nuestro servicio de mantenimiento que usan Flatsome, a los que ayudamos siempre a optimizar sus webs, sería una configuración óptima de los ajustes del tema, con la ayuda de WP Rocket, un fantástico plugin premium de optimizaciones.

Ajustes de rendimiento de Flatsome

Empezaré con los ajustes de rendimiento del tema, pues son la base para lo que a continuación configuraremos adicionalmente en WP Rocket.

Site Loader

El cargador del sitio no solo es innecesario, sino que es molesto, da la sensación de que las páginas tardan más en cargar, y en realidad las páginas tardan más en cargar pues es un JavaScript que bloquea la visualización del contenido hasta que no carga totalmente, penalizando además al sitio en las métricas web principales.

Motivos de sobra para desactivarlo.

Performance

En esta sección de los ajustes del tema Flatsome hay una serie de opciones que es mejor desactivar y otras que conviene activar, y recuerda, siempre teniendo en cuenta que a continuación vamos a combinarlas con ajustes del plugin WP Rocket.

Te resumo:

• Preload pages – Hace una precarga inteligente de las páginas enlazadas desde la actual, ofreciendo una experiencia de navegación casi instantánea. Funciona muy bien y consume menos recursos del servidor que la precarga que ofrece WP Rocket.
• Lazy Load Banner and Section backgrounds – Activa desde aquí la carga diferida de banners e imágenes de fondo de secciones, mejor que desde WP Rocket, pues está totalmente adaptada la optimización a los CSS usados por el tema.
• Disable Emoji script – Hay muchas maneras de desactivar los scripts de los emoji de WordPress, y si no lo has hecho de otro modo aquí puedes conseguirlo a un clic.
• Disable Block library css – Si no usas el editor de bloques, desde aquí puedes desactivar la carga de su CSS, en su caso innecesario. Hay otros métodos, pero este también vale.
• Disable jQuery Migrate – La mayoría de los plugins ya no usan esta funcionalidad, tampoco Flatsome, así que puedes desactivarla con bastante seguridad.

Ajustes de WP Rocket para Flatsome

Y llegamos a WP Rocket.

Teniendo en cuenta lo anteriormente configurado en los ajustes del tema, vamos a complementar con más mejoras de rendimiento, compatibles con Flatsome.

Caché

Además de la caché, por defecto, de WP Rocket, es interesante activar la caché para dispositivos móviles.

Si, además, tu sitio es una membresía, puedes activar también la caché para usuarios conectados, pero si no lo fuera, déjalo desactivado pues no es necesario la mayoría de las veces.

Para finalizar, cambia el tiempo de vaciado de caché a cada 6 horas, óptimo para la mayoría de tiendas online.

Optimizar archivos

En esta sección deberías configurar así los distintos ajustes:

• Minimizar archivos CSS – Activado
• Optimizar la entrega de CSS – Activado
  • Remove Unused CSS – Activado
• Combinar archivos JavaScript – Desactivado
• Cargar archivos JavaScript de manera diferida – Activado
• Retrasar la ejecución de JavaScript – Activado, pero añadir lo siguiente – al menos – a la lista de exclusión, además de cualquier script que pudiese no funcionar con esta opción activa:

  /jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js

Medios

En esta sección vamos a activar todos los ajustes, excepto el de la carga diferida de imágenes de fondo, que ya activamos mediante los ajustes de Flatsome.

Así que activa:

• Habilitar lazy load para imágenes.
• Habilitar lazy load para iframes y vídeos
• Reemplaza el iframe de YouTube con una imagen en vista previa.
• Añadir missing image dimensions (importantísimo para las métricas web principales)

El único ajuste adicional es que añadas en al caja de imágenes o iframes a excluir del lazy load el nombre de la imagen del logotipo o cualquier imagen que aparezca siempre en la cabecera de tu web, así como de cualquier iframe que esté en el LCP.

Precargar

En esta sección no debes activar ninguna de sus optimizaciones, es mejor que las gestione Flatsome desde los ajustes propios de rendimiento.

Solo debes plantearte, si fuese necesario, precargar recursos específicos de peticiones de DNS y/o fuentes, que use tu web en concreto en todas las páginas.

Reglas avanzadas (de caché)

En esta sección debes excluir de caché tanto las páginas de carrito, finalizar compra y cuenta de los usuarios como las cookies habituales de WooCommerce durante el proceso de compra.

Para ello, en la sección de nunca poner en caché estas URLs, añadir – al menos – las siguientes (adaptadas a tus slugs reales, no a los del ejemplo):

/finalizar-compra/(.*)/
/carrito/(.*)/
/mi-cuenta/(.*)/

Y, en la sección de nunca poner en caché estas cookies, añadir lo siguiente:

woocommerce_items_in_cart
woocommerce_cart_hash
woocommerce_session

El resto de campos sería específico de cada web, y no hay una regla fija que funcione en la mayoría de las webs.

Base de datos

En mi experiencia siempre es mejor optimizar la base de datos desde herramientas del panel del hosting, o incluso desde PHPMyAdmin, pero puede ayudarte, al menos para borrar temporales (transients), la utilidad incluida en WP Rocket, pudiendo además programar la optimización y limpieza de la base de datos.

CDN

Esta sección solo deberás cumplimentarla en caso de servir archivos desde una CDN, algo que como es muy diferente según la CDN me permitirás no especificar nada al respecto.

Hearbeat

La funcionalidad heartbeat de WordPress es conveniente desactivarla casi siempre, y aquí tienes los ajustes para conseguirlo fácilmente. Mi consejo es configurarlo así:

• Controlar heartbeat – Activado
  • Comportamiento en backend – Desactivar
  • Comportamiento en el editor de entradas – Desactivar
  • Comportamiento en frontend – Desactivar

Únicamente en el caso de que haya edición simultánea de productos y pedidos deberías cambiar los ajustes de Desactivar a Reducir actividad.

Add-On

En esta sección de ajustes hay varias cosas que puedes aplicar para mejorar el rendimiento de tu web con Flatsome.

WebP compatibility

Si subes tus imágenes en formato WebP o las conviertes usando algún plugin, es conveniente activar esta optimización, para que WP Rocket cree archivos separados de caché para este formato de archivos de imagen.

No hay que configurar nada, solo activarlo.

CloudFlare

Aquí puedes configurar tu web para que aplique los ajustes óptimos para WordPress de CloudFlare, si sirves tu contenido a través de esta CDN.

En la misma sección se explica dónde puedes obtener las dos claves API necesarias para configurarlo, y es muy fácil.

Sucuri

Si utilizas el servicio de seguridad de Sucuri con este complemento puedes sincronizar tu caché con la suya.

Consejos finales

Lo que he compartido aquí son una serie de ajustes genéricos, que he comprobado que funcionan muy bien en la mayoría de webs que usan el tema Flatsome en combinación con el plugin de optimizaciones y caché WP Rocket.

Ahora bien, debes ser consciente de que son eso, ajustes genéricos, con sus respectivas explicaciones, para que entiendas su objetivo, y para que a partir de aquí, los apliques de la manera más óptima en tu web.

Si algo he aprendido es que no hay un plugin de optimizaciones perfecto, ni mucho menos una configuración perfecta, sino ajustes que «casi siempre» funcionan bien, como mucho. Plugins como WP Rocket son herramientas complejas, y potentes, que pueden ayudarte a optimizar tu web WordPress, pero siempre teniendo presente que cada web es diferente, y que deberás adaptar su configuración a lo que mejor funcione en cada web en particular.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!