Instalar LiteSpeed Cache en WordPress

LiteSpeed Cache o LS Cache es un plugin gratuito de código abierto para WordPress que se comunica con el Servidor Web LiteSpeed instalado. Esta posibilidad de comunicarse con el Servidor Web le da grandes ventajas en comparación con otros plugins de caché.  Gracias a esta comunicación LiteSpeed puede cachear las páginas de un sitio de una maneras más eficiente logrando un mejor desempeño y disminuyendo los tiempos de respuesta drásticamente.

Si siempre has querido obtener los puntajes más altos en PageSpeed y nunca has podido no importa cuánto te esfuerces, es hora de que agregues LSCache a tu sitio y mejores la experiencia para tus usuarios.

Este plugin por supuesto está diseñado para trabajar con LiteSpeed por lo que no es compatible con el servidor Apache, Nginx u otros servidores web.  Si quieres conocer más sobre las ventajas de LiteSpeed ante otros servidores web puedes visitar nuestro artículo sobre Apache vs Nginx vs LiteSpeed.

Características de LS Cache

¿Como hace LiteSpeed para aumentar tanto la velocidad?

La respuesta es que LiteSpeed integra herramientas avanzadas de cacheo así como también características de optimización, convirtiéndose así en una solución definitiva para aumentar la velocidad de carga y respuesta de tu sitio. Veamos ahora sus principales características:

Cacheo completo del sitio a nivel de servidor

Al comunicarse directamente con el Servidor Web (LiteSpeed) puede guardar copias estáticas de  páginas generadas dinámicamente. También guarda múltiples versione teniendo en cuenta el usuario, la geolocalización y la concurrencia.

Optimización de imágenes

Reduce el peso de las imágenes de tu web y facilita el uso de WebP.

Combinación de CSS y JavaScript

Combina múltiples archivos CSS o JavaScript en uno solo. Esto reduce el numero de peticiones del navegador y elimina el código duplicado.

Soporte para caché del navegador

Facilita el guardado de contenido estático en el equipo del usuario mientras la caché del navegador esté vigente.

Caché privada

Cachea copias personalizadas de una página, las cuales permanecen visibles solo para el usuario para el cual fueron generadas.

Crawler –  Araña Web

Recorre el sitio regenerando páginas que ya expiraron en la caché.

HTTP/2 Push

Anticipa lo que el navegador necesita y actúa sin tener que esperar la petición del mismo.

Lazy Load Images – Carga de imágenes en modo perezoso

Carga imágenes y iFrames de forma asíncrona.

Edge Side Includes (ESI)

ESI  es un lenguaje de marcado que permite realizar fragmentos de páginas que se procesan por separado. En resumen lo que hace es permitir que se almacenen páginas con «huecos» en la caché que luego serán llenados con distinto contenido (también de la caché).

Minificación de CSS/JavaScript/HTML

Quita los espacio en blanco innecesarios en el código, los saltos de línea y los comentarios. Esto para el navegador mejora el tiempo de respuesta al tener que leer menos líneas y caracteres.

Soporta Content Delivery Network (CDN)

LSCache integra un CDN para que no tengas que recurrir a CND de terceros.

Optimización de base de datos

Mantiene la Base de datos de WordPress lo más eficiente posible.

Compatibilidad

LSCache es compatible con los plugins y themes más populares:

Plugins

• WooCommerce
• WPML
• bbPress
• Contact Form 7
• Caldera Forms
• Google XML Sitemaps
• Yoast SEO
• Wordfence Security
• NextGen Gallery
• ShortPixel
• Aelia CurrencySwitcher
• Fast Velocity Minify
• Autoptimize
• Better WP Minify
• WP Touch
• Theme My Login
• wpForo
• WPLister
• WP-PostRatings
• Login With Ajax
• Ninja Forms
• Post Types Order

Temas/Plantillas

• Avada
• Elegant Themes Divi
• BoomBox.

Si los plugins que utilizas no están en esta lista eso no quieres decir que no sean compatibles. Todos los plugins que no generen contenido en el sitio o no haga nada fuera de lo común respecto al Front-end son compatibles con LiteSpeed. Para que puedas asegurarte de la compatibilidad sin romper nada en tu sitio existe una manera de probar si LSCache es compatible con tus plugins.

Instalación de LSCache en WordPress

Para instalar LSCache en WordPress vamos a Plugins >> Añadir nuevo.

Luego buscamos LiteSpeed Cache en la barra de búsqueda, y le damos a instalar.

Una vez LS Cache esté instalado, procedemos a activarlo.

Ahora para poder comenzar con la parte de configuración debemos ir a Plugins y seleccionar ajustes en LiteSpeed Cache o podemos ir directamente a la opción LiteSpeed Cache desde la barra lateral.

Configuración de LiteSpeed Cache

Para poder realizar cambios en la configuración de LSCache debemos ir a los ajustes, podemos hacerlo desde Plugins  >> Ajustes como se muestra en la imagen o podemos ir al menú lateral, la opción LiteSpeed Cache >> Ajustes.

En Opciones Generales nos aseguramos de que Habilitar Caché de LiteSpeed este activo. Luego nos vamos directamente a las opciones avanzadas, para eso vamos a Mostrar opciones avanzadas en la parte superior derecha.

Una vez en las opciones avanzadas nos dirigimos a las pestaña Optimizar, estos ajustes son referentes a CSS, JavaScript y HTML donde habilitaremos la minificación de los tres y la integración.

En esta opción entonces vamos a activar:

• Minificar CSS
• Combinar CSS
• Push HTTP/2 de CSS
• Minificar JS
• Combinar JS
• Push HTTP/2 de JS
• Minificar HTML
  • Minificar CSS integrado
  • Minificar JS integrado
• Excluir JQuery

Luego de que hagamos los ajustes correspondientes en Optimizar nos vamos a ir a la siguiente pestaña, Ajustar. En esta opción solo vamos a activar las dos primeras opciones, Prioridad de CSS combinado y Prioridad de JS combinado  para que priorice los CSS y JS combinados que habilitamos en la pestaña anterior.

Los siguientes ajustes que vamos a realizar son en la pestaña Medios, en esta pestaña podemos realizar los ajustes correspondientes para la optimización de imágenes.

Las opciones que habilitaremos aquí son:

• Optimizar automáticamente
• Cron de optimización
• Optimizar imágenes originales
• Optimizar versiones WebP
• Reemplazo de imágenes WebP (Reemplaza las imágenes por su versión webp optimizada)
• WebP para src extra (optimiza las imágenes webp en elementos que fueron generados fuera de la lógica de WordPress )

Por último activamos el CDN (Content Distribution Network). Esto en resumen nos ayudará a que nuestra web sea despachada desde distintos puntos del planeta permitiéndonos mejorar la respuesta y ahorrar ancho de banda.

Luego de realizados los ajustes guardamos todos nuestros cambios haciendo clic en Guardar Cambios en el botón superior derecho.

Por último iniciamos la optimización de imágenes. Para ello vamos a ir a LiteSpeed Cache en el menú lateral a la opción Optimización de Imágenes. En esta parte debemos hacer clic en el botón central que veremos donde dice Iniciar Optimización y luego Enviar solicitud de optimización.

Esto irá enviando las imágenes para optimizar en grupos pequeños por lo que seguramente debemos enviar varias solicitudes.  Sobre el lado derecho tendremos una gráfica circular que nos mostrará el porcentaje de imágenes optimizadas.

Debemos continuar enviando solicitudes hasta que todas nuestras imágenes hayan sido optimizadas. Cuando agreguemos nuevas imágenes a nuestro sitio tendremos que volver a enviar una nueva solicitud de optimización.

Prueba de velocidad antes y luego de instalar LSCache

Para poder medir la mejora tras instalar y configurar LiteSpeed Cacherealizamos pruebas de rendimiento desde Lighthouse antes de instalar LS Cache y luego de que terminamos con los ajustes y optimización de imágenes.

En este punto en lo que nos vamos a centrar son en los resultados de Performance que son los que realmente mejoran con el uso de LS Cache.

Para realizar estas pruebas se creo un sitio de prueba con un theme Highlight  y  varios de los plugins más populares.

En una primera instancia el análisis arrojó una puntuación de  50 en performance.

Luego de que instalamos y configuramos LiteSpeed Cache mejoró no solo la performance sino que también subió la puntuación de Progressive Web App.

La puntuación mejoró casi un 50% obteniendo 95 puntos, y Progressive Web App pasó de 15 a 42.

¿Qué significan estos puntos en la prueba de velocidad?

Bueno Lighthouse toma varios factores en cuenta a la hora de puntuar un sitio web en temas de rendimiento.

Como podemos ver en la misma imagen detallado se toma en cuenta los segundos que demora en aparecer la primera impresión de pantalla:

• La velocidad de indexado.
• El tiempo que le toma a la página permitir interacciones con el usuario, esto es el tiempo que demora en cargar el contenido suficiente como para que el usuario pueda empezar a interactuar con el sitio.
• El tiempo en el que el usuario percibe que el contenido principal de la página está visible.
• First CPU Idle se refiere al tiempo que demora en cargar el mínimo contenido interactivo del lado del cliente.
• Tiempo de latencia de entrada estimado, en este caso no se refiere a la latencia en la red sino al tiempo de respuesta en responder una entrada de usuario. Para que tengas una idea, si el tiempo de respuesta supera los 100 ms  el usuario ya percibe la web como lenta.

Conclusión

LiteSpeed nos ayuda enormemente a mejorar la velocidad de nuestro sitio y los tiempos de respuesta. Ten en cuenta que en algunos caso puede ser necesario que realices algunos ajustes externos a LSCache como adecuar el tamaño de las imágenes al que necesitas y no utilizar fotos enormes para una miniatura.

En este artículo hemos realizado una configuración intermedia, si tu sitio es realmente básico puedes dejar la configuración por defecto y eso ya mejorará el rendimiento. Por otro lado si tu sitio es bastante grande y pesa varios MB tal vez tengas que realizar algunos ajustes más.

Una buena opción para asegurarte de colocar la configuración que más favorezca a tu sitio es ir realizando ajustes y haciendo pruebas de desempeño con PageSpeed así vas viendo qué configuraciones van mejor con tu sitio.

No dudes en dejarnos en los comentarios si tienes alguna duda sobre cómo instalar LiteSpeed Cache o su configuración en WordPress.