Haz tu sitio web WordPress más rápido con LiteSpeed Cache
Fecha de publicación: 04/25/2021

Configuración LiteSpeed Cache para Divi – WordPress

Las recientes actualizaciones de Google le dan una mayor importancia al rendimiento de los sitios web en dispositivos móviles, reducir los tiempos de carga de tu sitio web es vital para mejorar su posicionamiento en los resultados de Google y darle una mejor experiencia a los usuarios.

Si estás buscando la forma de mejorar la velocidad de tu áagina web WordPress y conseguir mejores puntajes en Google PageSpeed utilizando un plugin de cacheo gratuito este artículo te puede interesar.

Factores que influyen en el rendimiento de tu sitio web WordPress

Antes de comenzar un nuevo proyecto web debes tener claro que hay factores que impactan en el rendimiento de tu sitio web incluso antes de que lo construyas, por ejemplo:

  • El plan de servicio de hosting: Los planes básicos de hosting generalmente son más económicos pero más lentos. También investiga si el servicio de hosting que quieres contratar tiene un servidor en el mismo país donde se encuentra tu público objetivo. Si no es así, al menos que tenga un servidor en un país cercano al tuyo (nunca en distinto continente).
  • El tema de WordPress: Investiga el tema de WordPressque vas a utilizar para tu sitio web antes de comenzar a construirlo. Asegúrate de que el tema es ligero, de calidad y amigable con el SEO.
  • La cantidad de plugins que utilizará tu sitio web: Entre más widgets y plugins tengas instalados más lento será tu sitio web WordPress. Asegúrate de usar únicamente los que realmente necesitas.

Si tu sitio web ya existe, está construido con el tema Divi y quieres mejorar la velocidad de carga sigue leyendo. En este artículo te muestro exactamente punto por punto la configuración que tengo para este sitio web y que al momento me ha dado mejores resultados.

¿Cómo mejorar la velocidad de carga de tu sitio web Divi?

La forma más sencilla de mejorar la velocidad de tu sitio web de WordPress y mejorar tus resultados en PageSpeed Insights de Google es instalando un plugin de cacheo.

He probado muchos plugins de cacheo y puedo asegurarte que todos me han ayudado a mejorar los puntajes en Google PageSpeed en menor o mayor grado. Hasta ahora el plugin gratuito LiteSpeed Cache para WordPress (LSCWP) me ha dado los mejores resultados con sitios web hechos con el tema Divi (Elegant Themes). Hasta este momento no he tenido problemas con el constructor Divi, ni al momento de editar, crear páginas o artículos de blog.

Primero optimiza las imágenes de tu sitio web.

Usar imágenes muy pesadas es uno de los errores más comunes que afectan el rendimiento de las páginas web, afortunadamente es un problema fácil de corregir utilizando plugins o haciendo una optimización previa a subir las imágenes a tu sitio web.

a) Haz una selección previa de imágenes

Si es posible haz una selección previa de las imágenes que vas a usar en tus artículos de blog y páginas de tu sitio, optimízalas antes de subirlas a tu web. Si durante el diseño de tus páginas vas probando y haciendo cambios de imágenes no te se olvide ajustar las medidas y optimizar el peso de las imágenes seleccionadas:

b) Ajusta las medidas de las imágenes

La regla es muy simple, ajusta las medidas de las imágenes que se van a mostrar en tu página web. Si la imagen que se va a mostrar ocupa un espacio pequeño no necesitas que la imagen en sí sea del tamaño de la pantalla completa, ¿verdad? Ajusta sus dimensiones lo más que sea posible. Si no conoces cuáles son las dimensiones adecuadas puedes consultar esta guía de medidas para sitios web hechos con Divi, te será de gran utilidad.

c) Optimiza el peso de las imágenes

Cuando tengas la imagen con las dimensiones adecuadas reduce su peso utilizando herramientas como TinyPNG, que de forma automática optimiza el peso cuidando la calidad de la imagen. Puedes lograr reducciones de hasta un 50% en el peso de las imágenes, buenísimo para que tu página sea más ligera.

Puntajes antes de la optimización

Para este ejercicio voy a utilizar este mismo sitio web Alta Rank. Estos fueron los puntajes obtenidos en Google PageSpeed antes de instalar el plugin de cacheo y antes de hacer la optimización de las imágenes. Sería bueno mencionar que al momento de hacer esta medición la página principal estaba muy pesada (principalmente por imágenes de fondo formato .png), además, el servicio de hosting actual no es un plan premium:

puntajes google pagespeed sitio sin optimizar

Instala LiteSpeed Cache para WordPress (LSCWP)

En el menú lateral (a la izquierda de la pantalla) de tu WordPress dale clic a Plugins -> Añadir nuevo y busca el plugin LiteSpeed Cache (es gratuito).

plugin litespeed cache

¿Qué pasa si el plugin de cacheo causa problemas en mi sitio web?

Si detectas problemas en tu sitio web utilizando un plugin de cacheo, lo primero que debes hacer es: borrar el caché y la segunda cosa que puedes hacer es desactivar el pugins de cacheo para ver si es esto lo que está rompiendo cosas dentro de tu sitio web.

Nota importante: Cada sitio web es diferente y usa plugins y widgets diferentes, esto es un punto importante a considerar. Esta configuración que te voy a mostrar no esta creando ningún tipo de conflicto dentro de este sitio web hecho con Divi.

Guía: Configuración del plugin LiteSpeed Cache para Divi

A continuación, te muestro la configuración del plugin que he usado para sitios de WordPress utilizando Divi de Elegant Themes.

Durante la configuración te darás cuenta que muchos campos ya vienen ajustados por default y muchos de campos vienen vacíos y no se van a cambiar. Lo que no modificamos lo etiquetamos como “sin cambios”, sin embargo, si hay alguna opción dentro del plugin que no aparezca en esta la lista es porque no se realizó alguna modificación, es decir, no le movimos nada. Las opciones que aquí se muestran son las que efectivamente se modificaron.

Cuando hayas ajustado las opciones guarda los cambios de esa sección y sigue con la siguiente parte de la configuración.

Comenzamos:

Opciones generales

Ajustes generales

  • Actualizar automáticamente: Encender
  • Clave de dominio: Sin cambios
  • IP Servidor: Sin cambios
  • Notificaciones: Encender

Caché

Ajustes de control de caché

  • Activa caché: Encender
  • Cachear usuarios con sesión iniciada: Encender
  • Cachear comentaristas: Encender
  • Cachear API REST: Encender
  • Cachear página de acceso: Encender
  • Cachear favicon.ico: Encender
  • Cachear recursos de PHP: Encender
  • Cache móvil: Apagar
  • Lista de User Agents móviles: Sin cambios
  • URIs cacheadas privadamente: Sin cambios
  • Forzar URLs en caché: Sin cambios
  • Forzar URIs de caché pública: Sin cambios
  • Ignorar cadenas de consulta: Sin cambios

TTL

  • TTL por defecto de la caché pública: 604800
  • TTL por defecto de la caché privada: 3600
  • TTL por defecto de la Página Principal: 604800
  • TTL por defecto del Feed: 604800
  • TTL predeterminado de REST: 604800
  • TTL del código de estado de página predeterminado: Sin cambios

Ajustes de vaciado

  • Vaciar todo al actualizar: Encender
  • Reglas de vaciado automático para publicación y actualización: Todas las opciones fueron seleccionadas excepto “todas las páginas”, “archivo anual” y “archivo diario”
  • Servir contenido rancio: Apagar
  • URLs de vaciado programado: Sin cambios
  • Hora de vaciado programado: No se programó hora
  • Vaciar todos los hooks: Sin cambios

Ajustes de exclusión

Como nuestra intención es que todo el sitio sea cacheado en esta sección no se hicieron modificaciones, todos los campos quedaron vacíos.

Ajustes de ESI

  • Activar ESI: Apagar
  • Cachear barra de administrador: Encender
  • Cachear formulario de comentario: Encender
  • Nonces de ESI: Nada Grupos de variación: Sin cambios
  • Grupos de variación: Sin cambios

Ajustes de la caché de objetos

  • Caché de objetos: Apagar
  • Método: Memcached
  • Host: Sin cambios, quedó como –> localhost
  • Puerto: 11211
  • Tiempo de vida por defecto del objeto: 360 (segundos).
  • Nombre de usuario: Sin cambios
  • Contraseña: Sin cambios
  • ID de base de datos Redis: Sin cambios
  • Grupos globales: Sin cambios
  • Grupos a no cachear: Sin cambios
  • Conexión persistente: Encender
  • Cachear wp-admin: Apagar
  • Almacenar datos transitorios: Encender

Ajustes de la caché del navegador

  • Caché del navegador: Encender
  • TTL caché de navegador: 2419200

Ajustes avanzados

  • Cookie de acceso: Nada
  • Mejorar compatibilidad HTTP/HTTPS: Apagar
  • Clic instantáneo: Apagar

CDN

No se hicieron cambios en las secciones de ajustes de CDN o Gestionar.

Optimización de imágenes

Resumen de la optimización de imágenes

No estamos haciendo uso de la optimización de las imágenes con QUIC.cloud, por lo tanto esta sección quedó tal y como estaba, sin cambios.

Ajustes de optimización de imágenes

  • Cron de petición automática: Apagar
  • Cron de obtención automática: Encender
  • Optimizar imágenes originales: Encender
  • Eliminar copias de seguridad del original: Apagar
  • Optimizar sin pérdida: Apagar
  • Conservar los datos EXIF/XMP: Apagar
  • Crear versiones WebP: Encender
  • Reemplazo de imágenes WebP: Encender
  • Atributo WebP a reemplazar: Sin cambios
  • WebP para src extra: Apagar
  • Control de la calidad de imagen de WordPress: 82

Optimización de página

Ajustes de CSS

  • Minificar CSS: Encender
  • Combinar CSS: Encender
  • Combinación de CSS externo e integrado: Encender
  • Push HTTP/2 de CSS: Encender
  • Cargar CSS asíncronamente: Apagar (haciendo varias pruebas comprobamos que esta opción en apagar reduce significativamente la métrica CLS).
  • Generar CSS crítico: Encender
  • Generar CSS crítico en segundo plano: Encender
  • Tipos de contenido de caché de CCSS distintos: Sin cambios
  • Distintas URIs de caché CCSS: Sin cambios
  • Biblioteca de CSS integrado asíncrono: Encender
  • Optimización de visualización de fuentes: Swap

Ajustes de JS

  • Minificar JS: Encender
  • Combinar JS: Encender
  • Combinación de JS externo e integrado: Encender
  • Push HTTP/2 de JS: Encender
  • Deferir carga de JS: Encender
  • Cargar JS integrado: Después de DOM ready

Ajustes de optimización

  • TTL de caché CSS/JS: 604800
  • Minificar HTML: Encender
  • Prefetch DNS: Sin cambios
  • Control del prefetch DNS: Encender
  • Eliminar query strings: Encender
  • Cargar Google Fonts asíncronamente: Encender
  • Eliminar Google Fonts: Encender
  • Eliminar emojis de WordPress: Encender
  • Quitar etiqueta Noscript: Encender

Ajustes de medios

  • Retrasar la carga de imágenes: Encender
  • Marcador de posición de imagen básica: Sin cambios
  • Marcador de posición adaptable: Apagar
  • Marcador de posición SVG adaptable: Sin cambios
  • Color del marcador de posición adaptable: Sin cambios
  • Generador de LQIP en la nube: Apagar
  • Calidad LQIP: 4
  • Dimensiones mínimas de LQIP: 150 x150
  • Generar LQIP en segundo plano: Encender
  • Retrasar la carga de iframes: Encender
  • Biblioteca integrada de imágenes en carga diferida: Encender

Exclusiones de medios

No se hicieron cambios en esta sección.

Ajustes de localización

  • Caché de Gravatar: Encender
  • Cron de la caché de Gravatar: Apagar
  • TTL de la caché de Gravatar: 604800
  • Recursos localizados: Apagar
  • Archivos de idiomas: Sin cambios

Configuración de ajustes

En esta sección no se hicieron cambios.

Para finalizar, las secciones de Base de datos, Crawler y Herramientas quedaron con sus valores por default. No se hicieron cambios.

Puntajes después de la optimización

Durante las pruebas los puntajes para ordenador no bajaron de 85 y para móvil se obtuvieron puntajes de entre 70 y 85 puntos, nunca bajó de 70 lo que nos alegra mucho viniendo de puntajes malísimos para móvil (entre 7 y 30 puntos). Tomando en cuenta que el plan de hosting actual no es el más sofisticado ni veloz (servicio de hosting compartido) creemos que estos resultados son buenos:

puntajes google pagespeed sitio optimizado

Algo muy importante que ayudó a lograr estos puntajes fue la optimización de todas las imágenes, además, en el diseño original había imágenes de fondo (formato .png muy pesadas) que se eliminaron con la intención de hacer la página lo más ligera posible.

Cuando terminamos la configuración final (la que mostramos arriba) notamos que había errores con algunas imágenes que no se mostraban y el texto no tenía formato. Lo que hicimos fue simplemente vaciar todo el caché en la opción “vaciar todo” y la página volvió a mostrar el contenido de forma correcta, hicimos pruebas de formulario y de edición con el constructor Divi y todo funcionó correctamente:

opcion vaciar todo menu de litespeed cache

Esperamos que esta guía te sea de mucha utilidad y que tu sitio web con Divi alcancé mejores puntajes.

0 Comments

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *