Citrix ADC

Optimización de front-end

Nota: La optimización de front-end está disponible si tiene una licencia Advanced o Premium Citrix ADC y está ejecutando Citrix ADC versión 10.5 o posterior.

Los protocolos HTTP que subyacen a las aplicaciones web fueron desarrollados originalmente para soportar la transmisión y representación de páginas web simples. Las nuevas tecnologías, como JavaScript y hojas de estilo en cascada (CSS), y los nuevos tipos de medios, como los vídeos Flash y las imágenes ricas en gráficos, imponen grandes exigencias al rendimiento front-end, es decir, al rendimiento a nivel del explorador.

La función Citrix ADC front end Optimization (FEO) soluciona estos problemas y reduce el tiempo de carga y el tiempo de procesamiento de las páginas web mediante:

  • Reducir el número de solicitudes.
  • Necesario para representar cada página.
  • Reducir el número de bytes en las respuestas de página.

Simplificar y optimizar el contenido servido al explorador del cliente.

Puede personalizar su configuración de FEO para proporcionar los mejores resultados a sus usuarios. Los ADC de Citrix admiten numerosas optimizaciones de contenido web para usuarios de escritorio y móviles. En las tablas siguientes se describen las optimizaciones front-end proporcionadas por la función FEO y las operaciones realizadas en diferentes tipos de archivos.

Optimización realizada por la función FEO

Optimización web Problema Qué hace la función Citrix ADC FEO Ventajas
Inlineado Los exploradores cliente suelen enviar varias solicitudes a los servidores para cargar CSS externo, imágenes y JavaScript asociados a la página web. CSS en línea, JavaScript en línea, CSS combine Cargar el CSS externo, las imágenes y JavaScript en línea con los archivos HTML mejora el tiempo de representación de la página. Esta optimización es beneficiosa para el contenido que se verá solo una vez, y para dispositivos móviles con tamaños limitados de caché.
Minificación Los datos obtenidos de los servidores incluyen caracteres no esenciales como espacios en blanco, comentarios y caracteres de nueva línea. El tiempo que los exploradores dedican a procesar dichos datos crea latencia en el sitio web. Minificación de CSS, minificación de JavaScript, eliminación de comentarios HTML Los archivos minificados consumen menos ancho de banda y evitan la latencia causada por el procesamiento especial.
Optimización de imágenes Los exploradores móviles a menudo tienen velocidades de conexión lentas y memoria caché limitada. La descarga de imágenes en clientes móviles consume más ancho de banda, tiempo de procesamiento y espacio en caché, lo que da como resultado la latencia del sitio web. Optimización JPEG, inserción de imagen CSS, atributos de contracción de imagen, conversión GIF a PNG, inserción de imagen HTML, conversión de imagen WebP, JPEG, GIF, conversión de imagen PNG a JPEG-XR Reduce la imagen al tamaño indicado en la etiqueta de imagen por Citrix ADC, lo que permite que los exploradores cliente carguen imágenes más rápido.
Reposicionar El procesamiento ineficiente de CSS externo, imágenes y JavaScript aumenta el tiempo de carga de páginas. Carga diferida de la imagen, CSS se mueve a Head, JavaScript se mueve a fin Reposiciona los elementos HTML para reducir el tiempo de renderizado de las páginas web y permitir que los exploradores cliente carguen los objetos más rápidamente.
Administración de conexiones Muchos exploradores establecen límites en el número de conexiones simultáneas que se pueden establecer a un solo dominio. Esto puede hacer que los exploradores descarguen recursos de páginas web de uno en uno, lo que da como resultado un mayor tiempo de navegación. Fragmentos de dominio Supera la limitación de conexión, lo que mejora el tiempo de representación de páginas al permitir que los exploradores cliente descarguen más recursos en paralelo.

Optimizaciones web realizadas en diferentes tipos de archivos:

Citrix ADC puede realizar optimizaciones web en CSS, imágenes, Javascript y HTML. Para obtener más información, consulte el PDF Optimizaciones web.

Nota: La función de optimización de front-end solo admite caracteres ASCII. No es compatible con el conjunto de caracteres Unicode.

Cómo funciona la optimización de front-end

Después de que Citrix ADC reciba la respuesta del servidor:

  1. Analiza el contenido de la página, crea una entrada en la caché (donde corresponda) y aplica la directiva FEO.

    Por ejemplo, un Citrix ADC puede aplicar las siguientes reglas de optimización:

    • Eliminar espacios en blanco o comentarios presentes dentro de un CSS o JavaScript.
    • Combine uno o más archivos CSS en un archivo.
    • Convertir formato de imagen GIF a formato PNG.
  2. Vuelve a escribir los objetos incrustados y guarda el contenido optimizado en la caché, con una firma diferente a la utilizada para la entrada de caché inicial.
  3. Para solicitudes posteriores, recupera los objetos optimizados de la caché, no del servidor, y reenvía las respuestas al cliente.

Elimine información extraña, como espacios en blanco y comentarios.

Período durante el cual el explorador puede usar el recurso almacenado en caché sin comprobar si el contenido nuevo está disponible en el servidor.

Configurar la optimización de front-end

Opcionalmente, puede cambiar los valores de la configuración global de optimización de front-end. De lo contrario, comience creando acciones que especifiquen las reglas de optimización que se aplicarán a los objetos incrustados.

Después de configurar las acciones, cree directivas, cada una con una regla que especifique un tipo de solicitud para la que optimizar la respuesta y asocie las acciones con las directivas.

Nota: Citrix ADC evalúa las directivas de optimización de front-end únicamente en el momento de la solicitud, no en el momento de la respuesta.

Para poner en práctica las directivas, vincularlas a puntos de enlace. Puede enlazar una directiva globalmente, de modo que se aplique a todo el tráfico que fluye a través del Citrix ADC, o bien puede enlazar la directiva a un servidor virtual de equilibrio de carga o cambio de contenido de tipo HTTP o SSL. Cuando vincule una directiva, asígnele una prioridad. Un número de prioridad inferior indica un valor mayor. El Citrix ADC aplica las directivas en el orden de sus prioridades.

Requisitos previos

La optimización de front-end requiere que se habilite la función de almacenamiento en caché integrado de Citrix ADC. Además, debe realizar las siguientes configuraciones de almacenamiento en caché integradas:

  • Asignar memoria caché.
  • Establezca el tamaño máximo de respuesta y el límite de memoria para un grupo de contenido de caché predeterminado.

Para obtener más información sobre cómo configurar el almacenamiento en caché integrado, consulte Almacenamiento en caché integrado.

Nota: El término caché integrada se puede usar indistintamente con AppCache; tenga en cuenta que desde el punto de vista de la funcionalidad, ambos términos significan lo mismo.

Para configurar la optimización de front-end mediante la interfaz de línea de comandos

En el símbolo del sistema, haga lo siguiente:

  1. Habilite la función de optimización de front-end.

enable ns feature FEO

  1. Cree una o más acciones de optimización front-end.

add feo action <name> [-imgShrinkToAttrib] [-imgGifToPng] ...

Ejemplo: Para agregar una acción de optimización front-end para convertir imágenes en formato GIF a formato PNG y ampliar el período de caducidad de la caché:

add feo action allact -imgGifToPng -pageExtendCache

  1. [Optativo]Especifique valores no predeterminados para la configuración global de optimización de front-end.

set feo parameter [-cacheMaxage <integer>] [-JpegQualityPercent <integer>] [-cssInlineThresSize <integer>] [-inlineJsThresSize <integer> [-inlineImgThresSize <integer>]

Ejemplo: Para especificar el período máximo de caducidad de la caché:

set feo parameter -cacheMaxage 10

  1. Cree una o más directivas de optimización de front-end.

add feo policy <name> <rule> <action>

Ejemplo: Para agregar una directiva de optimización de front-end y asociarla con la acción allact especificada anteriormente:

>add feo policy pol1 TRUE allact >add feo policy pol1 "(HTTP.REQ.URL.CONTAINS(\"testsite\"))" allact1

  1. Enlazar la directiva a un servidor virtual de equilibrio de carga o conmutación de contenido, o vincularla globalmente.
bind lb vserver <name> -policyName <string> -priority <num>

bind cs vserver <name> -policyName <string> -priority <num>

bind feo global <policyName> <priority> -type <type> <gotoPriorityExpression>

Ejemplo: Para aplicar la directiva de optimización front-end a un servidor virtual denominado “abc”:

> bind lb vserver abc -policyName pol1 -priority 1 -type NONE

Ejemplo: Para aplicar la directiva de optimización de front-end para todo el tráfico que llega al ADC:

> bind feo global pol1 100 -type REQ_DEFAULT

  1. Guarde la configuración. save ns config

Configure la optimización de front-end mediante la interfaz gráfica de usuario

  1. Vaya a Optimización > Optimización de front-end > Acciones, haga clic en Agregar y cree una acción de optimización de front-end especificando los detalles pertinentes.
  2. [Optativo] Especifique la configuración global de optimización de front-end.
  3. Vaya a Optimización > Optimización de front-end y, en el panel derecho, en Configuración, haga clic en Cambiar configuración de optimización de front-end y especifique la configuración global de optimización de front-end.

    Optimización de front-end

  4. Cree una directiva de optimización front-end.
  5. Vaya a Optimización > Optimización de front-end > Directivas, haga clic en Agregar y cree una directiva de optimización de front-end especificando los detalles pertinentes.
  6. Enlazar la directiva a un servidor virtual de equilibrio de carga o cambio de contenido.
    1. Vaya a Optimización > Optimización de front-end > Directivas.
    2. Seleccione una directiva de optimización front-end y haga clic en Administrador de directivas.
    3. En la página Administrador de directivas de optimización del front-end, establezca los siguientes parámetros:

      1. Punto de enlace. Punto de enlace para conectar la directiva de optimización de front-end a un servidor virtual de equilibrio de carga o conmutación de contenido.
      2. Tipo de conexión. Tipo de solicitud de conexión.
      3. Enlace de directivas. Seleccione una directiva para enlazar al servidor virtual.
      4. Detalles de enlace. Introduzca los detalles de la expresión de prioridad y goto.
  7. Haga clic en Bind.

    Administrador de directivas de optimización de front-end

Verificar la configuración de optimización de front-end

La utilidad de panel muestra estadísticas detalladas y de resumen en formatos tabulares y gráficos. Puede ver las estadísticas de FEO para evaluar su configuración de FEO.

Opcionalmente, también puede mostrar estadísticas para una directiva FEO, incluido el número de visitas que aumenta el contador de directivas durante FEO basado en directivas.

Nota Para obtener más información acerca de las estadísticas y los gráficos, consulte la ayuda del panel del dispositivo Citrix ADC.

Ver las estadísticas de FEO mediante la interfaz de línea de comandos

En el símbolo del sistema, escriba los siguientes comandos para mostrar un resumen de las estadísticas de FEO, los resultados y los detalles de las directivas de FEO y las estadísticas detalladas de FEO, respectivamente:

  • stat feo Nota: El comando stat feo policy muestra estadísticas solo para las directivas avanzadas de FEO.
  • show feo policy name
  • stat feo -detail

Ver las estadísticas de FEO en el panel de Citrix ADC

En la interfaz gráfica de usuario del panel, puede:

  • Seleccione Optimización de front-end para mostrar un resumen de las estadísticas de FEO.
  • Haga clic en la ficha Vista gráfica para mostrar la tasa de solicitudes procesadas por la función FEO.

Optimización de ejemplo:

Consulte el PDF Ejemplo de regla de optimización para ver algunos ejemplos de acciones de optimización de contenido que se aplican al contenido HTML y a los objetos incrustados dentro del contenido HTML.

Optimización de front-end