Front-End-Optimierung

Hinweis: Die Front-End-Optimierung ist verfügbar, wenn Sie über eine Advanced oder Premium Citrix ADC Lizenz verfügen und Citrix ADC Version 10.5 oder höher ausführen.

Die HTTP-Protokolle, die Webanwendungen zugrunde liegen, wurden ursprünglich entwickelt, um die Übertragung und Darstellung einfacher Webseiten zu unterstützen. Neue Technologien wie JavaScript und Cascading Stylesheets (CSS) sowie neue Medientypen wie Flash-Videos und grafikreiche Bilder stellen hohe Anforderungen an die Front-End-Performance, also an die Leistung auf Browserebene.

Die Citrix ADC Front-End-Optimierung (FEO) behebt solche Probleme und reduziert die Ladezeit und Renderzeit von Webseiten um:

  • Reduzierung der Anzahl der Anforderungen.
  • Erforderlich für das Rendern jeder Seite.
  • Reduzieren der Anzahl von Bytes in Seitenantworten.

Vereinfachung und Optimierung der Inhalte, die dem Client-Browser bereitgestellt werden.

Sie können Ihre FEO-Konfiguration anpassen, um den Benutzern die besten Ergebnisse zu bieten. Citrix ADCs unterstützen zahlreiche Webinhaltsoptimierungen sowohl für Desktop- als auch für mobile Benutzer. In den folgenden Tabellen werden die Front-End-Optimierungen beschrieben, die von der FEO-Funktion bereitgestellt werden, und die Vorgänge, die für verschiedene Dateitypen ausgeführt werden.

Optimierungen durch die FEO-Funktion

Weboptimierung Problem Funktionen von Citrix ADC FEO Vorteile
Inlining Client-Browser senden oft mehrere Anfragen an Server zum Laden externer CSS, Bilder und JavaScript, die mit der Webseite verknüpft sind. CSS Inline, JavaScript Inline, CSS kombinieren Das Laden von externen CSS, Bildern und JavaScript inline mit den HTML-Dateien verbessert die Seitenrendering-Zeit. Diese Optimierung ist vorteilhaft für Inhalte, die nur einmal angezeigt werden, und für mobile Geräte mit begrenzten Cachegrößen.
Minimierung Daten, die von Servern abgerufen werden, umfassen unwesentliche Zeichen wie Leerzeichen, Kommentare und Zeilenumbrüche. Die Zeit, die Browser mit der Verarbeitung solcher Daten verbringen, erzeugt Website-Latenz. CSS-Minimierung, JavaScript-Minimierung, Entfernen von HTML-Kommentaren Minimierte Dateien verbrauchen weniger Bandbreite und vermeiden die Latenz, die durch spezielle Verarbeitung verursacht wird.
Bildoptimierung Mobile Browser haben oft langsame Verbindungsgeschwindigkeiten und begrenzten Cache-Speicher. Das Herunterladen von Bildern auf mobilen Clients verbraucht mehr Bandbreite, Verarbeitungszeit und Cache-Speicherplatz, was zu Latenz der Website führt. JPEG-Optimierung, CSS-Bild-Inlining, Bildverkleinerungsattribute, GIF-zu-PNG-Konvertierung, HTML-Bild-Inlining, WebP-Bildkonvertierung, JPEG, GIF, PNG in JPEG-XR Bildkonvertierung Reduziert das Bild auf die im Image-Tag von Citrix ADC angegebene Größe, sodass Client-Browser Bilder schneller laden können.
Neupositionierung Die ineffiziente Verarbeitung von externen CSS, Bildern und JavaScript erhöht die Seitenladezeit. Bild lazy loading, CSS move to Head, JavaScript move to end Positioniert HTML-Elemente neu, um die Rendering-Zeit für Webseiten zu reduzieren und Client-Browser zu ermöglichen, die Objekte schneller zu laden.
Verbindungsverwaltung Viele Browser legen Beschränkungen für die Anzahl gleichzeitiger Verbindungen fest, die mit einer einzelnen Domäne hergestellt werden können. Dies kann dazu führen, dass Browser Webseitenressourcen einzeln herunterladen, was zu einer höheren Browserzeit führt. Domänenfreigabeverfahren Überwindet die Verbindungsbeschränkung, wodurch die Zeit für das Rendering von Seiten verbessert wird, da Client-Browsern mehr Ressourcen parallel herunterladen können.

Web-Optimierungen für verschiedene Dateitypen:

Citrix ADC kann Weboptimierungen für CSS, Bilder, Javascript und HTML durchführen. Weitere Informationen finden Sie unter Weboptimierungen (PDF).

Hinweis: Die Frontend-Optimierungsfunktion unterstützt nur ASCII-Zeichen. Der Unicode-Zeichensatz wird nicht unterstützt.

Funktionsweise der Front-End-Optimierung

Nachdem der Citrix ADC die Antwort vom Server empfängt:

  1. Analysiert den Inhalt der Seite, erstellt einen Eintrag im Cache (wo immer zutreffend) und wendet die FEO-Richtlinie an.

    Beispielsweise kann ein Citrix ADC die folgenden Optimierungsregeln anwenden:

    • Entfernen Sie Leerzeichen oder Kommentare, die in einem CSS oder JavaScript vorhanden sind.
    • Kombinieren Sie eine oder mehrere CSS-Dateien zu einer Datei.
    • Konvertieren Sie GIF-Bildformat in PNG-Format.
  2. Schreibt die eingebetteten Objekte neu und speichert den optimierten Inhalt im Cache mit einer anderen Signatur als die für den ursprünglichen Cache-Eintrag verwendete Signatur.
  3. Ruft bei nachfolgenden Anforderungen die optimierten Objekte aus dem Cache ab, nicht vom Server, und leitet die Antworten an den Client weiter.

Entfernen Sie fremde Informationen wie Leerzeichen und Kommentare.

Der Zeitraum, in dem der Browser die zwischengespeicherte Ressource verwenden kann, ohne zu überprüfen, ob neue Inhalte auf dem Server verfügbar sind.

Konfigurieren der Front-End-Optimierung

Optional können Sie die Werte der globalen Einstellungen der Front-End-Optimierung ändern. Andernfalls erstellen Sie zunächst Aktionen, die die Optimierungsregeln angeben, die auf die eingebetteten Objekte angewendet werden sollen.

Erstellen Sie nach dem Konfigurieren von Aktionen Richtlinien mit jeweils einer Regel, die einen Anforderungstyp angibt, für den die Antwort optimiert werden soll, und ordnen Sie die Aktionen den Richtlinien zu.

Hinweis: Citrix ADC wertet Front-End-Optimierungsrichtlinien nur zur Anforderungszeit aus, nicht zur Reaktionszeit.

Um die Richtlinien in Kraft zu setzen, binden Sie sie an Punkte. Sie können eine Richtlinie global binden, sodass sie für den gesamten Datenverkehr gilt, der über den Citrix ADC fließt, oder Sie können die Richtlinie an einen Lastenausgleich oder einen virtuellen Server mit Inhaltswechsel vom Typ HTTP oder SSL binden. Wenn Sie eine Richtlinie binden, weisen Sie ihr eine Priorität zu. Eine niedrigere Prioritätszahl gibt einen höheren Wert an. Citrix ADC wendet die Richtlinien in der Reihenfolge ihrer Prioritäten an.

Voraussetzungen

Für die Front-End-Optimierung muss die integrierte Citrix ADC Caching-Funktion aktiviert sein. Darüber hinaus müssen Sie die folgenden integrierten Caching-Konfigurationen durchführen:

  • Weisen Sie Cache-Speicher zu.
  • Legen Sie die maximale Antwortgröße und das Speicherlimit für eine Standard-Cache-Content-Gruppe fest.

Weitere Hinweise zum Konfigurieren des integrierten Cachings finden Sie unterIntegriertes Caching.

Hinweis: Der Begriff Integrierter Cache kann mit AppCache austauschbar verwendet werden. Beachten Sie, dass beide Begriffe aus funktionaler Sicht gleich sind.

So konfigurieren Sie die Front-End-Optimierung mit der Befehlszeilenschnittstelle

Führen Sie an der Eingabeaufforderung die folgenden Schritte aus:

  1. Aktivieren Sie die Frontend-Optimierungsfunktion.

enable ns feature FEO

  1. Erstellen Sie eine oder mehrere Front-End-Optimierungsaktionen.

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

Beispiel: So fügen Sie eine Front-End-Optimierungsaktion zum Konvertieren von Bildern im GIF-Format in das PNG-Format hinzu und verlängern den Cache-Ablaufzeitraum:

add feo action allact -imgGifToPng -pageExtendCache

  1. [Optional]Geben Sie nicht standardmäßige Werte für globale Einstellungen der Front-End-Optimierung an.

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

Beispiel: So geben Sie den maximalen Cache-Ablaufzeitraum an:

set feo parameter -cacheMaxage 10

  1. Erstellen Sie eine oder mehrere Front-End-Optimierungsrichtlinien.

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

Beispiel: So fügen Sie eine Front-End-Optimierungsrichtlinie hinzu und ordnen sie der oben angegebenen Aktion allact zu:

`>add feo policy pol1 TRUE allact

add feo policy pol1 “(HTTP.REQ.URL.CONTAINS(“testsite”))” allact1`

  1. Binden Sie die Richtlinie an einen Load Balancing oder Content Switching virtuellen Server, oder binden Sie sie global.
bind lb vserver <name> -policyName <string> -priority <num>

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

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

Beispiel: So wenden Sie die Front-End-Optimierungsrichtlinie auf einen virtuellen Server namens abc an:

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

Beispiel: So wenden Sie die Front-End-Optimierungsrichtlinie für den gesamten Datenverkehr an, der den ADC erreicht:

> bind feo global pol1 100 -type REQ_DEFAULT

  1. Speichern Sie die Konfiguration. save ns config

Konfigurieren der Front-End-Optimierung mit der GUI

  1. Navigieren Sie zu Optimierung > Front-End-Optimierung > Aktionen, klicken Sie auf Hinzufügen, und erstellen Sie eine Front-End-Optimierungsaktion, indem Sie die relevanten Details angeben.
  2. [Optional] Geben Sie die globalen Einstellungen für die Front-End-Optimierung an.
  3. Navigieren Sie zu Optimierung > Front-End-Optimierung, und klicken Sie im rechten Fensterbereich unter Einstellungen auf Front-End-Optimierungseinstellungen ändern, und geben Sie die globalen Einstellungen für die Front-End-Optimierung an.
  4. Erstellen Sie eine Front-End-Optimierungsrichtlinie.
  5. Navigieren Sie zu Optimierung > Front-End-Optimierung > Richtlinien, klicken Sie auf Hinzufügen, und erstellen Sie eine Front-End-Optimierungsrichtlinie, indem Sie die relevanten Details angeben.
  6. Binden Sie die Richtlinie an einen Lastenausgleich oder einen virtuellen Server zum Wechseln von Inhalten.
    1. Navigieren Sie zu Optimierung > Front-End-Ptimisierung > Richtlinien.
    2. Wählen Sie eine Front-End-Optimierungsrichtlinie aus, und klicken Sie auf Richtlinien-Manager.
    3. Binden Sie unter Front-End-Optimierungsrichtlinien-Manager die Front-End-Optimierungsrichtlinie an einen Lastenausgleich oder einen virtuellen Server zum Wechseln von Inhalten.

Überprüfen der Konfiguration der Front-End-Optimierung

Das Dashboard-Dienstprogramm zeigt zusammenfassende und detaillierte Statistiken in tabellarischen und grafischen Formaten an. Sie können die FEO-Statistiken einsehen, um Ihre FEO-Konfiguration auszuwerten.

Optional können Sie auch Statistiken für eine FEO-Richtlinie anzeigen, einschließlich der Anzahl der Treffer, die der Richtlinienindikator während richtlinienbasierter FEO erhöht.

Hinweis Weitere Informationen zu Statistiken und Diagrammen finden Sie in der Dashboard-Hilfe zur Citrix ADC Appliance.

Anzeigen von FEO-Statistiken mit der Befehlszeilenschnittstelle

Geben Sie an der Eingabeaufforderung die folgenden Befehle ein, um eine Zusammenfassung der FEO-Statistiken, FEO-Richtlinientreffer und -details sowie detaillierte FEO-Statistiken anzuzeigen:

  • stat feo Hinweis: Der Befehl stat feo policy zeigt Statistiken nur für erweiterte FEO-Richtlinien an.
  • show feo policy name
  • stat feo -detail

Anzeigen von FEO-Statistiken auf Citrix ADC Dashboard

In der Dashboard-GUI können Sie:

  • Wählen Sie Front-End-Optimierung aus, um eine Zusammenfassung der FEO-Statistiken anzuzeigen.
  • Klicken Sie auf die Registerkarte Grafische Ansicht, um die Rate der von der FEO-Funktion verarbeiteten Anforderungen anzuzeigen.

Beispieloptimierung:

Im PDF-Dokument Beispiel für Optimierungsregel finden Sie einige Beispiele für Inhaltsoptimierungsaktionen, die auf HTML-Inhalte und die eingebetteten Objekte innerhalb des HTML-Inhalts angewendet werden.