Cómo configurar la “Optimización de página” del plugin LiteSpeed Cache de WordPress

Introducción #

LiteSpeed Cache para WordPress es un poderoso plugin de optimización. Es una colección de múltiples funciones integradas en una herramienta práctica, que se integra directamente en tu panel de administración de WordPress.

Después de instalar el plugin, es fundamentalmente importante revisar y configurarlo con atención para lograr los mejores resultados posibles.

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.

Acceder a las opciones de Optimización de Página #

Para comenzar, debe iniciar sesión en tu Panel de administración de WordPress. Para hacerlo, agrega «/wp-admin» a tu nombre de dominio, por ejemplo, «miwordpress.com/wp-admin» donde «miwordpress.com» es tu dominio real.

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.

Al hacer eso, serás redirigido a la sección de Optimización de Página de LiteSpeed

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 lo que recomendamos dejarlos en sus valores predeterminados a menos que tengas mucha experiencia con ellos y entiendas completamente que es lo que hará cada configuración en tu sitio. Si realmente insistes en tener algún tipo de minificación en tu sitio web para obtener mayores puntajes en los sitios de pruebas de referencia, entonces revisa ahora una explicación de cada una de las opciones disponibles.

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

• Minificar CSS: la opción predeterminada aquí es “OFF”. Como se mencionó anteriormente, si deseas minificar tu CSS cambia esta opción a “ON”
• Combinar CSS: la opción predeterminada aquí es “OFF”, y esto se debe a una buena razón. Combinará todos los archivos CSS en un solo archivo y puede causar problemas con tu sitio. Si desea utilizarlo, luego de activarlo verifica que tu sitio no presente errores de diseño.
• Push HTTP/2 de CSS: la opción predeterminada aquí es “OFF”. Envía los archivos CSS al navegador antes de que se soliciten. Puede ser beneficioso para tu sitio si tienes muchos archivos CSS; de lo contrario, lo más probable es que no aumente la velocidad.
• Cargar CSS asíncronamente: la configuración predeterminada aqui es “OFF”. Cuando se realiza una solicitud hacia tu sitio web, el CSS se carga antes que el contenido dentro del cuerpo HTML. Si se activa, tanto el CSS como el contenido se cargarán de forma asincrónica, lo que aumentará la velocidad de carga de la página. Sin embargo, esto puede resultar en el llamado efecto FOUC, que podría dañar la experiencia del usuario.
• Generar CSS crítico: esta configuración está predeterminada en “OFF” y solo funcionará si la opción anterior está habilitada. Nuestra recomendación con respecto a esta opción es dejarla deshabilitada a menos que tengas una gran cantidad de archivos CSS y la mayoría de ellos estén cargados en la mitad superior de tu página. De lo contrario, los beneficios serán nulos, dado que la caché del navegador se encargará de la distribución rápida de archivos CSS al visitante cuando se acceda a tu sitio.
• Generar CSS crítico en segundo plano: si decides optar por la opción anterior, déjalo habilitado, ya que permitirá que el CCS crítico se cargue en segundo plano utilizando una cola basada en cron.
• Tipos de contenido de caché de CCSS distintos: cada conjunto de CSS crítico tiene un tipo de publicación específico. Los predeterminados son para publicaciones, páginas, categorías, etiquetas o productos. Puedes utilizar este cuadro de contenido para agregar otros tipos de publicaciones personalizadas implementadas (si existen) que aprovecharán el CCSS.
• Distintas URIs de caché CCSS: este cuadro de contenido es similar al anterior, sin embargo, esta vez, puedes especificar un URI que use CSS personalizado, en lugar de tipos de publicación.
• Biblioteca de CSS integrado asíncrono: el valor predeterminado aquí es “OFF”, y debería permanecer así si deseas evitar los problemas de FOUC, mencionados anteriormente.
• Optimización de visualización de fuentes: el valor predeterminado aquí se establece como “Por defecto”. Recomendamos seguir con él o usar “Block”, ya que los estudios en línea muestran que es menos probable que estos dos causen el efecto FOUC. Una muy buena opción aquí es la opción “Optional”, ya que es más flexible en prácticamente todas las situaciones en las que la experiencia del usuario no se verá obstaculizada por su conexión a Internet y la fuente en sí no es crítica para la experiencia del usuario.

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

• Minificar JS: la opción predeterminada aquí es “OFF”. Como se mencionó anteriormente, si deseas implementar la minificación de JS, cambia esta opción a “ON”
• Combinar JS: la opción predeterminada aquí es “OFF” y por una buena razón. Combinará todos los archivos JS en un solo archivo y puede causar problemas con tu sitio. Si desea utilizarlo, no olvides revisar tu sitio después de activada esta opción.
• Push HTTP/2 de JS: la opción predeterminada aquí es “OFF”. Envía los archivos JS al navegador antes de que se soliciten. Puede ser beneficioso para tu sitio, si tienes muchos archivos JS; de lo contrario, lo más probable es que no aumente la velocidad.
• Deferir carga de JS: deja esta configuración con su valor predeterminado “OFF”. Habilitarlo puede aumentar las puntuaciones en sitios como GTMetrix o Pingdom, pero los scripts se cargarán una vez finalizado el HTML, y esto podría dañar la UX (experiencia del usuario).
• Cargar JS integrado: recomendamos ceñirte al valor predeterminado “Por defecto”. Las otras dos configuraciones pueden aumentar las puntuaciones de las páginas en varios sitios web de referencia. Sin embargo, pueden hacer que tus scripts JS no funcionen correctamente.

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

• TTL de caché CSS/JS: recomendamos mantener la configuración predeterminada (604800 segundos). Traducido a días: esto equivale a 7 días, que es más que suficiente si estás realizando cambios en tu sitio web. Puedes aumentarlo si crees que has terminado de construir el sitio y no vas a realizar ningún cambio en el futuro cercano.
• Minificar HTML: la opción predeterminada aquí es “OFF”. Como se mencionó anteriormente, si desea implementar la minificación de HTML, cambia esta opción a “ON”
• Prefetch DNS: ¡esta es una opción increíble! El cuadro de contenido que se presenta en esta configuración te permitirá escribir URL externas desde las que estás cargando contenido en tu sitio. Esto puede mejorar significativamente la velocidad de carga, especialmente para los visitantes más nuevos. Para obtener todas las URL externas que están cargadas en tu sitio, simplemente sigue estos pasos:
  • abre tu Chrome y presione el botón “F12” en tu teclado. Esto abrirá una ventana llamada el Inspector de Elemtnos, seguramente en la parte inferior de la pantalla.
  • En la parte superior de esta ventana, verás una barra de menú.
  • De las pestañas que se presentan allí, selecciona la pestaña “Sources”.
  • Al hacerlo, se actualizará el menú y, en el lado izquierdo, verás todas las páginas desde las que tu sitio web recibe contenido externo.
  • Ahora, todo lo que necesita hacer es escribirlos dentro del cuadro de contenido provisto para que el plugin puedas precargar DNS.
• Control del prefetch DNS: puedes habilitar esta opción para amplificar aún más el efecto de la anterior, sin embargo, en nuestra experiencia, esto realmente no ha demostrado ningún resultado importante. Puedes jugar con él, pero dejarlo con su opción predeterminada “OFF” debería estar bien.
• Eliminar query strings: al igual que la opción anterior, recomendamos habilitar esto solo si te interesan los resultados de la puntuación de la página en los sitios web de referencia. En nuestra opinión, habilítalo cuando creas que ha terminado con el diseño de tu sitio web.
• Cargar Google Fonts asíncronamente: si rara vez visitas sitios web desde la computadora desde la que estás creando tu sitio, puedes habilitar esta opción. Si accedes a varios sitios web con regularidad, no deberías molestarte en hacerlo, ya que tu navegador seguramente ha almacenado en caché todas las fuentes web necesarias de Google de todos modos.
• Eliminar Google Fonts: una opción viable si utilizas fuentes almacenadas localmente. Si ese es el caso y está habilitado, es posible que vea una diferencia drástica en el diseño del sitio web.
• Eliminar emojis de WordPress: hoy en día, todos los navegadores modernos y actualizados admiten emojis, y esta opción no beneficiará realmente, ya que tienen esta opción de forma nativa. Recomendamos mantenerlo apagado ya que realmente no mostrará ningún aumento de velocidad y solo las personas con navegadores muy antiguos notarán alguna diferencia.
• Eliminar la etiqueta Noscript: Las etiquetas Noscript se utilizan por motivos de compatibilidad con navegadores antiguos que no admiten JavaScript o navegadores modernos en los que JS está desactivado por motivos de seguridad. Le dan al navegador instrucciones sobre qué hacer si no puede ejecutar el script asociado. Sin embargo, estas etiquetas ocupan espacio. Con esta opción habilitada, las etiquetas se eliminan, lo que da como resultado un tamaño de página más pequeño, pero menos compatibilidad para navegadores sin JavaScript funcional. Deberás decidir por tí mismo si las ganancias de eficiencia valen la pena por las pérdidas de compatibilidad.

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

• Retrasar la carga de imágenes: habilita las imágenes de carga diferida en tu sitio. Esto permite que las imágenes se carguen gradualmente, a medida que se desplaza por el sitio. Solo recomendamos habilitar esta función si tienes muchas imágenes e imágenes grandes de alta resolución, ya que este es el único momento en el que realmente te beneficiarás de Lazy Load.
• Marcador de posición de imagen básica: si la carga diferida está habilitada, puedes establecer un “marcador de posición” de imagen que se mostrará inmediatamente y desaparecerá lentamente mientras la imagen original ocupa su lugar. Puedes utilizar este campo de texto para establecer una imagen base64.
• Marcador de posición adaptable: si tienes la carga diferida habilitada, es una buena idea habilitarla también. Obedecerá las dimensiones establecidas para la imagen y evitará la reorganización de la página.
• Marcador de posición SVG adaptable: puedes configurar la imagen que se utilizará como su marcador de posición receptivo en este campo de texto.
• Color del marcador de posición adaptable: te permite establecer el color del marcador de posición de la imagen de tus imágenes de carga diferida. Debes configurar algo que no sea ruidoso y no atraiga la atención de los visitantes. El gris es una gran opción.
• Generador de LQIP en la nube: LQIP o (marcador de posición de imagen de baja calidad) es una función compatible solo si tienes QUIC.cloud habilitado. Te permitirá cargar una imagen de menor calidad de la imagen original con carga diferida para que parezca que se carga más rápido.
• Calidad de LQIP: esto te permitirá definir la calidad de la imagen LQIP. El rango es de 1 a 20, y cuanto más bajo sea, menor será la calidad de la imagen. Los desarrolladores del plugin recomiendan que lo configures en 4, y creemos que también es la calidad óptima.
• Dimensiones mínimas de LQIP: esta opción te permitirá definir las dimensiones mínimas que cumplirá el plugin al solicitar imágenes. Si la imagen tiene dimensiones por debajo del umbral establecido, no se generará como marcador de posición.
• Generar LQIP en segundo plano: si estás utilizando Lazy-Load y marcadores de posición, debes establecer esta opción en “ON”. Es una operación basada en cron que generará cada uno de los marcadores de posición en segundo plano sin que un visitante tenga que acceder a la página.
• Retrasar la carga de iframes: esto habilitará la tecnología de carga diferida para iframes e incrustaciones de vídeo. Una gran opción si tienes dicho contenido, y se encuentra en la mitad superior de la página.
• Biblioteca integrada de imágenes en carga diferida: esta es otra opción interesante. Esto insertará la biblioteca Lazy Load JS dentro de tu código HTML, y no necesitarás solicitudes adicionales para extraer estas bibliotecas en tu sitio. Recomendamos habilitar esto si crees que el código de tu sitio web está perfectamente hecho u optimizado; de lo contrario, es posible que veas un rendimiento degradado.

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

• Exclusiones de carga retrasada de imágenes: puedes utilizar este cuadro de contenido para excluir imágenes de Lazy Load. Esta es una excelente opción para las imágenes que es probable que los visitantes vean de inmediato y deseas evitar el efecto de carga diferida.
• Exclusión de nombres de clases para carga diferida de imágenes: este cuadro de contenido proporciona una forma conveniente de excluir imágenes de la carga diferida en función de su clase CSS.
• Exclusiones de carga diferida de clases padres: este cuadro de contenido proporciona una forma inteligente de incluir la clase CSS principal de las imágenes que se beneficia de la carga diferida. Útil para imágenes que no tienen una clase CSS propia.
• Exclusiones de carga diferida de clases de iframes: utiliza este cuadro de contenido y define vídeos que normalmente tardan más en cargarse o que están cerca de la mitad superior de la página para excluirlos de la tecnología de carga diferida.
• Exclusiones de carga diferida de clases padre de iframes: este cuadro de contenido proporciona una forma inteligente de incluir la clase CSS principal del iframe que se beneficia de la carga diferida. Útil para videos que no tienen una clase CSS propia.
• Exclusión de URIs de carga diferida: puedes utilizar este cuadro de contenido y excluir páginas enteras de la carga diferida. Esto se puede usar para páginas de destino o páginas en las que simplemente deseas que todas las imágenes y videos se carguen de inmediato.

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

• Caché de Gravatar: al habilitar esta opción, se iniciará el almacenamiento en caché de Gravatar localmente. Útil cuando tienes un sitio web que contiene publicaciones con muchos comentarios.
• Cron de la caché de Gravatar: habilita esta opción solo si la opción anterior está habilitada; de lo contrario, déjala en “OFF”.
• TTL de la caché de Gravatar: el valor predeterminado aquí es 1 semana (604800 segundos). A menos que notes que muchas personas cambian su Gravatar con regularidad, déjalo con su configuración predeterminada.

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

• Excluir CSS: con este cuadro de contenido, puedes enumerar todos los archivos CSS que te gustaría excluir de tu minificación o combinación.
• Excluir JS: con este cuadro de contenido, puedes enumerar todos los archivos JS que te gustaría excluir de tu minificación o combinación.
• Reglas de CSS críticas: esto solo te beneficiará si tienes habilitada la opción “Cargar CSS asincrónicamente”. Para separar archivos CCS adicionales que deseas que se carguen en la parte superior de la página CSS sin formato de la misma manera, aparecen en sus estilos. Luego, el plugin los agregará al CSS recién generado.
• Exclusiones de diferido de JS: esto es útil cuando la opción “Cargar JS diferido” se cambia a “ON”. Escribe los URI o las cadenas parciales que desees hacer coincidir.
• URL excluidas: utiliza este cuadro de contenido y enumera los URI que desees excluir por completo de las optimizaciones de la página. Si encuentras páginas en tu sitio web que parecen dañadas después de las funciones de optimización, podría ser una buena idea enumerarlas aquí. Esta es una alternativa mucho mejor que deshabilitar completamente las opciones de optimización para todo el sitio web.
• Excluir perfiles: puedes excluir las opciones de optimización para una función de usuario específica marcando la casilla correspondiente al rol respectivo en tu sitio web de WordPress. El único momento en el que puedes encontrarte usando esto es cuando te gustaría solucionar problemas que involucran un determinado rol.

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.

¡Eso es todo! Todas las configuraciones y sus valores óptimos basados en nuestra opinión y experiencia en la pestaña Optimización de página del plugin LiteSpeed Cache. Debes tener mucho cuidado con ellos, ya que existe el riesgo de romper el diseño de tu sitio web si habilitas algo de lo que no está seguro, si asi sucede, simplemente desactiva esa opción y deberías solucionarlo.