LiteSpeed Cache: El plugin de caché para WordPress más rápido

LiteSpeed Cache para WordPress

En este tutorial te mostraremos cómo instalar y configurar el plugin LiteSpeed Cache para WordPress. Este plugin hará que tu página web cargue mucho más rápido en nuestros servidores configurados con LiteSpeed.

Todas las pruebas que hemos realizado, dan al plugin LiteSpeed Cache para WordPress como vencedor frente a otros plugins más conocidos: WP Supercache, WP Rocket, WP Fastest Cache y W3 Total Cache.

ATENCIÓN: Si tu servidor web no es LiteSpeed ni eres cliente nuestro, este plugin no tendrá todas las funcionalidades habilitadas.

En Tropical Server todos los hosting compartidos (Joomla, WordPress, PrestaShop y Moodle) usan LiteSpeed como servidor web.

1. Comprobación para ver si el plugin está ya instalado.

En los sitios WordPress de nuestros clientes puede ser que el Plugin LiteSpeed Cache ya esté instalado, bien porque el cliente lo ha instalado por su cuenta o bien porque lo hemos instalado nosotros con anterioridad.

Para saber si el plugin ya se encuentra instalado en tu web, ve a la administración de WordPress y revisa que no está disponible la opción «LiteSpeed Cache» en la barra de opciones de WordPress.

2. Instalación del plugin LiteSpeed Cache para WordPress

Si no tienes instalado el plugin, posiblemente es porque ya tienes configurado otro plugin de Caché distinto a éste.

Revisa si tienes algún otro tipo de caché instalado en tu WordPress (WP Supercache, W3 Total Cache, WP Rocket, etc). y desactívalo, ¡ no lo elimines !

(OJO: Si por cualquier motivo quieres activarlo de nuevo más tarde de esta forma no se perderán las posibles configuraciones que tengas dadas de alta).

Ahora vamos a proceder a instalar el plugin propiamente dicho. Para ello, iremos a la opción del menú «Plugin» – «Añadir nuevo» – Y en buscar plugins escribiremos «LiteSpeed Cache» – «Instalar ahora»

3. Configuración del Plugin

Los parámetros del plugin de caché son muy fáciles de configurar. Te mostramos en las siguientes capturas cómo debes definirlos.

IMPORTANTE: Las configuraciones de optimización del plugin varían dependiendo del tema de WordPress y plugins que uses. Por este motivo, no hay una configuración estándar del plugin. Debes hacer pruebas de ensayo y error hasta que consigas habilitar el mayor número de optimizaciones posibles sin afectar al rendimiento y sobre todo a la visualización de tu página web.

4. Gestionar – Gestión de Caché de LiteSpeed

Es la primera de las opciones del plugin. En ella podrás hacer una purga completa de las páginas y archivos cacheados así como optimizar y limpiar la base de datos de WordPress. También puedes comprobar la conexión con el CDN de Cloudflare.

 

 

4.1 Purgar

Desde esta sección puedes «purgar» todos los contenidos generados ya por el plugin.

Entre ellos están: la página de portada, todas las páginas, las páginas de error, los archivos css y js minificados o vaciar la caché entera.

También puedes purgar categorías de forma individual. Ver la siguiente captura:

 

4.2 Optimizador de base de datos

Desde aquí puedes optimizar las tablas de las bases de datos. Eliminar los borradores usados en las entradas o que se encuentran en la papelera.

También todos los comentarios de spam del sitio y los archivos css y js combinados por el plugin.

 

 

4.3 CDN

La pestaña de CDN se usa para comunicarte con la API de desarrolllo del CDN que estés usando.

Desde aquí podrás comprobar si estás conectado correctamente.

También tienes la opción de purgar la caché directamente del CDN.

 

 

5. Ajustes

La sección de ajustes es la sección principal del plugin y donde podrás optimizar todo el sitio con las diferentes opciones que el plugin incorpora.

Por defecto esta sección no muestra todas las opciones.

Para poder verlas deberás pinchar en la opción «Advanced View».

 

 

5.1 Opciones Generales

En la pestaña general podrás activar o desactivar la caché y definirás el tiempo que tus contenidos permanecerán cacheados. Recomendamos usar un tiempo amplio para optimizar al máximo la velocidad de carga de tu sitio.

Las opciones que vienen por defecto son las opciones recomendadas. Aunque puedes aumentarlas si quieres.

Por ejemplo, los valores 604800 segundos los puedes cambiar por 1 año (31536000 segundos). Esto hará que tu sitio esté prácticamente siempre cacheado. No es recomendable poner más de un año.

 

 

5.2 Caché

Ajustes para controlar mejor la caché y qué partes del sitio quieres cachear.

Si tienes un sitio con una versión móvil independiente deberás activar la opción «Caché Móvil». Pero seguramente en tu caso y en del 95% de los usuarios estaráis usando un diseño responsive por lo que no hace falta habilitar esta opción.

Recomendamos usar las opciones tal y como aparecen en la siguiente imagen:

 

 

 

5.3 Purgar

Cuando realizas un cambio en tu sitio web, la caché debe ser refrescada para que recoja los cambios en los contenidos, imágenes, etc nuevos que has introducido. Desde esta sección controlarás que la caché se purgue automáticamente al realizar cualquier cambio en tu web.

La opción recomendada es purgar todo al actualizar ya que algunas veces incorporaremos archivos o documentos externos que pueden influir en otras páginas y necesitan ser re-cacheados.

También podrás programar una purga a una hora determinada.

 

 

 

5.4 Excluir

Reglas de exclusiones. Puedes excluir de la caché ciertos patrones entre los que se encuentran:

• Forzar o excluir Cadenas (/directorio/mipagina?aa=bb)
• Cadenas de consulta
• Categorías
• Etiquetas
• Cookies
• Agentes de usuario
• Perfiles

 

 

 

5.5 Optimizar

Cada tema de WordPress y cada plugin requiere que pruebes varias combinaciones en las optimizaciones hasta conseguir la máxima optimización de tu página pero que no se vea afectada la visualización ni se rompa el diseño.

En esta sección deberás ir probando mediante ensayo y error las opciones que puedes activar para tu sitio.

De esta manera, deberás ir activando opciones, limpiar la caché del plugin y visitar tu web en otro navegador en modo incógnito sin estar logueado como administrador para comprobar que no se ha roto ningún elemento de tu web: sliders, imágenes, secciones, etc.

Puedes habilitar las reglas css críticas que te ayudarán a mejorar los resultados de tests de velocidad como Pingdom, GTMetrix o Google PageSpeed.

Si vas a usar esta opción, deberás activar el parámetro llamado «Cargar CSS Asíncronamente» y «Generate Critial CSS in background».

Una optimización estándar o al menos que te sirva como punto de partida podría ser la siguiente. Si al activarla visitas tu web sin estar logueado y algún elemento lo ves descolocado deberás ir anulando ajustes:

 

 

5.6 Ajustar

Puedes configurar para que los archivos optimizados que se combinan carguen antes que otros archivos .css o .js

También puedes excluir archivos css y js si notas que el diseño no es el correcto.

Cargas las fuentes de Google de manera asíncrona. Esto mejora la carga de las fuentes externas de Google.

Eliminar los emojis de WordPress.

 

 

5.7 Medios

Puedes mejorar la carga de las imágenes habilitando algunas opciones de esta sección:

• Lazy Load: Para cargar las imágenes solo cuando entren en la ventana de visualización del visitante. No antes. Esta opción puede dar algunos problemas, si la habilitas deberás cerciorarte que las imágenes cargan correctamente.
• Reemplazo de imágenes WEBP. Esta opción es muy interesante porque el plugin de caché va a regenerar todas las imágenes que tengas en WordPress y las va a convertir a formato .webp que es un formato que reduce el tamaño de una imagen .jpg en un 30% sin perder calidad.
• Solo solicitar WEBP. Si quieres que todas las imágenes de tu sitio estén en formato .webp.

En el punto 7 de este manual hablaremos más sobre la optimización de imágenes.

 

 

5.8 CDN

Puedes activar tu CDN desde esta sección. Incluyendo Cloudflare.

 

 

5.9 ESI

Los ajustes de ESI se utilizan para anular la caché en ciertas partes de tu página que son dinámicas y que cambian con frecuencia.

Por ejemplo si tienes un widget típico de los últimos mensajes del foro, puedes activar ESI desde aquí e ir a la opción de Widgets de WordPress y anular el que quieras no cachear a través de una nueva opción que te aparecerá en el widget.

 

 

 

5.10 Avanzado

Estos ajustes más avanzados te permiten activar la cache Memcached si está habilitada en el servidor.

También puedes activar la caché del navegador (muy recomendado).

Hay otras opciones avanzadas que son opcionales como Instant click, que te permite pre-cargar las páginas que se enlazan en cada parte de tu web.

 

 

5.11 Depurar

El modo depuración te permite anular desde un solo botón toda la caché, activar un registro de depuración para detectar posibles errores.

 

 

5.12 Crawler

El crawler es una utilidad para pre-cachear todas las urls de tu sitio. En nuestros servidores compartidos esta opción NO está disponible, pero no es un parámetro que afecte al rendimiento.

 

 

6. Editar .htaccess

Puedes editar las líneas de tu .htaccess a través de este editor en línea.

 

7. Optimización de imágenes de LiteSpeed Cache

Una de las características que destacan en este plugin es la posibilidad de optimizar todas las imágenes de tu sitio WordPress sin usar ningún plugin adicional.

Funciona de la siguiente manera:

1) En primer lugar debes probar que tienes comunicación con los servidores de LiteSpeed para poder optimizar tus imágenes. Para ello debes pinchar en la opción «Update Status«.

2) Una vez sepas que tienes conexión con el servidor, puedes ir enviando bloques de imágenes periódicamente (no se optimizan todas a la vez) pinchando en el botón «Enviar solicitud de optimización«. Este proceso tardará unos minutos en completarse ya que las imágenes se envían a varios servidor de LiteSpeed para que las optimicen y las traigan de vuelta.

Si en la opción de medios, elegiste la opción de convertir las imágenes a formato .webp, en este proceso de optimización también se produce la conversión de formato.

Debes tener en cuenta que si tienes muchas imágenes en tu WordPress, este proceso puede tardan en completarse ya que deberás ir enviando bloques de imágenes periódicamente y esperar a que se bajen optimizadas.

WordPress genera de una misma imagen muchas otras en diferentes tamaños por lo que puedes tener miles de imágenes perfectamente en tu web.

 

 

8. Crawler de LiteSpeed Cache

Esta opción es para ejecutar el crawler. Como hemos comentado anteriormente no está disponible para nuestros servidores compartidos.

 

 

9. Informe

El informe de LiteSpeed es la información y características concretas que tiene tu instalación de WordPress en el caso de que haya algún fallo y haya que enviar la información del entorno a los técnicos de LiteSpeed para que puedan tratar el problema de mejor forma.

 

 

10. Import / Export

Puedes exportar las preferencias guardadas en el plugin para luego poder importarla en otros sitios.

 

 

11. Comprobación de que LiteSpeed Cache para WordPress está activada

Para comprobar que la caché está correctamente activada, debemos ver las cabeceras HTTP de nuestra página. Estas nos indican información importante sobre nuestra web.

Debemos asegurarnos que en la cabecera encontramos la opción X-LiteSpeed-Cache: hit

Esto nos indica que la caché está correctamente activada. Si aparece la opción como miss es que la caché está activada pero aún esa página no ha sido cacheada. Deberemos revisitar la página desde nuestro navegador para forzar la generación de la caché. Si aparece la opción no-cache u otras opciones, es que la caché está mal configurada.

En este caso contacta con nuestro Dpto. de Soporte para revisar tu caso.

11.1 Comprobación a través de una url externa

Es la forma más fácil y cómoda. Podemos usar alguna url que nos facilite ver las cabeceras HTTP de nuestra página.

Además, al ser un análisis externo, no tendremos problemas de ocultación de caché porque estemos logueados en la administración de WordPress.

Un ejemplo que usamos es la siguiente: https://tools.keycdn.com/curl.

 

11.2 Ver las cabeceras HTTP en Google Chrome

En Chrome: Inspeccionar – Network – Actualizamos la página en el navegador – En la columna izquierda pinchamos en la dirección url de la página que estamos visitando y a la derecha nos aparecerán los datos de la cabecera.

IMPORTANTE: No podemos estar logueados en la administración de WordPress ya que la caché está desactivada cuando estamos logueados. Deberemos cerrar la sesión antes de la comprobación.

 

11.3 Ver las cabeceras HTTP en Firefox

En Firefox: Inspeccionar Elemento – Red – Actualizamos la página – Pinchamos en la url que estamos visitando y nos aparecen los datos de la cabecera.

IMPORTANTE: No podemos estar logueados en la administración de WordPress ya que la caché está desactivada cuando estamos logueados. Deberemos cerrar la sesión antes de la comprobación.

 

11.4 Ver las cabeceras a través de una extensión del navegador

Por último, podemos instalar alguna extensión en el navegador para poder ver las cabeceras de cualquier página de forma más rápida. Una de ellas puede ser «HTTP Spy» para Google Chrome.

Eso es todo. Tu LiteSpeed Cache para WordPress estará correctamente configurado y funcionando. Ya no querrás usar otro plugin de caché 😉