LiteSpeed Cache – Optimizar el RENDIMIENTO de WORDPRESS

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

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:

  • 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.).

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.

Opciones generales del plugin LiteSpeed Cache de WordPress

Opciones de Optimización del LiteSpeed Cache

Cache

Dejo todas las opciones de cacheo activadas por defecto, excepto la de móvil si no estoy usando AMP. El objetivo es cargar los objetos de la página la primera vez pero después se cargarán mucho más rápido accediendo directamente a su versión cacheada.

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.

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.

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.

Objetos

Podemos utilizar esta opción si tenemos configurado un servidor de caché independiente para cachear los objetos, como puede ser Memcached. En un blog de WordPress básico no utilizaremos esta opción.

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.

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.

CDN

En mi caso utilizo la CDN de CloudFlare, así que no voy a configurar ninguna CDN desde 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.

Optimización de imágenes

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

  • 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.
  • Retrasar la carga de iframes: Igual que hemos comentado anteriormente sobre las imágenes también retrasaremos la carga de los componentes WEB de tipo iframe a medida que vayan apareciendo. Si eres programador, sabrás que cuando incrustas vídeos de Youtube en WordPress estás insertando un iframe (lo puedes ver en el código fuente).
  • Optimizar automáticamente: Existen servicios o plugins de WordPress que optimizar las imágenes para que la WEB cargue más rápido, por ejemplo, reduciendo su resolución o eliminando datos EXIF. LiteSpeed Cache incorpora este servicio.
  • Conversión de imágenes al formato WEBP: Permite cargar las páginas mucho más rápido que con jpg y png, al ser un formato de imagen que ocupa menos espacio.

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 Imaganes en WordPress con LiteSpeed Cache

No toco ninguna opción más hasta que llego a la pestaña «Optimizar». Adjunto una captura de pantalla con las opciones que suelo activar normalmente en todas mis páginas y luego pasaré a explicar las más relevantes:

Plguin de WordPress Litespeed cache - Ajustes de optimizacion (parte 1)
Plguin de WordPress Litespeed cache - Ajustes de optimizacion (parte 2)
Plguin de WordPress Litespeed cache - Ajustes de optimizacion (parte 3)
Plguin de WordPress Litespeed cache - Ajustes de optimizacion (parte 4)
Plguin de WordPress Litespeed cache - Ajustes de optimizacion (parte 5)

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.

  • 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.
  • Push HTTP/2 de CSS: Siempre la activo. Nos ahorrará tiempo a la hora de transferir los archivos CSS.
  • Minificar JS, Combinar JS y Push HTTP/2 de JS es lo mismo que acabamos de ver pero para ficheros JavaScript.
  • TTL de caché CSS/JS: Dejo el valor por defecto. Si necesito refrescar la caché, lo hago manualmente.
  • Minificar HTML: Se encarga de reducir el código HTML, tal y como hemos explicado anteriormente para los ficheros CSS y JS.
  • Minificar CSS integrado y Minificar JS integrado: Dentro del código HTML podemos incrustar código CSS y JavaScript. Si marcamos esta opción también será reducido.
  • Cargar CSS asíncronamente: Para que el contenido de la WEB empiece a visualizarse cuanto antes, podemos activar esta opción para que los ficheros CSS se carguen al final de todo. Esto no variará el tiempo de carga total de la página pero los usuarios podrán comenzar a ver tu página más rápidamente.
  • Generar CSS crítico: La tengo desactivada ya que prefiero cargar los ficheros CSS localmente o desde un servicio de caché como CloudFlare.
  • Biblioteca de CSS integrado asíncrono: Tengo esta opción activada. No tendría sentido no hacerlo si antes ya he activado «Cargar CSS asíncronamente».
  • Diferir carga de JS: Este es uno de los puntos que siempre aparecen como problema de rendimiento en las auditorías de PageSpeed Insights de Google. La tengo marcada, de nuevo, tras comprobar que no se ha roto nada de la página porque, lo que hace, es retrasar la ejecución del código JavaScript al final del todo para que contenido comience a visualizarse cuanto antes para los usuarios.
  • Excluir JQuery: Hace tiempo leí que JQuery se utiliza en un 90% de las páginas WEB, aproximadamente. Es recomendable que el resto de scripts de JavaScript tengan acceso a las funciones de JQuery cuanto antes, por lo que excluimos esta biblioteca de la carga diferida.
  • Prefetch DNS: Indicamos la resolución DNS de ciertas llamadas a URLs externas antes de que sean solicitadas. De esta manera, evitamos que la WEB tenga que resolver nombres de DNS durante su carga. Lo que suelo hacer yo, es pasar la WEB por Pingdom Tools y revisar qué DNSs son los que más me están ralentizando la carga de la WEB para configurarlos en LiteSpeed Cache.
LiteSpeed Cache - Configurar DNS Prefetch
  • Eliminar comentarios: Los programadores suelen añadir comentarios en el código fuente que nos nos sirven para nada a la hora de cargar la página WEB. Si los eliminamos, reduciremos un poco el tamaño de los ficheros que tienen que interpretar los navegadores.

Configuración de Ajustes (pestaña «Ajustar»)

En esta sección vamos a ajustar algunas opciones complementarias a la optimización que hemos configurado previamente:

Plugin LitespeedCache - Ajustar (parte 1)
Plugin LitespeedCache - Ajustar (parte 2)
Plugin LitespeedCache - Ajustar (parte 3)
Plugin LitespeedCache - Ajustar (parte 4)
  • Prioridad de CSS combinado: Tiene sentido activar esta opción si anteriormente hemos combinado archivos CSS para crear un solo fichero de estilos.
  • Prioridad de JS combinado: Igual que la opción anterior pero para archivos JaaScript.
  • Tamaño máximo de archivo combinado: Por defecto está a 1,2MB, que es un tamaño estándar válido para la mayoría de las páginas WEB. Si os fijáis en PingdomTools, veréis que normalmente ocupará unos pocos KB.
  • 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.

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

Optimización de la base de datos de WordPress

Con LiteSpeed caché también puedes optimizar el rendimiento de la base de datos de WordPress:

  • Eliminar datos que ya están en la papelera
  • Revisiones de las entradas y páginas
  • Entradas en borradores
  • Comentarios de spam o en la papelera
  • Datos transitorios
  • Pingbacks
  • Optimizar las tablas
Optimizar la base de datos de WordPress con LiteSpeed Cache

No obstante, para esta función, prefiero utilizar el plugin WP Optimize porque puedo programar periódicamente estas tareas y no eliminar todos los datos sino, por ejemplo, dejar las últimas dos semanas, no vaya a ser que tenga una entrada en borradores y la elimine accidentalmente.

Cuantos menos datos tenga la base de datos, más rápidas funcionarán las búsquedas porque la base de datos tendrá que recorrer menos registros para encontrar el dato solicitado. Sin embargo, esto simplificarlo mucho porque la optimización de bases de datos da para escribir un libro.

Puntuación del rendimiento de la página

Si vamos al menú «Ajustes» de nuevo y activamos la casilla » Mostrar noticias automáticamente», en el panel de administración de WordPress veremos un ranking de puntuación de rendimiento antes y después de configurar el plugin.

Como podemos observar, hemos mejorado mucho.

Litespeed cache - Puntuación de rendimiento de carga de la web

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

¿Te ha gustado? Compártelo

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email
About Author

Contenido Relacionado

Artículos Recientes

2 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

Deja un comentario