Documentación de productos
ADC
14.1 - Current Release 13.1 13.0 12.1
Ver PDF

Optimización de front-end

October 4, 2021
Contribución de: 
C

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 se desarrollaron originalmente para admitir 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 de optimización de front-end (FEO) de Citrix ADC soluciona estos problemas y reduce el tiempo de carga y el tiempo de procesamiento de las páginas web al:

  • 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 web cliente a menudo envían varias solicitudes a los servidores para cargar CSS externos, imágenes y JavaScript asociados con 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 visualiza una sola vez y para dispositivos móviles con tamaños de caché limitados.
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 genera latencia del sitio web. Optimización JPEG, inlineación de imágenes CSS, atributos de reducción de imagen, conversión de GIF a PNG, inlineación de imágenes HTML, conversión de imágenes WebP, JPEG, GIF, conversión de imágenes PNG a JPEG-XR Reduce la imagen al tamaño indicado en la etiqueta de imagen por Citrix ADC, lo que permite a los exploradores web cliente cargar 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 Cambia la posición de los elementos HTML, para reducir el tiempo de representación de las páginas web y permitir que los exploradores web 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 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 Optimizaciones web PDF.

Nota: La función de optimización front-end solo admite caracteres ASCII. No es compatible con el juego 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 dispositivo 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 front-end solo 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 integradas de almacenamiento en caché:

  • 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 la configuración del almacenamiento en caché integrado, consulte Almacenamiento en caché integrado.

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

Configurar la optimización de front-end mediante la interfaz de comandos de Citrix ADC

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 extender el período de caducidad de la caché:

add feo action allact -imgGifToPng -pageExtendCache

  1. [Opcional] 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 varias 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 all act
>add feo policy pol1 "(HTTP.REQ.URL.CONTAINS("testsite"))" allact1
<!--NeedCopy-->
  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 front-end > Accionesy haga clic en Agregar y cree una acción de optimización front-end especificando los detalles relevantes.
  2. [Opcional] 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.
  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 front-end > Directivas.
    2. Seleccione una directiva de optimización front-end y haga clic en Administrador de directivas.
    3. En Front End Optimization Policy Manager, vincule la directiva de optimización front-end a un servidor virtual de equilibrio de carga o conmutación de contenido.

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.

Si lo quiere, también puede mostrar estadísticas de una directiva de FEO, incluido el número de selección que el contador de directivas incrementa durante el 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 CLI

En el símbolo del sistema, escriba los siguientes comandos para mostrar un resumen de las estadísticas de FEO, selección y detalles de la directiva de FEO, y 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 FEO las estadísticas.
  • 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 de ejemplo para obtener 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
October 4, 2021
Contribución de: 
C
October 4, 2021
Contribución de: 
C

En este artículo

Comentarios sobre el sitio | Your privacy choices footer linkSus opciones de privacidad | Condiciones legales y de privacidad | Preferencias de cookies | Parámetros de consentimiento | docs.cloud.com
© 1999- Cloud Software Group, Inc. All rights reserved.