Documentation Produit
ADC
14.1 - Current Release 13.1 13.0 12.1
Voir PDF

Optimisation frontale

April 15, 2024
Contributeur: 
C

Remarque : L’optimisation du front end est disponible si vous possédez une licence NetScaler Advanced ou Premium et que vous exécutez NetScaler version 12.1 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 fortes exigences en termes de performances frontales, c’est-à-dire de performances au niveau du navigateur.

La fonctionnalité d’optimisation du front end (FEO) de NetScaler résout ces problèmes et réduit le temps de chargement et le temps de rendu des pages Web en :

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

Simplification et optimisation du contenu diffusé vers le navigateur client.

Vous pouvez personnaliser votre configuration FEO pour fournir les meilleurs résultats à vos utilisateurs. NetScaler prend en charge de nombreuses optimisations de contenu Web pour les utilisateurs de bureau et mobiles. Les tableaux suivants décrivent les optimisations du front-end fournies par la fonctionnalité FEO et les opérations effectuées sur différents types de fichiers.

Optimisations effectuées par la fonction FEO

Optimisation du Web Problème À quoi sert la fonctionnalité NetScaler FEO Avantages
Doublure Les navigateurs clients envoient souvent plusieurs demandes aux serveurs pour charger des CSS externes, des images et du JavaScript 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 utile pour le contenu qui n’est visualisé qu’une seule fois et pour les appareils mobiles dont la taille de cache est limitée.
Minification Les données extraites des serveurs incluent des caractères non essentiels tels que des espaces blancs, des commentaires et des caractères de saut de ligne. Le temps que les navigateurs passent à traiter ces données crée de la latence sur le site Web. Minification CSS, minification JavaScript, suppression des commentaires HTML Les fichiers minifiés consomment moins de bande passante et évitent la latence causée par un traitement spécial.
Optimisation de l’image Les navigateurs mobiles ont souvent des vitesses de connexion lentes et une mémoire cache limitée. Le téléchargement des 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 réduction 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 NetScaler, ce qui permet aux navigateurs clients de charger les images plus rapidement.
Repositionnement Le traitement inefficace du CSS externe, des images et du code JavaScript 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 limitent le nombre de connexions simultanées pouvant être établies avec un seul domaine. Cela peut amener le navigateur à télécharger les ressources de la page Web une par une, ce qui augmente le temps de navigation. Partage de domaines Surmonte la limitation de connexion, ce qui améliore le temps de rendu des pages en permettant au navigateur client de télécharger davantage de ressources en parallèle.

Optimisations Web sur différents types de fichiers :

NetScaler peut effectuer des optimisations Web sur le CSS, les images, le Javascript et le HTML. Pour plus d’informations, reportez-vous à la section Web Optimisations PDF.

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

Comment fonctionne l’optimisation du front end

Une fois que NetScaler a reçu 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 NetScaler 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.
    • Convertissez 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 initiale du cache.
  3. Pour les demandes suivantes, extrait les objets optimisés depuis le cache, et non depuis le serveur, et transmet 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 nouveau contenu est disponible sur le serveur.

Configurer l’optimisation du front end

Vous pouvez éventuellement modifier les valeurs des paramètres globaux d’optimisation du front end. 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 : NetScaler évalue les stratégies d’optimisation du front end 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 passe par NetScaler, 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. Le NetScaler applique les stratégies dans l’ordre de leurs priorités.

Pour plus d’informations sur la configuration de l’optimisation frontale avec NetScaler, regardez la vidéo suivante :

Pré-requis

L’optimisation du front end nécessite l’activation de la fonctionnalité de mise en cache intégrée de NetScaler. Vous devez également effectuer les configurations de mise en cache intégrées suivantes :

  • Allouez 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, consultez la section Mise en cache intégrée.

Remarque : Le terme Cache intégré peut être utilisé de façon interchangeable avec AppCache ; notez que d’un point de vue fonctionnel, les deux termes signifient la même chose.

Configurer l’optimisation du front end à l’aide de l’interface de commande NetScaler

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

  1. Activez la fonctionnalité d’optimisation du front end.

enable ns feature FEO

  1. Créez une ou plusieurs actions d’optimisation du front-end.

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

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

add feo action allact -imgGifToPng -pageExtendCache

  1. [Facultatif] Spécifiez des valeurs autres que celles par défaut pour les paramètres globaux d’optimisation du front end.

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 all act
>add feo policy pol1 "(HTTP.REQ.URL.CONTAINS("testsite"))" allact1
<!--NeedCopy-->
  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 du front end à un serveur virtuel nommé « abc » :

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

Exemple : Pour appliquer la stratégie d’optimisation du front end à l’ensemble du trafic atteignant l’ADC :

> bind feo global pol1 100 -type REQ_DEFAULT

  1. Enregistrez la configuration. save ns config

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

  1. Accédez à Optimisation > Optimisation frontale > Actions, puis cliquez sur Ajouter 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 du front end.
  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.
  4. Créez une stratégie d’optimisation frontale.
  5. Accédez à Optimisation > Optimisation du front-end > Stratégies, cliquez sur Ajouter et créez une stratégie d’optimisation du front-end 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 à Optimisation > Optimisation frontale > Stratégies.
    2. Sélectionnez une stratégie d’optimisation frontale et cliquez sur Gestionnaire de stratégies.
    3. Sous Front End Optimization Policy Manager, liez la stratégie d’optimisation frontale à un serveur virtuel d’équilibrage de charge ou de commutation de contenu.

Vérifier la configuration de l’optimisation frontale

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

Vous pouvez également éventuellement afficher les statistiques d’une stratégie FEO, y compris le nombre de sélections que le compteur de stratégie incrémente pendant la 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 NetScaler.

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

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

  • 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 NetScaler

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

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

Optimisation des échantillons :

Reportez-vous à l’ exemple de PDF pour obtenir des exemples d’actions d’optimisation du contenu appliquées au contenu HTML et aux objets incorporés dans le contenu HTML.

Optimisation frontale
April 15, 2024
Contributeur: 
C
April 15, 2024
Contributeur: 
C

Dans cet article

Commentaires sur le site | Your privacy choices footer linkVos préférences de confidentialité | Confidentialité et conditions légales | Préférences de cookies | Paramètres de consentement | docs.cloud.com
© 1999- Cloud Software Group, Inc. All rights reserved.