LiteSpeed Cache – Optimizar el RENDIMIENTO de WORDPRESS

LiteSpeed Cache es un plugin de WordPress que sirve para acelerar la velocidad de carga de una página WEB construida con este popular CMS, algo imprescindible para que Google y el resto de buscadores puntúen mejor tu página WEB y se posicione mejor en los resultados de las búsquedas para recibir más visitas.

Y es que Google penaliza a las páginas WEB que cargan con lentitud, al considerar que es una mala experiencia para el usuario final. Con LiteSpeed Cache harás que tu página cargue más rápida. Pero veamos cómo lo tenemos que configurar para hacer esto posible.

¿Por qué he elegido LiteSpeed Cache?

Hasta hace no mucho siempre he utilizado WP Super Cache, otro popular plugin que sirve para acelerar páginas de WordPress pero, finalmente, me he decantado por LiteSpeed Cache por varias razones:

  • Mi proveedor de hosting ProfesionalHosting (ver opinión), utiliza Litespeed como servidor WEB.
  • Ahorro la instalación de varios plugins que mejoran el rendimiento de diferentes aspectos de WordPress. LiteSpeed es un todo en uno:
    • Cacheo de objetos
    • Minimizar ficheros CSS
    • Minimizar ficheros JavaScript (JS)
    • Retrasar la carga de ficheros CSS
    • Retrasar la carga de ficheros JS (Defer)
    • Unificación de ficheros CSS
    • Unificación de ficheros JS
    • Optimización de imágenes
    • Resolución de DNS antes de cargar la WEB (DNS Prefetch)
    • Uso de CDNs para el uso de una caché externa
    • Es la opción recomendada por mi proveedor de hosting
  • Cuantos menos plugins instalemos en WordPress más ágil será nuestra WEB porque consumirá menos recursos de CPU y memoria y cargará antes.
  • Una vez configurado el plugin, puedo exportar la configuración al resto de páginas que administro.

Una buena práctica para comprobar que realmente has ganado velocidad es testearla antes y después de configurar el plugin. Las más utilizadas son:

Con ellas podrás conocer los puntos en los que puedes mejorar la velocidad de tu página (reducción de imágenes, precarga de scripts, etc.).

Google Page Speed - Puntuacion para puerto53.com

Tutorial de Configuración de LiteSpeed Cache

En este vídeo de 21 minutos te explican, paso a paso, cómo configurar este plugin, por si te es más ameno que leer todo este post. No obstante, lo voy a explicar igualmente y hay algunas cosas que he configurado diferente a como lo explican en el vídeo.

Configurción avazada de LiteSpeed Cache

A continuación, explicaré cómo lo he configurado yo.

Menú principal de LiteSpeed Cache en WordPress

Podemos ir a cada una de las opciones principales de configuración de LiteSpeed Cache desde el menú de administración de WordPress.

Menu principal del plugin de WordPress LiteSpeed Cache
Menú principal del plugin de WordPress de cacheo de objetos LiteSpeed Cache

Opciones Generales de LiteSpeed Cache

En este caso las dejo todas por defecto, ya que me parecen correctas:

  • Actualizar automáticamente: ON
  • Clave del dominio: Como en mi caso utilizo la CDN de Keycdn, no configuro este campo.
  • Modo invitado: ON. Mejora el tiempo de carga para los usuarios que entran en la WEB por primera vez, evitando leer cookies, buscar variaciones en la caché y procesando los recursos ESI.
  • Optimización para invitados: ON. Una optimización más agresiva para aquellos que nos visitan por primera vez (optimización de imágenes y código).
  • IP del servidor: En mi caso no sirve porque tengo IP dinámica.
  • Notificaciones: ON. Lo puedes habilitar si quieres recibir notificaciones de Litespeed, como que hay una nueva versión, por ejemplo.
Opciones generales del plugin LiteSpeed Cache de WordPress

Caché

Cache

  • Habilitar caché: ON. Esta opción es importantísima tenerla activada. Cargar una página directamente desde la memoria caché es mucho más rápido que hacerlo calculando todo el proceso necesario para visualizarla cada vez que el usuario la visita.
  • Cachear usuarios con sesión iniciada: OFF. En mi caso, al tratarse de un blog, no tengo usuarios que inicien sesión.
  • Cachear comentaristas: OFF. Crea una nueva caché independiente para los usuarios que dejan un comentario que aún está pendiente. Esta opción consume recursos y puede ser perjudicial si recibes muchos comentarios.
  • Cachear API REST: ON. Esta opción es útil para muchos temas, plugins e, incluso, para el editor de WordPress.
  • Cachear página de acceso: ON. La página de acceso a WordPress es de las más visitadas. Ahorraremos recursos si la cacheamos.
  • Cachear favicon.ico: ON. Se refiere al cacheo del pequeño logo que aparece en la pestaña del navegador.
  • Cachear recursos de PHP: ON. Cachea archivos PHP estáticos que carga tu tema de WordPress.
  • Cache móvil: Lo activaremos si servimos un contenido diferente cuando el usuario visita la página desde el móvil. Por ejemplo, páginas AMP, CCSS o UCSS.
  • URIs cacheadas privadamente: OFF. No es necesario para la mayoría de los sitos WEB. La configuración de los «usuarios registrados en caché», ya almacena en caché las URLs privadas.
  • Ignorar cadenas de consulta: Algunas URLs se cargan a través de una consulta previa. Por ejemplo, cargamos el fichero de estilo según su versión, o hacemos seguimiento de una campaña de publicidad según su ID, etc. Si ignoramos las cadenas de consulta, tendremos que hacer un purgado de la caché cuando haya una actualización de la consulta. Por ejemplo, un tema nuevo incorpora una nueva versión de un fichero de estilos. Ignorarlas, mejora el rendimiento de la WEB.
fbclid
gclid
utm*
_ga
?ver=
Opciones de configuracion de cache del plugin LiteSpeedCache

TTL

TTL viene del inglés Time To Live y especifica el tiempo de cacheo. Los tiempos configurados por defecto me parecen correctos pero siempre los podemos cambiar manualmente si lo necesitamos.

Litespeed cache - Configuración de TTL

Vaciar

En este menú configuraremos las políticas de vaciado de caché. Qué páginas o objetos queremos vaciar y cuáles no. Lo dejo todo por defecto ya que, en mi caso, lo que suelo hacer es vaciar la caché siempre que actualizo WordPress o algún plugin para comprobar que no se ha roto nada.

  • Vaciar todo al actualizar: Vacía toda la caché de WordPress cuando lo actualizamos (core, temas, plugins…).
  • Servir contenido rancio: OFF. Cuando está activado, se sirve la copia obsoleta más reciente si la nueva versión de la página todavía no se ha almacenado en caché. Esta opción consume recursos y puede mostrar un contenido diferente al que deseamos.
  • URLs de vaciado programado: Si lo deseamos, podemos especificar que ciertas URLs se eliminen de caché a una hora programada.
Litespeed cache - Configuración del vaciado de la cache

Excluir

En este menú podremos configurar ciertas URLs para que LiteSpeed Cache no las tome en cuenta a la hora de cachearlas.

ESI (Edge Side Includes)

Lo tengo desactivado, que es la opción por defecto, ya que no utilizo páginas dinámicas generalmente.

  Insertar enlaces internos automáticamente en Wordpress por palabra clave con el plugin SEO Smart Links

Objetos

Podemos utilizar esta opción si tenemos configurado un servidor de caché independiente para cachear los objetos, como puede ser Memcached o Redis. En un blog de WordPress básico no utilizaremos esta opción. Normalmente, los proveedores de hosting habilitan esta opción en servidores VPS o dedicados administrados por ellos.

Sirve para cachear objetos de la base de datos y mejorar su rendimiento.

Las opciones por defecto parecen correctas.

Navegador

Se utiliza para cachear objetos en el lado del navegador cliente, es decir, del usuario que se conecta a nuestra WEB. Sirve para que cuando el usuario nos vuelva a visitar, cargue los objetos cacheados automáticamente desde su navegador local de su PC y evite consumir recursos en nuestro servidor WEB.

Por supuesto, tendremos que configurar un TTL prudencial para que vea nuestra WEB actualizada con los últimos cambios.

Opciones de caché del navegador del plugin de WordPress LiteSpeed Cache

Avanzado

Dejo configuradas las opciones por defecto.

  • Cookie de acceso: Es un mecanismo de seguridad para la autentificación de usuarios. No la utilizo en mi blog.
  • Mejorar compatibilidad HTTP/HTTPS: OFF. Sólo la utilizaremos si estamos utilizando HTTP y HTTPS.
  • Clic instantáneo: ON. Cuando los usuarios pasen el cursor del ratón sobre un enlace, éste se descargará automáticamente en segundo plano.
Opciones avanzadas de cacheo de Litespeed cache

CDN

En mi caso utilizo la CDN de Keycdn. Echa un vistazo al enlace anterior para aprender a configurarla junto con Litespeed Cache.

Si no sabes lo que es una CDN, básicamente se trata de una serie de servidores distribuidos en diferentes zonas geográficas del mundo, encargados de cachear nuestra página WEB para que un usuario alejado de nuestro servidor no tenga que viajar hacia nuestro servidor central sino hacia el servidor de caché más próximo a su ubicación, con el objetivo de mejorar los tiempos de carga desde su lugar.

Configuracion de la CDN de Keycdn en el plugin Litespeed cache de WordPress

Optimización de imágenes

En las versiones anteriores de LiteSpeed Cache teníamos muchas opciones de configuración, entre las que destacan:

  • Cron de petición automática: ON. Programación automática de la optimización de imágenes.
  • Optimizar imágenes originales: ON
  • Eliminar las copias de seguridad: OFF. Si las eliminamos, no podremos recuperar la imagen original.
  • Optimizar sin pérdida: OFF. Si perdemos un poquito de calidad en la imagen optimizada, el usuario no se dará cuenta pero el fichero pesará menos y, por lo tanto, la imagen cargará antes.
  • Conservar los datos EXIF/XMP: OFF. Normalmente, no nos interesa la información interna de la foto sobre su composición. Si eliminamos estos datos, ocupará menos espacio.
  • Crear versiones WebP: El formato WEBP ocupa menos espacio.
  • Reemplazo de imágenes WebP: ON
  • Retrasar la carga de imágenes: También conocido como Lazy Load es uno de los puntos que suelen aparecer como causantes de lentitud en la carga de una página WEB. Si activamos esta opción, las imágenes se irán cargando conforme vayan apareciendo en la pantalla en vez de cargarse todas a la vez. Es muy recomendable activarla para mejorar la puntuación de PageSpeed Insights.
  • Marcador de posición adaptable: Básicamente, mejoraremos la experiencia del usuario que nos está leyendo cuando vayan cargando las imágenes para que el contenido no se mueva de posición.
  Configuración de las Notificaciones Push en Wordpress

Sin embargo, todas estas opciones han desaparecido de las versiones más modernas del plugin, ya que se realizan de forma automática.

Lo único que tenemos que saber, es que LiteSpeed Cache se encarga de optimizar el tamaño y la compresión de nuestras imágenes para que carguen más rápido.

Optimizacion de imagenes con el plugin Litespeed cache de WordPress

Optimización de la página

AVISO: Todas estas opciones podrían estropear tu página WEB, así que lo que tienes que hacer para PROBARLAS es: Activar la opción, eliminar la caché, cargar tu página y si ves algún error o problema de funcionamiento, desactivarla y volver a eliminar la caché.

Lo normal es que no ocurra nada pero tienes que probar cada una de ellas cada vez que las actives para comprobar el buen funcionamiento de tu página.

Ajustes de CSS

  • Minificar CSS: Esta opción la tengo activa en todas mis WEBs tras comprobar que no se ha roto nada. Lo que hace es reducir el código fuente de los ficheros CSS para que ocupe menos espacio (saltos de página, espacios en blanco…). De esta manera, reducimos el tamaño de nuestra WEB y ahorramos transferencia de datos por red, lo que significa mayor velocidad de carga.
  • Combinar CSS: Esta opción también la tengo activa siempre. Lo que hace es juntar todos los ficheros CSS que tenemos en un único fichero, reduciendo el número de llamadas.
  • Generar UCSS: Usar solamente si hemos activado «combinar css». Esta opción elimina CSS que no se usa.
  • CSS Integrado: Sólo habilitar si hemos activado «generar CSS». Creará un fichero cacheado independiente y no incrementará el HTML final.
  • Combinación de CSS externo e integrado: Sólo habilitar si «combinar CSS» está habilitado.
  • Cargar CSS asíncronamente: Debemos probarlo para comprobar que no afecta al diseño de nuestra página ni a su velocidad.
  • CCSS por URL: OFF, exepto si generamos distintos ficheros CSS por tipo de contenido.
  • Biblioteca de CSS integrado asíncrono: Deberemos probarlo.
  • Optimización de visualización de fuentes: Por defecto.
Litespeed cache - Optimizacion de CSS

Ajustes de JS (Javascript)

Es lo mismo que acabamos de ver con CSS pero para ficheros JS o Javascript.

  • JS Minify: Elimina caracteres innecesarios del código fuente.
  • Combinar JS: No es recomendable combinar Javascript con ficheros grandes o HTTP2.
  • Deferir carga de JS: Tendremos que testear esta opción para comprobar que nuestra WEB sigue funcionando correctamente tras el cambio.
Litespeed cache - Optimizar JS

En mi caso, he tenido que modificar el campo «Deferir carga de JS» a «Diferido» porque se me rompía el diseño de la página principal. Así que es muy importante borrar la caché y recargar la página siempre que se hace un cambio.

Ajustes HTML

  • Minificar HTML: ON. Elimina caracteres innecesarios del código HTML.
  • Prefetch DNS: Con los informes de rendimiento que saquemos de Google Page Speed u otra herramienta, obtendremos las URLs de terceros que podremos precargar. Ignorar las URLs de CDN y fonts.gstatic.com, ya que esta opción está contemplada en otro apartado de Litespeed cache.
  • Selectores HTML de carga diferida: Podremos elegir un componente de nuestra WEB para que cargue en modo diferido. Por ejemplo, la sección de comentarios.
  • Eliminar query strings: Normalmente, las páginas de WordPress muestran contenido en forma de texto, imágenes, vídeos o productos de venta que no suelen requerir de ninguna consulta a la base de datos. Una «query string» es un valor que se incrusta en la URL (método GET: https://URL?valor1=X&valor2=Y) o en un formulario dentro del contenido (método POST). Lo habitual en WordPress es no utilizar este tipo de URLs, así que podemos activar esta opción de LitleSpeed Cache.
  • Cargar Google Fonts asíncronamente: Lo importante es que el usuario pueda leer el contenido antes que el tipo de letra con el que está escrito, así que las fuentes se pueden ir cargando mientras el usuario ya está leyendo el contenido de nuestra WEB.
  • Eliminar Emojis de WordPress: Un emoji es un gráfico que ha de pintar en la pantalla el navegador que pesa un poquito más (no gran cosa) que el texto. Así que si los eliminamos, el tamaño de nuestra página será un pelín menor y cargará un poco antes.
  • Eliminar las etiquetas Noscript: OFF. Esta opción solamente se utiliza en navegadores antiguos.
Litespeed cache - Optimizacion de codigo HTML

Ajustes de medios

Todas las opciones por defecto.

  • Retrasar la carga de imágenes: ON. También conocido como «lazy load». Las imágenes se van viendo a medida que vamos haciendo scroll por la página.
Litespeed cache - Optimización de medios

Localización

  • Caché de Gravatar: Ideal cuando tenemos muchos comentarios con «gravatars».
  • Archivos de idiomas: Incluiremos los archivos Javascript de terceros que se cargan en nuestro sitio.
### Popular scripts ###
https://platform.twitter.com/widgets.js
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb25uZWN0LmZhY2Vib29rLm5ldC9lbl9VUy9mYmV2ZW50cy5qcw==
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xlLWFuYWx5dGljcy5jb20vYW5hbHl0aWNzLmpz
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xldGFnbWFuYWdlci5jb20vZ3RtLmpz
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xldGFnbWFuYWdlci5jb20vZ3RhZy9qcw==
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xldGFnc2VydmljZXMuY29tL3RhZy9qcy9ncHQuanM=
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xlb3B0aW1pemUuY29tL29wdGltaXplLmpz
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS9yZWNhcHRjaGEvYXBpLmpz
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9tYXBzLmdvb2dsZS5jb20vbWFwcy9hcGkvanM=
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9tYXBzLmdvb2dsZWFwaXMuY29tL21hcHMvYXBpL2pz
https://pagead2.googlesyndication.com/pagead/js
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4LmNsb3VkZmxhcmUuY29tLw==
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgv
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9uZXRkbmEuYm9vdHN0cmFwY2RuLmNvbS8=
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=
https://puerto53.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20v
Litespeed cache - Lozalizacion de ficheros

Base de datos

En este apartado optimizaremos el rendimiento de la base de datos, algo de lo que ya hablé en el plugin WP Optimize.

  Insertar enlaces internos automáticamente en Wordpress por palabra clave con el plugin SEO Smart Links

Litespeed cache trae, básicamente, las mismas opciones, por lo que solamente utilizaremos uno de los dos.

Litespeed cache - Limpieza de la base de datos

Para lo único que uso ya WP Optimize es para eliminar tablas de bases de datos de plugins que ya he eliminado, pues esta opción no la trae Litespeed cache.

En cuaquier caso, mi configuración es la siguiente:

  • Número máximo de revisiones: 10
  • Edad máxima de las revisiones: 0
Litespeed cache - Optimizacion de base de datos

Navegador

Busca páginas con la caché caducada y las actualiza. Esto consume recursos. Se controla a nivel de servidor y los proveedores de hosting no suelen permitir esta opción en hostings compartidos, así que la tengo desactivada.

Litespeed cache - Ajustes generales del ratreador

Borrar la caché de LiteCache Speed

Muchas veces realizamos algún cambio en WordPress pero al refrescar la página no lo vemos reflejado. Eso es porque estamos viendo la página que hay guardada en caché que todavía no está actualizada.

Si queremos ver la nueva versión, tendremos que eliminar la caché de WordPress.

En Litecache lo haremos desde el menú «Gestionar» y luego en «Vaciar la caché entera».

Borrar la cache en WordPress con el plugin LiteCache speed

¿Qué ocurre si LiteSpeed me estropea el diseño de mi WEB?

Hay algunas opciones de Litespeed que avisan de que pueden estropear el diseño de tu página WEB. Seguramente, tendrás que deshacer el cambio que hayas hecho en las que tienen que ver con Java o CSS. Luego vacia la caché de Litespeed y de tu navegador (o entrar en modo incóginito a tu web) para comprobar que has recuperado el diseño original.

Consejo: Hazte una copia de seguridad previa de toda tu WEB antes de hacer cambios importantes. Yo uso el plugin All in One WP Migration, pero hay muchos otros.

Una vez que hayas configurado LiteSpeed como quieres, puedes hacerte una copia de seguridad de la configuración del plugin desde el menú Litespeed –> Herramientas –> Importar/Exportar.

Alternativas a LiteSpeed Cache

Si por necesidad o porque estás acostumbrado a utilizar otros plugins de cacheo para WordPress, puedes utilizar estos otros:

Plugins que realizan las mismas funciones que LiteSpeed

Si no tienes LiteSpeed, puedes utilizar estos otros plugins por separado para lograr una optimización similar:

Mejora el rendimiento de WordPress con estas otras configuraciones

Compárteme

Contenido Relacionado

4 comentarios en «LiteSpeed Cache – Optimizar el RENDIMIENTO de WORDPRESS»

  1. Hola
    Este tutorial me ha ayudado bastante y te felicito, pero también a sido un poco complicado seguirlo, ya que la versión actual de LiteSpeed Caché 3.5.0.2 cambia completamente la posición de cada ajuste, además de otras características que no ofrecen las mismas funciones.. Sería de agradecer que pudieras actualizar la información, aunque lo básico me ha servido de mucha ayuda.
    Muchas gracias!

    Responder
  2. Genial!!! No estaba usando ningún plugin de cacheo y mi WEB ha pasado de tardar 4 segundos a 1.5. Me ha parecido increíble.

    Muchísimas gracias.

    Responder

Deja un comentario