Citrix ADC

Optimisation frontale

Remarque : L’optimisation frontale est disponible si vous disposez d’une licence Citrix ADC Advanced ou Premium et que vous exécutez Citrix ADC version 10.5 ou ultérieure.

Les protocoles HTTP qui sous-tendent les applications Web ont été développés à l’origine pour prendre en charge la transmission et le rendu de pages Web simples. Les nouvelles technologies telles que JavaScript et les feuilles de style en cascade (CSS), ainsi que les nouveaux types de médias tels que les vidéos Flash et les images riches en graphiques, imposent de lourdes exigences sur les performances front-end, c’est-à-dire sur les performances au niveau du navigateur.

La fonctionnalité d’optimisation frontale (FEO) de Citrix ADC résout ces problèmes et réduit le temps de chargement et de rendu des pages Web en :

  • Réduction du nombre de demandes.
  • Requis pour le rendu de chaque page.
  • Réduction du nombre d’octets dans les réponses de page.

Simplifier et optimiser le contenu servi au navigateur client.

Vous pouvez personnaliser votre configuration FEO pour fournir les meilleurs résultats pour vos utilisateurs. Les Citrix ADC prennent en charge de nombreuses optimisations de contenu Web pour les utilisateurs de bureau et mobiles. Les tableaux suivants décrivent les optimisations frontales fournies par la fonction FEO et les opérations effectuées sur différents types de fichiers.

Optimisations effectuées par la fonction FEO

Optimisation Web Problème Que fait la fonctionnalité Citrix ADC FEO Avantages
En ligne Les navigateurs clients envoient souvent plusieurs requêtes aux serveurs pour le chargement de CSS, d’images et de JavaScript externes associés à la page Web. CSS en ligne, JavaScript en ligne, CSS combiner Le chargement du CSS externe, des images et du JavaScript en ligne avec les fichiers HTML améliore le temps de rendu des pages. Cette optimisation est bénéfique pour le contenu qui ne sera affiché qu’une seule fois et pour les appareils mobiles dont la taille de cache est limitée.
Minimisation Les données extraites des serveurs comprennent des caractères inessentiels tels que des espaces blancs, des commentaires et des caractères de nouvelle ligne. Le temps que les navigateurs passent dans le traitement de ces données crée une latence du site Web. minimisation CSS, minimisation JavaScript, suppression des commentaires HTML Les fichiers miniaturisés consomment moins de bande passante et évitent la latence causée par un traitement spécial.
Optimisation des images Les navigateurs mobiles ont souvent des vitesses de connexion lentes et une mémoire cache limitée. Le téléchargement d’images sur des clients mobiles consomme plus de bande passante, de temps de traitement et d’espace cache, ce qui entraîne une latence du site Web. Optimisation JPEG, insertion d’image CSS, Attributs de retrait d’image, conversion GIF en PNG, insertion d’image HTML, conversion d’image WebP, JPEG, GIF, conversion d’image PNG en JPEG-XR Réduit l’image à la taille indiquée dans la balise d’image par Citrix ADC, ce qui permet aux navigateurs clients de charger les images plus rapidement.
Repositionnement Le traitement inefficace de CSS, d’images et de JavaScript externes augmente le temps de chargement des pages. Chargement paresseux de l’image, déplacement CSS vers la tête, déplacement JavaScript vers la fin Repositionne les éléments HTML, pour réduire le temps de rendu des pages Web et permettre aux navigateurs clients de charger les objets plus rapidement.
Gestion des connexions De nombreux navigateurs fixent des limites sur le nombre de connexions simultanées pouvant être établies à un seul domaine. Cela peut amener les navigateurs à télécharger les ressources de page Web une à la fois, ce qui augmente le temps des navigateurs. Partage de domaine Surmonte la limite de connexion, ce qui améliore le temps de rendu des pages en permettant aux navigateurs clients de télécharger davantage de ressources en parallèle.

Optimisations Web effectuées sur différents types de fichiers :

Citrix ADC peut effectuer des optimisations Web sur CSS, images, Javascript et HTML. Pour plus d’informations, voir le pdf Optimisations Web.

Remarque : La fonctionnalité d’optimisation frontale ne prend en charge que les caractères ASCII. Il ne prend pas en charge le jeu de caractères Unicode.

Fonctionnement de l’optimisation frontale

Une fois que Citrix ADC reçoit la réponse du serveur :

  1. Analyse le contenu de la page, crée une entrée dans le cache (le cas échéant) et applique la stratégie FEO.

    Par exemple, un Citrix ADC peut appliquer les règles d’optimisation suivantes :

    • Supprimez les espaces blancs ou les commentaires présents dans un CSS ou JavaScript.
    • Combinez un ou plusieurs fichiers CSS en un seul fichier.
    • Convertir le format d’image GIF au format PNG.
  2. Réécrit les objets incorporés et enregistre le contenu optimisé dans le cache, avec une signature différente de celle utilisée pour l’entrée de cache initiale.
  3. Pour les requêtes suivantes, récupère les objets optimisés du cache, et non du serveur, et transfère les réponses au client.

Supprimez les informations superflues telles que les espaces blancs et les commentaires.

Période pendant laquelle le navigateur peut utiliser la ressource mise en cache sans vérifier si du contenu frais est disponible sur le serveur.

Configurer l’optimisation frontale

Vous pouvez éventuellement modifier les valeurs des paramètres globaux d’optimisation frontale. Sinon, commencez par créer des actions qui spécifient les règles d’optimisation à appliquer aux objets incorporés.

Après avoir configuré les actions, créez des stratégies, chacune avec une règle spécifiant un type de demande pour lequel optimiser la réponse, et associez les actions aux stratégies.

Remarque : Citrix ADC évalue les stratégies d’optimisation frontale uniquement au moment de la demande, et non au moment de la réponse.

Pour mettre les stratégies en vigueur, liez-les pour lier des points. Vous pouvez lier une stratégie globalement, de sorte qu’elle s’applique à tout le trafic qui circule via Citrix ADC, ou vous pouvez lier la stratégie à un serveur virtuel d’équilibrage de charge ou de commutation de contenu de type HTTP ou SSL. Lorsque vous liez une stratégie, affectez-lui une priorité. Un numéro de priorité inférieur indique une valeur plus élevée. Citrix ADC applique les stratégies dans l’ordre de leurs priorités.

Conditions préalables

L’optimisation frontale nécessite l’activation de la fonctionnalité de mise en cache intégrée Citrix ADC. En outre, vous devez effectuer les configurations de mise en cache intégrées suivantes :

  • Allouer de la mémoire cache.
  • Définissez la taille maximale de réponse et la limite de mémoire pour un groupe de contenu de cache par défaut.

Pour plus d’informations sur la configuration de la mise en cache intégrée, reportez-vous à la section Mise en cache intégrée.

Remarque : Le terme Cache intégré peut être utilisé de manière interchangeable avec AppCache ; notez que du point de vue de la fonctionnalité, les deux termes signifient la même chose.

Pour configurer l’optimisation frontale à l’aide de l’interface de ligne de commande

À l’invite de commandes, procédez comme suit :

  1. Activez la fonction d’optimisation frontale.

enable ns feature FEO

  1. Créez une ou plusieurs actions d’optimisation frontale.

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

Exemple : Pour ajouter une action d’optimisation frontale pour convertir des images au format GIF au format PNG et prolonger la période d’expiration du cache :

add feo action allact -imgGifToPng -pageExtendCache

  1. [Facultatif] Spécifiez des valeurs différentes de celles par défaut pour les paramètres globaux d’optimisation frontale.

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

Exemple : Pour spécifier la période d’expiration maximale du cache :

set feo parameter -cacheMaxage 10

  1. Créez une ou plusieurs stratégies d’optimisation frontale.

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

Exemple : Pour ajouter une stratégie d’optimisation frontale et l’associer à l’action allact spécifiée ci-dessus :

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

  1. Liez la stratégie à un serveur virtuel d’équilibrage de charge ou de commutation de contenu, ou liez-la globalement.
bind lb vserver <name> -policyName <string> -priority <num>

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

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

Exemple : Pour appliquer la stratégie d’optimisation frontale à un serveur virtuel nommé « abc » :

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

Exemple : Pour appliquer la stratégie d’optimisation frontale pour tout le trafic atteignant ADC :

> bind feo global pol1 100 -type REQ_DEFAULT

  1. Enregistrer la configuration. save ns config

Configurer l’optimisation frontale à l’aide de l’interface graphique

  1. Accédez à Optimization > Front End Optimization > Actions, cliquez sur Add et créez une action d’optimisation frontale en spécifiant les détails pertinents.
  2. [Facultatif] Spécifiez les paramètres globaux d’optimisation frontale.
  3. Accédez à Optimization > Front End Optimization et, dans le volet droit, sous Paramètres, cliquez sur Change Front End Optimization et spécifiez les paramètres globaux d’optimisation frontale.

    Optimisation frontale

  4. Créez une stratégie d’optimisation frontale.
  5. Accédez à Optimization > Front End Optimization > Policies, cliquez sur Add et créez une stratégie d’optimisation frontale en spécifiant les détails pertinents.
  6. Liez la stratégie à un serveur virtuel d’équilibrage de charge ou de commutation de contenu.
    1. Accédez à Optimization > Front End optimization > Policies.
    2. Sélectionnez une stratégie d’optimisation frontale et cliquez sur Gestionnaire de stratégies.
    3. Dans la page Gestionnaire de stratégies d’optimisation frontale, définissez les paramètres suivants :

      1. Point de liaison. Point de liaison permettant de connecter la stratégie d’optimisation frontale à un serveur virtuel d’équilibrage de charge ou de commutation de contenu.
      2. Type de connexion. Type de demande de connexion.
      3. Politique contraignante. Sélectionnez une stratégie pour la liaison au serveur virtuel.
      4. Détails de liaison. Entrez les détails de priorité et de l’expression goto.
  7. Cliquez sur Bind.

    Gestionnaire de stratégies d'optimisation frontale

Vérifier la configuration de l’optimisation frontale

L’utilitaire de tableau de bord affiche des statistiques récapitulatives et détaillées sous forme de tableaux et de graphiques. Vous pouvez afficher les statistiques FEO pour évaluer votre configuration FEO.

Le cas échéant, vous pouvez également afficher des statistiques pour une stratégie FEO, y compris le nombre de visites que le compteur de stratégie incrémente pendant l’opération FEO basée sur une stratégie.

Remarque Pour plus d’informations sur les statistiques et les graphiques, consultez l’aide du Tableau de bord sur l’appliance Citrix ADC.

Afficher les statistiques FEO à l’aide de l’interface de ligne de commande

À l’invite de commandes, tapez les commandes suivantes pour afficher respectivement un résumé des statistiques FEO, des résultats et des détails de stratégie FEO et des statistiques FEO détaillées :

  • stat feo Remarque : La commande stat feo policy affiche des statistiques uniquement pour les stratégies FEO avancées.
  • show feo policy name
  • stat feo -detail

Afficher les statistiques FEO sur le tableau de bord Citrix ADC

Dans l’interface graphique du tableau de bord, vous pouvez :

  • Sélectionnez Optimisation frontale pour afficher un résumé des statistiques FEO.
  • Cliquez sur l’onglet Affichage graphique pour afficher le taux de demandes traitées par la fonction FEO.

Optimisation de l’échantillon :

Reportez-vous au pdf Exemple de règle d’optimisation pour quelques exemples d’actions d’optimisation de contenu appliquées au contenu HTML et aux objets incorporés dans le contenu HTML.

Optimisation frontale