Tutorial del plugin LiteSpeed Cache: configuración paso a paso

En esta guía vamos a ver un tutorial del plugin LiteSpeed Cache, configurándolo paso a paso y con capturas bien claras. Éste no es solo uno de los mejores plugins de caché de WordPress sino que es de los pocos gratuitos que nos permiten hacer ajustes bastante avanzados.

Así mismo, recuerda hacer un backup antes de optimizar tu sitio web.

¿Qué es LiteSpeed Cache?

LiteSpeed Cache es un plugin de caché para WordPress que ofrece una amplia gama de herramientas para optimizar la velocidad y el rendimiento de tu sitio web.

Diferencia entre el plugin LiteSpeed caché y Litespeed web server

Importante comentar aquí la diferencia entre el propio plugin de LiteSpeed caché y el servidor Litespeed web server.

LiteSpeed Cache es un plugin que optimiza la velocidad en WordPress mediante caché y optimización de recursos, mientras que LiteSpeed Web Server es un servidor de alto rendimiento que mejora la eficiencia y manejo de tráfico a nivel de servidor.

Así pues, aunque LiteSpeed Cache puede funcionar en otros servidores, su rendimiento es máximo en combinación con LiteSpeed Web Server.

Dicho esto, puedes utilizar este plugin sobre otro tipo de servidores correctamente. Y es que, como dice el propio Álvaro Fontela, salvo que tu web tenga millones de visitas al día, la diferencia es mínima. Ahora, en una web con muchísima tráfico sí es cierto que va a funcionar mejor el plugin de LiteSpeed Cache con LiteSpeed Web Server, que si tenemos WP Rocket.

Instalación de LiteSpeed cache

Para instalar esta herramienta, camos al repositorio de plugins desde el panel de administración de WordPress > Plugins > Añadir nuevo plugin y buscamos el llamado LiteSpeed Cache. Tras ello, lo instalamos y activamos.

Comentar en este punto, que a diferencia de otros plugins, en el momento que hemos activado nuestro plugin ya hemos activado el sistema de caché. Ahora lo que viene es lo bueno, la optimización de los recursos de nuestro sitio web.

Vamos con ello.

Dashboard y preajustes

Nada más instalar este plugin de caché para WordPress, podemos acceder a su panel central desde LiteSpeed Cache > Dashboard.

No obstante, en lo que yo quiero que te centres es en los presets o preajustes que ofrece este plugin. Y es que, con un solo clic podemos aplicar una serie de configuraciones de WPO en nuestro sitio.

¿Y qué hace esta historia? Pues bien, como ves arriba, aquí tenemos 5 posibles configuraciones (esencial, básica, avanzada, agresiva y extrema) con la que podemos mejorar la velocidad de carga de nuestra web.

Claro, puestos a elegir, pues escogemos la extrema, que será la mejor sobre el papel. Pero lo cierto es que muy probablemente nos carguemos la web y tendrás que crear varias excepciones, entre otras acciones, para que te funcione la web.

Así pues, lo que vamos a hacer es activar la opción recomendada y, acto seguido, vamos a ver los ajustes que yo hago para adaptarlo a mis proyectos.

Configuración general de LiteSpeed cache

En la configuración general, yo desactivo las actualizaciones automáticas ya que alguna vez algún plugin o tema se me ha actualizado solo y me ha desconfigurado algún ajuste.

Configuración de caché de LiteSpeed cache

En la sección de caché de WordPress, mantengo todas las opciones de habilitadas salvo la última ya que yo no ofrezco una versión de móvil diferente a la de desktop. Me explico, esta opción es util si tienes una versión de tu web exclusiva para smartphones, como AMP, (lo explico en mayor detalle en este artículo).

¿Que pasa? que actualmente los temas son responsive y no necesitamos tener una versión específica para smartphone y, por lo tanto, tampoco necesitamos un caché específico para móvil.

Ante la duda, no lo actives ya que probablemente, no tendrás una versión de smartphone.

En lo que a la pestaña de TTL se refiere, esto no es más que los tiempos de expiración de la caché, lo cual no hace falta que toques ya que lo que viene por defecto está bien. Solo te aconsejo aumentarlo si tienes una web que no vaya a cambiar para nada en el tiempo.

Así mismo, en la pestaña de Browser debemos asegurarnos de que la Caché del navegador este activada (esto lo que hace es añadir al archivo .htaccess una serie de líneas con las que hacer caché del navegador de los principales recursos).

Finalmente, vamos a la pestaña de ESI Settings, lo cual activamos para cachear la barra de administrador y el formulario de comentarios.

Configuración de CDN de LiteSpeed cache

Vamos a la sección de CDN, y aquí comentarte que puedes configurar la API de Cloudflare para poder vaciar su caché directamente desde el plugin.

Configuración de imágenes de LiteSpeed cache

La optimización de imágenes la hago con Imagify, el cual es un plugin de específico y muy bueno para esta tarea. Ahora, si no lo quieres utilizar, puedes dejar la configuración de LiteSpeed cache tal cual está para que optimize tus imágenes.

En caso de hacerlo con este plugin, lo que sí te recomiendo es activar la opción de que te genere la versión WebP, que es la que te sugiere Google PageSpeed, al ser un formato de nueva generación.

Configuración de recursos de LiteSpeed cache

Vamos ahora a la sección que más miga tiene, la de Page Optimización. En esta sección vamos a:

• Optimizar el CSS
• Optimizar el JavaScript
• Optimizar el HTML
• Optimizar los medios

Optimización de CSS

De entrada, yo desmarco la minificación del CSS ya que los temas y plugins que uso ya minifican estos archivos. Para comprobar si tus archivos CSS ya han sido minificados puedes activar la inspección (haciendo clic en el botón secundario o directamente con la tecla F12) y seleccionar la pestaña de Red o Network. Para que se vea correctamente, te aconsejo seleccionar la opción de Disable caché.

Como ves arriba, mis archivos tienen la coletilla ".min", es decir, se han creado una versión minificada de los mismos y no hace falta habilitarlo.

En tu caso, si no estas seguro o no eres capaz de verlo, puedes activarlo y revisar tu web. En caso de que te de problemas de visualización, desactívalo.

Por otro lado, y aunque está desactivado, no combines los archivos CSS (ni los JavaScript). Esto se hacía ante de usar la tecnología HTTP/2, para evitar hacer muchas peticiones en la carga de la web, pero actualmente, descargamos múltiples archivos simultáneamente a través de una sola conexión, por lo que ya no es necesario.

Finalmente, en lo que a la carga de tipografías se refiere, aplica el font-display SWAP a tus fuentes (lo encontrarás abajo del todo).

Optimización de JS

En lo que a javascript se refiere, vuelta a lo mismo, asegúrate de que tus archivos JS no hayan sido ya minificados antes de activar esta opción.

Y de igual forma, como te he explicado anteriormente, tampoco combines los archivos JavaScript en uno solo.

Vamos ahora con la carga de estos archivos. Y lo cierto es que esto es importante de cara a Google PageSpeed ya que estos archivos son pesados (aunque de cara al UX tampoco afectan tanto).

En este aspecto podemos:

Aquí si tengo que decir que me gusta mucho más Perfmatters ya que no te hace elegir entre un Defer y un Delay. Es decir, con este otro plugin, puedes aplicar un Defer a una serie de archivos para que se carguen asíncronamente y a otros más críticos aplicarles un Delay para que no se ejecuten hasta que el usuario haga una acción o pasen una serie de segundos.

Aquí podríamos aplicar la opción de Delay y luego configurar excepciones desde la pestaña de Tunning, pero me parece bastante complejo por lo que te aconsejo simplemente aplicar el Delay y si ves que tu web deja de funcionar bien, identifiques ahí el archivo js que no está funcionando bien y apliques una excepción.

Optimización de HTML

En lo que a la optimización de HTML se refiere, podemos minifcar de nuevo este código si no lo tenemos ya minificado. De igual forma, podemos activar lo siguiente:

Esto yo lo aplico en los scripts de Google AdSense para optimizar los tiempos de carga en WordPress.

Media Settings

En la sección de los archivos de medios podemos aplicar un lazy load tanto en imágenes como en iframes. Esto lo que hace es retrasar la carga de las imágenes hasta que sean visibles por el usuario.

En lo que a los iframes se refiere, su retraso es especialmente útil si tenemos webs de tipo directorio por la gran cantidad de mapas que cargamos de Google Maps. No obstante, aquí quiero comentarte que nada mas aplicarlo, borres la caché y confirmar que se sigan cargando los iframes de WordPress, ya que en algunos casos no aparecen y debemos deshabilitarlo.

Así mismo, también podemos habilitar la generación de tamaños que falten a nuestras imágenes para ayudar a solucionar errores de CLS en Google Page Speed.

Configuración de base de datos de LiteSpeed cache

En lo que a la base de datos de WordPress se refiere, desde esta sección podemos limpiarla aunque debemos de tener muchísimo cuidado ya que la podemos liar muy parda. Si no tienes muchos conocimientos, solo te aconsejo borrar periódicamente las revisiones y los comentarios.

Otras herramientas de LiteSpeed cache

Esta sección no es necesaria de cara a la optimización de nuestra web, pero sí merece la pena comentarla, aunque sea por encima ya que desde aquí podemos hacer cosas bastante interesantes.

De entrada, podemos especificar categorías, IDs de entradas, etiquetas o URL para purgar su contenido.

También podemos exportar nuestros settings para importarlos en otra web. Esto está bien porque nos permite plicar la misma configuración en diferentes proyectos. Aunque, una vez más, me gustaría recordarte el hecho de que cada web es un mundo y debes revisarlo.

Así mismo, también podemos editar nuestro archivo .Htaccess, tal y como hacemos desde plugins como Yoast o Rankmath.