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

Optimización de front-end

April 15, 2024
Contribución de: 
C

Nota: La optimización de front-end está disponible si tiene una licencia Advanced o Premium NetScaler y está ejecutando NetScaler versión 12.1 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 interfaz (FEO) de NetScaler aborda estos problemas y reduce el tiempo de carga y el tiempo de renderizado de las páginas web de la siguiente manera:

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

Simplificar y optimizar el contenido ofrecido al navegador del cliente.

Puede personalizar la configuración de FEO para ofrecer los mejores resultados a sus usuarios. NetScaler admite numerosas optimizaciones de contenido web para usuarios móviles y de escritorio. En las siguientes tablas se describen las optimizaciones del front-end proporcionadas por la función FEO y las operaciones que se realizan en diferentes tipos de archivos.

Optimizaciones realizadas por la función FEO

Optimización web Problema Qué hace la función FEO de NetScaler Ventajas
Revestimiento interno 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 ve solo una vez y para los dispositivos móviles que tienen 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 navegadores 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 un procesamiento especial.
Optimización de imágenes Los navegadores móviles suelen tener velocidades de conexión lentas y una 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 NetScaler, lo que permite a los exploradores web cliente cargar imágenes más rápido.
Reposicionamiento El procesamiento ineficiente de CSS, imágenes y JavaScript externos aumenta el tiempo de carga de la página. 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 navegadores establecen límites en la cantidad de conexiones simultáneas que se pueden establecer en un solo dominio. Esto puede hacer que el explorador descargue los recursos de la página web de uno en uno, lo que aumenta el tiempo de navegación. Fragmentación de dominios Supera la limitación de conexión, lo que mejora el tiempo de procesamiento de la página al permitir que el explorador del cliente descargue más recursos en paralelo.

Optimizaciones web en diferentes tipos de archivos:

NetScaler 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 admite el juego de caracteres Unicode.

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

Después de que NetScaler reciba la respuesta del servidor:

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

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

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

** Elimine la información superflua, como los espacios en blanco y los comentarios.

El período durante el cual el navegador puede utilizar el recurso almacenado en caché sin comprobar si hay contenido nuevo disponible en el servidor.

Configurar la optimización de la interfaz

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

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

Nota: NetScaler 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 vigor las directivas, úntelas a puntos de enlace. Puede vincular una directiva globalmente para que se aplique a todo el tráfico que fluye a través de NetScaler, o puede vincular la directiva a un servidor virtual de equilibrio de carga o conmutación de contenido de tipo HTTP o SSL. Al vincular una directiva, asígnele una prioridad. Un número de prioridad inferior indica un valor más alto. NetScaler aplica las directivas en el orden de sus prioridades.

Para obtener más información sobre cómo configurar la optimización de front-end con NetScaler, consulte el siguiente vídeo:

Requisitos previos

La optimización de la interfaz requiere que esté habilitada la función de almacenamiento en caché integrada de NetScaler. Además, debe realizar las siguientes configuraciones de almacenamiento en caché integrado:

  • Asigne 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.

Configure la optimización de la interfaz de usuario mediante la interfaz de comandos de NetScaler

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

  1. Habilite la función de optimización de la interfaz.

enable ns feature FEO

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

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

Ejemplo: Para agregar una acción de optimización del 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 la interfaz.

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. Enlace la directiva a un servidor virtual de equilibrio de carga o conmutación de contenido, o enlácela 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 del 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 la interfaz a todo el tráfico que llega al ADC:

> bind feo global pol1 100 -type REQ_DEFAULT

  1. Guarde la configuración. guarde 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 la interfaz.
  3. Vaya a Optimización > Optimizacióndeinterfaz y, en el panel derecho, en Configuración, haga clic enCambiar la configuración de optimización de la interfaz y especifique la configuración global de optimización de la interfaz.
  4. Cree una directiva de optimización del front-end.
  5. Vaya a Optimización > Optimizaciónde interfaz>Directivas, haga clic enAgregar y cree una directiva de optimización de interfaz 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 del panel de control muestra estadísticas resumidas y detalladas en formato tabular y gráfico. Puede ver las estadísticas de FEO para evaluar su configuración de FEO.

Si lo desea, también puede mostrar las estadísticas de una directiva de FEO, incluida la cantidad de selecciones que el contador de directivas aumenta durante la FEO basada en directivas.

Nota: Para obtener más información sobre estadísticas y gráficos, consulte la ayuda del panel del dispositivo NetScaler.

Vea 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

Vea las estadísticas de FEO en el panel de control de NetScaler

En la GUI del panel de control, puede:

  • Seleccione Optimización de interfaz 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
April 15, 2024
Contribución de: 
C
April 15, 2024
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.