Mejorar velocidad de carga WordPress con LiteSpeed – Guía completa

Mejorar velocidad de carga WordPress
No hay comentarios

Guía completa para mejorar velocidad de carga de WordPress en nuestro servidor LiteSpeed Web Server

Esta es una guía práctica y completa para optimizar y mejorar la velocidad de carga de WordPress – Woocommerce donde abordaremos los siguientes temas:

1. Dominio

En primer lugar, recomendamos configurar el dominio para que funcione con CloudFlare. Si bien el plan gratis trabaja bien, con el plan PRO tendrás una super velocidad, ya que guardará en caché los archivos estáticos e imágenes del sitio web y los distribuirá a través de su red global, tendrás funcionalidades avanzadas, además de mejorar la seguridad a nivel de dominio.

Otra de las ventajas de utilizar CloudFlare es que ahorrarás recursos del servidor tales como: Ancho de Banda, vCPU y RAM. Por consiguiente ahorrarás dinero.

A continuación explicamos las configuraciones básicas:

Registrarse en CloudFlare

Para registrarse debes ingresar en el siguiente link: https://dash.cloudflare.com/sign-up. Recuerda confirmar el correo electrónico.

registro en cloudflare

Registrar Dominio:

registrar dominio

Elegir plan:

Recomendamos el plan PRO, pero con el plan Free se puede empezar.

elegir plan

Validación DNS:

CloudFlare va a escanear tu configuración DNS actual, de la cual recomendamos dejar apagada la nube para el registro «mail» y «ftp».

validación dns

Cambio DNS:

CloudFlare te va a pedir que cambies los DNS actuales por los de ellos. Si no sabes cómo hacer esto, puedes contactar a tu desarrollador web que te ayude. El cambio DNS puede afectar el funcionamiento de correos, subdominios u otros servicios.

cambio dns

Aplicar recomendaciones:

Puedes aplicar las recomendaciones SSL y de optimización del sitio.

aplicar recomendaciones-2

Configuraciones básicas:

Una vez tu dominio esté apuntando a CloudFlare, recomendamos realizar las siguientes acciones generales.

Tener el Minificador y Brotli activados.

optimizacion

Importante: No activar Rocket Loader:

Esto puede causar problemas de compatibilidad con el theme o plugins de WordPress.

rocket loader

TTL: Respetar los encabezados existentes

ttl

Desactivar: Comprobación de integridad del navegador.

Para evitar problemas con el SSL.

ssl

Seguridad

Recomendamos configurar tus reglas de Firewall. A veces tenemos ataques o múltiples visitas de bots desde países donde no están nuestros usuarios, y en algunas ocasiones esto contribuye al uso elevado de ancho de banda y recursos del servidor. Puedes bloquear países como China, Rusia, Singapur, entre otros.

Debes tener cuidado con bloquear Estados Unidos, ya que esto puede afectar la lectura de datos con Google Analytics o Facebook Pixel, entre otros problemas.

Firewall CloudFlare

Mejorar velocidad de carga WordPress parte 2

2. Servidor

Esta guía para mejorar velocidad de carga WordPress está basada en nuestro servicio de hosting con cPanel y LiteSpeed Web Server + LSCache.

Importante: Previo a realizar cualquier acción en el sitio web o en el hosting, recomendamos realizar una copia de seguridad de la base de datos y archivos.

Antes de empezar con las diferentes indicaciones de configuración en nuestro servidor cPanel vamos a hablar sobre las recomendaciones para optimizar algún servidor personalizado que tengas, como por ejemplo un VPS, servidor dedicado o en la Nube.

  • Panel de control: Sabemos que a los desarrolladores avanzados no les gusta usar paneles de control, pero si no te quieres complicar la vida te recomendamos siempre instalar un panel para administrar de manera más rápida y sencilla tu servidor. Importante que el panel que vayas a utilizar sea compatible con LiteSpeed Web Server. Si cPanel te parece costoso para empezar con un proyecto te recomendamos desplegar CyberPanel, es el panel de Control de LiteSpeed gratis y se puede configurar con OpenLiteSpeed que es el servidor web de código abierto de la empresa.
  • Servidor Web: La mayoría de desarrolladores utilizan Apache o Nginx como servidor web (porque son gratis), pero la verdad es que requiere de conocimientos avanzados para que el sitio web funcione bien y no haya un alto consumo de recursos del servidor como CPU o RAM, sobre todo cuando el sitio web tiene alto tráfico, también hace que se pierda mucho tiempo en la optimización del sitio web y en la configuración de algún plugin de caché. Nuestra recomendación es que adquieras una licencia de LiteSpeed Web Server o uses un servidor que ya lo ofrezca.
  • LiteSpeed es un servidor web con arquitectura optimizada basada en eventos, capaz de manejar miles de clientes simultáneos con un consumo mínimo de memoria y uso de CPU. Cuando se cambia a LiteSpeed ​​Web Server, puede estar seguro de que sus sitios experimentarán mejoras cuantificables en velocidad. Con el motor de caché integrado avanzado de LiteSpeed, puede eliminar la necesidad de proxies inversos HTTPS o capas de almacenamiento en caché de terceros adicionales requeridas con Apache. Además, LiteSpeed ​​almacena archivos de caché comprimidos, donde Nginx no lo hace.
  • Software: Otras recomendaciones al momento de optimizar un servidor web para sitios web en WordPress – Woocommerce son las siguientes: Utilizar la versión PHP recomendada por WordPress, esto mejora el rendimiento y la seguridad. Instalar Memcached o Redis para activar la caché de objetos y mejorar la velocidad de carga WordPress al reducir las consultas a la base de datos, opción que se puede configurar en el plugin de LiteSpeed Caché. Tener instaladas las diferentes extensiones PHP como la compresión Brotli y Opcache entre otros. Aumentar las variables PHP como límite de memoria o tiempo de ejecución y activar la compresión GZIP.

Recomendaciones WordPress e Información del Servidor

Para obtener más información acerca de las configuraciones técnicas de WordPress y del servidor en el que se encuentra tu sitio web, ingresa a Herramientas > Salud del Sitio:

recomendaciones servidor

Activar la compresión GZIP

compresión gzip
compresión gzip

Versión PHP

Recomendamos utilizar la versión PHP recomendada por WordPress, se puede consultar en este link https://es-co.wordpress.org/about/requirements/

PHP selector
versión php

Extensiones y Variables PHP

Estas 2 funcionalidades se pueden encontrar en la misma sección PHP Selector.

php selector
php selector extensiones
Variables PHP

Mejorar velocidad de carga WordPress parte 3

3. WordPress

De acuerdo a nuestra experiencia profesional, identificamos que WordPress y la forma como se construye el sitio web influye drásticamente en la velocidad de carga, es por esto que realizamos las siguientes recomendaciones para obtener un sitio web supe rveloz.

  • Tema (Theme o Plantilla): La elección del tema para tu sitio web es crucial, nosotros recomendamos usar Impreza para sitios pequeños o informativos y Woodmart para tiendas Online, aunque hemos probado Astra con Elementor y funciona muy bien. La clave está en encontrar un tema ideal para tu modo de trabajo, pero sobre todo tratar de utilizar el mismo tema para la mayoría de proyectos, esto ayuda a optimizar tu tiempo, ya que aprendes a conocer los pro y contra del tema y evita empezar desde cero con otros temas desconocidos, nosotros encontramos a Impreza y Woodmart que nos encantan porque tienen funcionalidades potentes que nos han permitido desarrollar sitios web instalando pocos plugins lo que favorece ampliamente a mejorar la velocidad de carga WordPress y Woocommerce. Impreza es un tema super ligero que una vez se aprende a manejar se convierte en una herramienta indispensable de desarrollo web. Tenemos un tutorial completo para empezar con Impreza en nuestro canal de YouTube. Estos 2 temas tienen en común su excelente soporte y miles de ventas en ThemeForest. Otra de las características que más nos encanta de estos temas es que en las actualizaciones los ajustes a realizar son menores.
  • Plugins: Entre menos ¡mejor!. Así es, intenta instalar la menor cantidad de plugins en tu sitio web, pero también identifica los más compatibles con tu Theme, así ahorrarás tiempo durante la optimización. Debes tener en cuenta que entre más plugins tengas que instalar, necesitarás un servidor con mayores prestaciones. Existen plugins que pueden afectar la velocidad de carga del sitio considerablemente.
  • Imágenes: Es muy importante que las imágenes que uses estén optimizadas, que su peso sea menor a 100 kB (preferiblemente) y que tengan el tamaño exacto para evitar el re-escalamiento. Evita emplear PNG reemplazándolas con imágenes SVG. Para la optimización de imágenes recomendamos utilizar Adobe XD, aunque en Internet hay cientos de opciones para esta tarea tan relevante en la optimización de nuestro WordPress.

Mejorar velocidad de carga WordPress parte 4

4. Base de datos

Dejamos algunas recomendaciones para optimizar la base de datos en un servidor LiteSpeed.

Importante: Antes de realizar cualquier acción en la base de datos guarda una copia de seguridad.

Optimización desde cPanel:

Desde cPanel ingresa a Base de datos > phpMyAdmin:

optimizar base de datos

Revisar y Optimizar tablas

  • Una vez ingresado, busca en la barra izquierda el nombre la base de datos de tu WordPress y selecciónala.
  • En la parte inferior haz clic en «Seleccionar todo» para seleccionar todas las tablas de la base de datos.
  • En el selector que se encuentra a lado de «Seleccionar todo» elige la opción «Revisar tablas«.
  • El resultado para todas las tablas debe ser «OK«. Con esta herramienta te darás cuenta si hay algún plugin causando problemas o corrupto.
optimizar base de datos
  • Una vez revisadas las tablas, vuelve a «Seleccionar Todo».
  • En el selector ahora eliges la opción «Optimizar«.
optimizar base de datos

Cambiar el motor de la base de datos

Si la base de datos de tu WordPress tiene tablas con motor MyISAM te recomendamos cambiarlas a InnoDB con la herramienta que nos ofrece el plugin de LiteSpeed Cache para WordPress.

  • Desde tu panel de WordPress dirígete a LiteSpeed > Base de datos.
  • Si hay tablas con MyISAM el plugin mostrará la opción para «Convertir a InnoDB»
  • Una vez realices esta acción para cada tabla, el plugin mostrará el mensaje «Estamos bien. Ninguna tabla usa el motor MyISAM«.
  • Borrar caché.
  • También puede hacer una limpieza de la base de datos desde esta misma pantalla.
optimizar base de datos
optimizar base de datos
optimizar base de datos

Caché de Objetos

Si utilizas nuestro servicio de Hosting tendrás activo RedisMemcached, que podrás activar y configurar en el plugin de LiteSpeed Cache. No todos los proveedores de Hosting ofrecen estas opciones.

Si tienes tu propio servidor LiteSpeed te recomendamos instalar uno de estos dos sistemas para la versión PHP que estés usando.

  • Ingresa en tu WordPress a LiteSpeed > Caché > Objeto
  • Caché de Objetos activar con ON.
  • Elige entre Memcached o Redis.
  • Ten en cuenta que si eliges Memcached el puerto es 11211, para Redis el puerto es 6379.
  • Prueba de Conexión: En la sección «Estado» debe aparecer «Exitoso«.
cache de objetos liteSpeed, Redis, Memcachedoptimizar base de datos

Mejorar velocidad de carga WordPress parte 5

5. Woocommerce

Una vez realizada la optimización de la base de datos, recomendamos realizar las siguientes acciones en Woocommerce.

  1. Asegúrate de tener actualizado el plugin Woocommerce.
  2. Asegúrate de tener actualizada la base de datos de Woocommerce.
  3. En el panel de WordPress ingresa a Woocommerce > Estado > Herramientas.
  4. Ejecuta las siguientes acciones: Borrar datos temporales, Borrar variaciones huérfanas, Vaciar permisos de descargas, Vaciar la caché de la plantilla, Actualizar la base de datos, Verificar base de datos.
  5. En esta misma sección podrás verificar el Estado del Sistema Woocommerce.
Optimizar woocommerce
Optimizar woocommerce

Mejorar velocidad de carga WordPress parte 6

6. Imágenes

Las imágenes son una parte fundamental para mejorar la velocidad de carga WordPress.

A continuación te daremos algunas recomendaciones para optimizar la carga de las imágenes en el sitio web.

Imágenes con formato SVG

  • Utiliza imágenes con formato SVG para el logo del sitio y para reemplazar imágenes pequeñas o con transparencia. Para poder cargar este tipo de imágenes a WordPress recomendamos instalar el plugin Safe SVG.
Safe SVG plugin Wordpress
  • Nosotros utilizamos Adobe XD para exportar imágenes en SVG, pero en Internet se pueden encontrar diferentes herramientas para lograr el mismo resultado.
Optimizar imágenes

Tamaño de imagen exacto

  • Otro de los factores importantes es insertar imágenes del tamaño adecuado para nuestro diseño. La imagen debería tener el mismo tamaño de la ventana o columna en la que se va a utilizar.
  • Para verificar si nuestras imágenes tienen un tamaño adecuado o no, puedes ingresar desde un navegador (Google Chrome o Microsoft Edge) y dar clic derecho sobre la imagen en la que se abrirá una ventana donde elegiremos «Inspeccionar«.
Optimizar imágenes
  • Esto abrirá un panel donde podremos ver la información de la imagen tal y como la interpreta nuestro navegador.
  • Aquí son importantes dos cosas: 1) El tamaño de la ventana o columna. 2) El tamaño de la imagen.
  • Si la imagen es mayor al tamaño de la columna, esto hará que el navegador la re-escale haciendo que la carga de la imagen sea más lenta.
  • En esta imagen podemos observar que el tamaño de la columna es de 743 píxeles de ancho por 424 píxeles de alto, y el tamaño renderizado por el navegador es el mismo y tiene un peso de 32.6 kB. Esto significa que nuestra imagen está optimizada y no está causando re-escalamiento.
Optimizar imágenes
  • En WordPress existen diferentes plugins que nos ayudan a recortar las imágenes al tamaño adecuado, pero valida si el tema o constructor que estás usando tiene esta opción.
  • Impreza cuanta con esta opción, donde se pueden crear diferentes tamaños y después aplicarlos a cada imagen.
  • De acuerdo al ejemplo anterior, entonces crearemos el tamaño de imagen 743 píxeles de ancho. El alto lo dejamos en cero, ya que no todas las imágenes tienen la misma altura.
Optimizar imágenes
Optimizar imágenes

Formato WebP

  • WebP es un formato de imagen comprimida, lo que favorece a mejorar la velocidad de carga de nuestro sitio web.
  • Por ahora no todos los navegadores son compatibles con este formato, por lo que recomendamos hacer uso de la herramienta que trae el plugin de LiteSpeed Caché para WordPress o utilizar algún otro plugin que permita al sitio web entregar imágenes en formato WebP dependiendo del navegador del usuario.
Optimizar imágenes

Mejorar velocidad de carga WordPress parte 7

7. Caché

En este artículo ya hemos mencionado varias configuraciones específicas con relación al caché, ahora solo vamos a nombrar algunas configuraciones generales, suponiendo que ya tienes instalado y activado el plugin de LiteSpeed Caché para WordPress.

OpMejorar velocidad de carga WordPress con LiteSpeed – Guía completa

Configurar la IP del servidor en: LiteSpeed Caché > Opciones Generales > Ajustes Generales > IP del servidor.

IP del servidor - LiteSpeed WordPress

Verificar que el caché esté activado dentro del plugin.

LiteSpeed WordPress

Activar el caché del Navegador en: LiteSpeed Caché > Caché > Navegador

LiteSpeed WordPress

Algunos ajustes para optimizar las imágenes en: LiteSpeed Caché > Optimización de imágenes > Ajustes de optimización de imágenes.

LiteSpeed WordPress
LiteSpeed WordPress

El caché de página puede afectar el diseño del sitio, ten cuidado al activar las diferentes opciones. Recomendamos que después de realizar algún cambio se borre el caché y se verifiquen los cambios en el diseño. Para ver las opciones, ir a LiteSpeed Caché > Optimización de Página. Aquí se puede trabajar en los siguientes aspectos:

  •  Ajustes de CSS
  • Ajustes de JS
  • Ajustes HTML
  • Ajustes de medios
LiteSpeed WordPress
LiteSpeed WordPress

Otra opción que recomendamos es introducir el mapa del sitio en: LiteSpeed Caché > Crawler > Ajustes de mapa del sitio.

LiteSpeed WordPress

Por último, tenemos diferentes opciones para optimizar la base de datos, algo que ya hablamos anteriormente en este post. Recuerda convertir todas las tablas de tu base de a InnoDB.

LiteSpeed WordPress

Mejorar velocidad de carga WordPress parte 8

8. CDN

Como ya mencionamos anteriormente, la CDN es una red de distribución de contenidos. Es una red superpuesta de computadoras que contienen copias de datos, colocados en varios puntos de una red, con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red.

  • El uso de un CDN como CloudFlare, QUIC.cloud o CloudFront de AWS para nuestro sitio se traducirá en una mayor velocidad de carga y por ende una mejor experiencia de usuario.
  • El plugin de LiteSpeed Caché para WordPress es compatible con CloudFlare.
  • En el panel de WordPress ingresa a LiteSpeed Caché > CDN.
  • En la sección inferior podrás ver la integración con la API de CloudFlare.
Optimizar imágenes
Optimizar imágenes

QUIC.cloud CDN

Al tener un servidor LiteSpeed se obtiene de forma gratuita hasta 20 GB de ancho de banda al mes con QUIC.cloud para nuestro dominio.

  • Para configurar Quic.cloud ingresa a LiteSpeed > Opciones Generales.
  • Solicitar Clave de dominio: Esperamos unos minutos para enlazar a Quic.cloud.
Solicitar Clave de dominio quic.cloud
  • Una vez tengamos nuestra clave de dominio, damos clic en Enlace a Quic.cloud para registrarnos.
  • Se abrirá la página de Quic.cloud dónde pondremos nuestro Email. El sistema automáticamente nos devolverá nuestro WordPress. Se te enviará un correo de confirmación.
Enlazar a Quic.cloud
Registro en Quic.cloud
  • Desde el panel de LiteSpeed podrás acceder al escritorio de Quic.cloud, donde podremos ver las estadísticas de uso.
Ver escritorio de Quic.cloud
Escritorio de Quic.cloud
  • Después de realizar el enlace a Quic.cloud se habilitarán diferentes opciones en el plugin de LiteSpeed para usar Quic.cloud.

Optimiza las imágenes con el servidor en QUIC.cloud

  • LiteSpeed ​​Cache para WordPress tiene la capacidad de optimizar sus imágenes, haciéndolas más pequeñas y más rápidas de transmitir.
  • Pulse Enviar solicitud de optimización. Solo se envía un grupo de imágenes esta primera vez para verificar que todo funcione bien entre el servidor y el de Quic.cloud, proceso que se hace poco a poco. No es necesario esperar en esta página.
Optimiza las imágenes con el servidor en QUIC.cloud
  • Luego de algún tiempo verá un mensaje de ¡Felicidades, todas reunidos!
Optimiza las imágenes con el servidor en QUIC.cloud
  • En su escritorio de Quic.cloud podrá ver el uso de optimización de imágenes de acuerdo a la cuota de la capa gratuita.
Uso de cuota de imágenes Quic.cloud

Dentro de las opciones que se habilitarán una vez configurado Quic.cloud encontrarás las siguientes:

  • Generador de LQIP en la nube. Ir a LiteSpeed > Optimización de página > Ajustes de Medios
Generador de LQIP en la nube
  • Generar UCSS
  • Cargar CSS asíncronamente

LiteSpeed > Optimización de página > Ajustes de CSS

Ajustes de CSS
  • Por último, habilita la opción CDN. LiteSpeed > CDN > Ajustes de CDN
CDN Quic.cloud
, , , , , , , ,
Compartir en:
Artículos relacionados

Deja una respuesta

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

Rellena este campo
Rellena este campo
Por favor, introduce una dirección de correo electrónico válida.
Tienes que aprobar los términos para continuar

Últimos artículos

Abrir chat
¡Hola! ¿En qué te puedo ayudar?
¡Hola! 👋🏼
¿En qué puedo ayudarte?