En este articulo, revisaremos una amplia variedad de configuraciones que te permiten hacer mucho con el contenido de tu página. La mayoría de las configuraciones que vamos a discutir se concentran en el contenido estático (CSS, JS y HTML) y ciertas tecnologías que tienen como objetivo optimizar la forma en que tus páginas se muestran en el navegador del visitante.

Para comenzar el proceso de instalación, accede a tu Panel de administración de WordPress.
Para ello, añade /wp-admin al final de tu nombre de dominio.
Por ejemplo: miwordpress.com/wp-admin, donde miwordpress.com corresponde a tu dominio real.

tambien puedes acceder via WP-Toolkit: https://kb.profesionalhosting.com/tutorial/wordpress-toolkit-en-plesk-explicacion-y-uso/)

Al visitar esta URL, se mostrará la página de inicio de sesión de WordPress. Introduce tus credenciales para acceder al backend de tu sitio.

Una vez que estés dentro, coloca el cursor sobre la opción LiteSpeed Cache en la barra de menú de la izquierda. Cuando el submenú esté expandido, da clic en la opción Optimización de Página.

Configuración de las opciones “Optimización de la página” #

Si tu sitio web ya se está cargando muy rápido, los beneficios que recibirás de estas configuraciones son realmente menores (si es que los hay). Por eso, recomendamos dejarlos en sus valores predeterminados a menos que tengas experiencia avanzada y comprendas completamente cómo afectará cada configuración a tu sitio. Si deseas minificar tu sitio web para mejorar los puntajes en herramientas de pruebas de velocidad, a continuación encontrarás una explicación detallada de cada opción disponible.

Configuración de la Pestaña “Ajustes de CSS” #

• Minificar CSS: la opción predeterminada es “OFF”. Cambia a “ON” solo si realmente quieres minificar tu CSS.
• Combinar CSS: predeterminado en “OFF”. Combinará todos los archivos CSS en uno solo, lo que puede causar errores de diseño. Verifica tu sitio si decides activarlo.
• Push HTTP/2 de CSS: predeterminado en “OFF”. Envía los archivos CSS al navegador antes de ser solicitados. Puede ser útil si tienes muchos archivos CSS, de lo contrario, el impacto en la velocidad será mínimo.
• Cargar CSS asíncronamente: predeterminado en “OFF”. Activarlo permite que CSS y contenido HTML se carguen de forma asincrónica, aumentando la velocidad, pero puede generar el efecto FOUC que afecte la experiencia del usuario.
• Generar CSS crítico: predeterminado en “OFF” y solo funciona si la opción anterior está habilitada. Recomendamos mantenerlo deshabilitado a menos que tengas muchos archivos CSS en la parte superior de tu página.
• Generar CSS crítico en segundo plano: si activas la opción anterior, mantenla habilitada. Permite cargar CSS crítico en segundo plano mediante cron.
• Tipos de contenido de caché de CSS distintos: cada conjunto de CSS crítico se asigna a un tipo de publicación específico (páginas, publicaciones, categorías, etiquetas, productos). Puedes agregar otros tipos de contenido personalizado si lo deseas.
• Distintas URIs de caché CSS: similar a la opción anterior, pero permite especificar un URI con CSS personalizado.
• Biblioteca de CSS integrado asíncrono: predeterminado en “OFF” para evitar problemas de FOUC.
• Optimización de visualización de fuentes: predeterminado en “Por defecto”. También puedes usar “Block” o “Optional” según tu preferencia; estas opciones reducen la probabilidad de FOUC y mantienen la experiencia de usuario fluida.

Configuración de la Pestaña “Ajustes de JS” #

• Minificar JS: la opción predeterminada es “OFF”. Cambia a “ON” solo si deseas implementar la minificación de JS.
• Combinar JS: predeterminado en “OFF”. Combinará todos los archivos JS en uno solo y puede causar errores en tu sitio. Si decides activarlo, revisa cuidadosamente tu sitio después.
• Push HTTP/2 de JS: predeterminado en “OFF”. Envía los archivos JS al navegador antes de ser solicitados. Puede ser útil si tienes muchos archivos JS; de lo contrario, el impacto en la velocidad será mínimo.
• Deferir carga de JS: predeterminado en “OFF”. Activarlo puede mejorar puntajes en herramientas como GTMetrix o Pingdom, pero los scripts se cargarán después del HTML, lo que podría afectar la experiencia del usuario (UX).
• Cargar JS integrado: recomendamos mantener el valor predeterminado “Por defecto”. Las otras opciones pueden mejorar los puntajes en sitios de prueba, pero podrían causar que algunos scripts JS no funcionen correctamente.

Configuración de la Pestaña “Ajuste HTML” #

• TTL de caché CSS/JS: recomendamos mantener la configuración predeterminada (604800 segundos, equivalentes a 7 días). Es suficiente si estás realizando cambios frecuentes en tu sitio. Puedes aumentarlo si tu sitio está terminado y no planeas cambios a corto plazo.
• Minificar HTML: predeterminado en “OFF”. Cambia a “ON” solo si deseas implementar la minificación de HTML.
• Prefetch DNS: una opción muy útil. Te permite escribir URLs externas desde las que tu sitio carga contenido, mejorando la velocidad para visitantes nuevos. Para obtener estas URLs:
  1. Abre Chrome y presiona F12 para abrir el Inspector de Elementos.
  2. Selecciona la pestaña Sources en la parte superior.
  3. En el lado izquierdo, verás todas las páginas externas desde las que tu sitio recibe contenido.
  4. Escríbelas en el cuadro de contenido del plugin para precargar DNS.
• Control del prefetch DNS: puedes habilitarlo para amplificar el efecto anterior, aunque en nuestra experiencia no ofrece un beneficio significativo. Mantenerlo en “OFF” está bien.
• Eliminar query strings: recomendable solo si quieres mejorar los puntajes en pruebas de velocidad. Actívalo cuando consideres terminado el diseño de tu sitio.
• Cargar Google Fonts asíncronamente: útil solo si rara vez visitas sitios desde la misma computadora que usas para crear tu sitio. De lo contrario, el navegador ya tendrá las fuentes en caché.
• Eliminar Google Fonts: opción válida si usas fuentes locales. Activarla puede mejorar notablemente la velocidad y reducir la dependencia de Google Fonts.
• Eliminar emojis de WordPress: los navegadores modernos ya soportan emojis de forma nativa. Mantén esta opción apagada, ya que no aumentará la velocidad en la mayoría de los casos.
• Eliminar la etiqueta Noscript: estas etiquetas permiten compatibilidad con navegadores antiguos o con JS desactivado. Activarlas reduce el tamaño de la página, pero disminuye compatibilidad. Evalúa si la ganancia en eficiencia vale la pérdida de compatibilidad.

Configuración de la Pestaña “Ajustes de Medios” #

• Retrasar la carga de imágenes (Lazy Load): habilita la carga diferida de imágenes. Las imágenes se cargarán a medida que el usuario se desplaza por la página. Recomendado solo si tienes muchas imágenes grandes de alta resolución.
• Marcador de posición de imagen básica: si la carga diferida está habilitada, permite mostrar una imagen temporal (base64) mientras la imagen original se carga.
• Marcador de posición adaptable: recomendado si Lazy Load está activado. Mantiene las dimensiones de la imagen para evitar que la página se reorganice al cargar.
• Marcador de posición SVG adaptable: permite configurar un SVG como marcador de posición receptivo.
• Color del marcador de posición adaptable: define un color neutro que no distraiga a los visitantes. El gris suele ser una buena opción.
• Generador de LQIP en la nube: LQIP (marcador de posición de imagen de baja calidad) requiere QUIC.cloud. Carga una versión de baja calidad de la imagen para que parezca más rápida la carga.
• Calidad de LQIP: rango de 1 a 20. Menor valor = menor calidad. Recomendado: 4.
• Dimensiones mínimas de LQIP: define el tamaño mínimo de la imagen para generar el marcador de posición. Si la imagen es más pequeña, no se generará.
• Generar LQIP en segundo plano: mantener en “ON” si se usan Lazy Load y marcadores de posición. Esto genera los marcadores automáticamente mediante cron sin afectar al visitante.
• Retrasar la carga de iframes: habilita Lazy Load para iframes y videos incrustados, útil si están en la mitad superior de la página.
• Biblioteca integrada de imágenes en carga diferida: inserta la biblioteca Lazy Load JS directamente en tu HTML, evitando solicitudes externas adicionales. Solo actívalo si tu código está optimizado; de lo contrario, podría degradar el rendimiento.

Configuración de la Pestaña “Exclusiones de Medios” #

• Exclusiones de carga retrasada de imágenes: permite excluir imágenes de Lazy Load. Útil para imágenes que los visitantes verán inmediatamente y que no deben retrasarse.
• Exclusión de nombres de clases para carga diferida de imágenes: permite excluir imágenes de Lazy Load según su clase CSS.
• Exclusiones de carga diferida de clases padres: permite incluir la clase CSS principal de imágenes que se benefician de Lazy Load, útil para imágenes sin clase propia.
• Exclusiones de carga diferida de clases de iframes: permite excluir videos que tardan más en cargar o que están en la mitad superior de la página.
• Exclusiones de carga diferida de clases padre de iframes: permite incluir la clase CSS principal de iframes que se benefician de Lazy Load, útil para videos sin clase propia.
• Exclusión de URIs de carga diferida: permite excluir páginas completas de Lazy Load. Ideal para páginas de destino o donde quieres que todas las imágenes y videos se carguen de inmediato.

Configuración de la Pestaña “Localización” #

• Caché de Gravatar: habilita el almacenamiento en caché de Gravatar de forma local. Útil en sitios con muchas publicaciones y comentarios.
• Cron de la caché de Gravatar: habilita solo si la opción anterior está activada; de lo contrario, mantenla en “OFF”.
• TTL de la caché de Gravatar: predeterminado en 1 semana (604800 segundos). Déjalo así a menos que los usuarios cambien sus Gravatars con frecuencia.

Configuración de la Pestaña “Retoques” #

• Excluir CSS: permite listar los archivos CSS que deseas excluir de la minificación o combinación.
• Excluir JS: permite listar los archivos JS que deseas excluir de la minificación o combinación.
• Reglas de CSS críticas: útil solo si la opción “Cargar CSS asincrónicamente” está habilitada. Permite separar archivos CSS adicionales que deseas cargar en la parte superior de la página. El plugin los agregará al CSS recién generado.
• Exclusiones de diferido de JS: útil cuando “Cargar JS diferido” está activado. Permite especificar URI o cadenas parciales que no deben diferirse.
• URL excluidas: lista los URI que deseas excluir por completo de las optimizaciones de la página. Ideal para páginas que se vean afectadas negativamente por las funciones de optimización, evitando deshabilitar las opciones para todo el sitio.
• Excluir perfiles: permite excluir ciertas opciones de optimización para roles de usuario específicos en WordPress. Útil para solucionar problemas relacionados con un rol particular.

Cuando se hayan establecido todas las configuraciones en cada pestaña, debes guardarlas. Esto se hace haciendo clic en el botón Guardar Cambios en cada una de las pestañas, que se ubicarán en la esquina superior derecha o en la parte inferior izquierda de la página.