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

hace 1 año

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:

Dominio
Servidor
WordPress
Base de datos
Woocommerce
Imágenes
Cache
CDN

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.

Registrar Dominio:

Elegir plan:

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

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».

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.

Aplicar recomendaciones:

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

Configuraciones básicas:

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

Tener el Minificador y Brotli activados.

Importante: No activar Rocket Loader:

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

TTL: Respetar los encabezados existentes

Desactivar: Comprobación de integridad del navegador.

Para evitar problemas con el 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.

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:

Activar la 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/

Extensiones y Variables PHP

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

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:

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.

Una vez revisadas las tablas, vuelve a «Seleccionar Todo».
En el selector ahora eliges la opción «Optimizar«.

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.

Caché de Objetos

Si utilizas nuestro servicio de Hosting tendrás activo Redis y Memcached, 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.

Asegúrate de tener actualizado el plugin Woocommerce.
Asegúrate de tener actualizada la base de datos de Woocommerce.
En el panel de WordPress ingresa a Woocommerce > Estado > Herramientas.
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.
En esta misma sección podrás verificar el Estado del Sistema 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.

Nosotros utilizamos Adobe XD para exportar imágenes en SVG, pero en Internet se pueden encontrar diferentes herramientas para lograr el mismo resultado.

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«.

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.

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.

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.

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.

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

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

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

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

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

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.

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.

La Clave API o Token se encuentra en el panel de CloudFalre https://dash.cloudflare.com/profile/api-tokens

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.

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.

Desde el panel de LiteSpeed podrás acceder al escritorio de Quic.cloud, donde podremos ver las estadísticas de uso.

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.