Produktdokumentation
ADC
14.1 - Current Release 13.1 13.0 12.1
PDF anzeigen

Front-End-Optimierung

April 15, 2024
Beitrag von: 
C

Hinweis:

Die Frontend-Optimierung ist verfügbar, wenn Sie über eine Advanced- oder Premium-NetScaler-Lizenz verfügen und NetScaler Version 12.1 oder höher ausführen.

Die HTTP-Protokolle, die Webanwendungen zugrunde liegen, wurden ursprünglich entwickelt, um die Übertragung und das Rendern 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 NetScaler-Frontend-Optimierungsfunktion (FEO) behebt solche Probleme und reduziert die Lade- und Renderzeit von Webseiten durch:

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

Vereinfachung und Optimierung der Inhalte, die dem Client-Browser zur Verfügung gestellt werden.

Sie können Ihre FEO-Konfiguration anpassen, um Ihren Benutzern die besten Ergebnisse zu bieten. NetScaler unterstützen zahlreiche Optimierungen von Webinhalten sowohl für Desktop- als auch für mobile Benutzer. In den folgenden Tabellen werden die Frontend-Optimierungen beschrieben, die durch die FEO-Funktion bereitgestellt werden, und die Operationen, die für verschiedene Dateitypen ausgeführt werden.

Optimierungen, die durch die FEO-Funktion durchgeführt wurden

Web-Optimierung Problem Welche Funktion bietet NetScaler FEO Vorteile
Inlinieren Clientbrowser senden häufig mehrere Anfragen an Server, um externe CSS, Bilder und JavaScript zu laden, 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 angesehen werden, und für Mobilgeräte mit begrenzten Cachegrößen.
Minimierung Daten, die von Servern abgerufen werden, enthalten unwichtige Zeichen wie Leerzeichen, Kommentare und Zeilenumbrüche. Die Zeit, die Browser für die Verarbeitung solcher Daten aufwenden, führt zu einer Latenz der Website. CSS-Minimierung, JavaScript-Minimierung, Entfernung von HTML-Kommentaren Minimierte Dateien verbrauchen weniger Bandbreite und vermeiden die durch spezielle Verarbeitung verursachte Latenz.
Bild-Optimierung Mobile Browser haben oft langsame Verbindungsgeschwindigkeiten und begrenzten Cache-Speicher. Das Herunterladen der Bilder auf mobile Clients verbraucht mehr Bandbreite, Verarbeitungszeit und Cache-Speicherplatz, was zu einer Website-Latenz führt. JPEG-Optimierung, CSS-Bild-Inlining, Bildschrumpfung -Attribute, GIF zu PNG-Konvertierung, HTML-Bild-Inlining, WebP-Bildkonvertierung, JPEG, GIF, PNG zu JPEG-XR-Bildkonvertierung Reduziert das Bild auf die Größe, die im Image-Tag von NetScaler angegeben wird, sodass Clientbrowser Bilder schneller laden können.
Neupositionierung Eine ineffiziente Verarbeitung von externem CSS, Bildern und JavaScript erhöht die Ladezeit der Seite. 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 es Clientbrowsern zu ermöglichen, die Objekte schneller zu laden.
Verbindungsverwaltung Viele Browser begrenzen die Anzahl gleichzeitiger Verbindungen, die zu einer einzelnen Domain hergestellt werden können. Dies kann dazu führen, dass Browser die Webseitenressourcen nacheinander herunterladen, was zu einer höheren Browserzeit führt. Domain-Sharding Überwindet die Verbindungsbeschränkung, wodurch die Seitenrenderzeit verbessert wird, indem Client-Browser mehr Ressourcen parallel herunterladen können.

Weboptimierungen für verschiedene Dateitypen:

NetScaler kann Weboptimierungen für CSS, Bilder, Javascript und HTML durchführen. Weitere Informationen finden Sie unter PDF zur Weboptimierung .

Hinweis:

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

So funktioniert die Frontend-Optimierung

Nachdem der NetScaler die Antwort vom Server erhalten hat:

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

    Ein NetScaler kann beispielsweise die folgenden Optimierungsregeln anwenden:

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

** Entfernen Sie überflüssige 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.

Frontend-Optimierung konfigurieren

Optional können Sie die Werte der globalen Einstellungen für die Frontend-Optimierung ändern. Andernfalls erstellen Sie zunächst Aktionen, die die Optimierungsregeln festlegen, die auf die eingebetteten Objekte angewendet werden sollen.

Nachdem Sie die Aktionen konfiguriert haben, erstellen Sie 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:

NetScaler evaluiert Frontend-Optimierungsrichtlinien nur zur Anforderungszeit, nicht zur Antwortzeit.

Um die Richtlinien in Kraft zu setzen, binden Sie sie an Bindungspunkte. Sie können eine Richtlinie global binden, sodass sie für den gesamten Datenverkehr gilt, der über den NetScaler fließt, oder Sie können die Richtlinie an einen virtuellen Load-Balancing- oder Content-Switching-Server vom Typ HTTP oder SSL binden. Wenn Sie eine Richtlinie binden, weisen Sie ihr eine Priorität zu. Eine niedrigere Prioritätszahl weist auf einen höheren Wert hin. Der NetScaler wendet die Richtlinien in der Reihenfolge ihrer Prioritäten an.

Weitere Informationen zur Konfiguration der Frontend-Optimierung mit NetScaler finden Sie im folgenden Video:

Voraussetzungen

Für die Frontend-Optimierung muss die integrierte Caching-Funktion von NetScaler aktiviert sein. Außerdem müssen Sie die folgenden integrierten Caching-Konfigurationen durchführen:

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

Weitere Informationen zum Konfigurieren des integrierten Cachings finden Sie unter Integriertes Caching.

Hinweis:

Der Begriff Integrated Cache kann austauschbar mit AppCache verwendet werden; beachten Sie, dass beide Begriffe aus funktionaler Sicht dasselbe bedeuten.

Konfigurieren der Front-End-Optimierung mithilfe der NetScaler Befehlszeilenschnittstelle

Führen Sie an der Eingabeaufforderung Folgendes aus:

  1. Aktivieren Sie die Frontend-Optimierungsfunktion.

enable ns feature FEO

  1. Erstellen Sie eine oder mehrere Aktionen zur Frontend-Optimierung.

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

Beispiel: So fügen Sie eine Frontend-Optimierungsaktion hinzu, um Bilder im GIF-Format in das PNG-Format zu konvertieren und den Cache-Ablaufzeitraum zu verlängern:

add feo action allact -imgGifToPng -pageExtendCache

  1. [Optional] Geben Sie nicht standardmäßige Werte für die globalen Einstellungen der Frontend-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 Frontend-Optimierungsrichtlinien.

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

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

>add feo policy pol1 TRUE all act
>add feo policy pol1 "(HTTP.REQ.URL.CONTAINS("testsite"))" allact1
<!--NeedCopy-->
  1. Binden Sie die Richtlinie an einen virtuellen Load-Balancing- oder Content-Switching-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: Um die Frontend-Optimierungsrichtlinie auf einen virtuellen Server mit dem Namen “abc” anzuwenden:

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

Beispiel: Um die Frontend-Optimierungsrichtlinie auf den gesamten Traffic anzuwenden, der den ADC erreicht, gehen Sie wie folgt vor:

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, und 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 Frontend-Optimierung an.
  3. Navigieren Sie zu Optimierung > Frontend-Optimierungund klicken Sie im rechten Bereich unter Einstellungen auf Frontend-Optimierungseinstellungen ändern und geben Sie die globalen Einstellungen für die Frontend-Optimierung an.
  4. Erstellen Sie eine Richtlinie zur Frontend-Optimierung.
  5. Navigieren Sie zu Optimierung > Frontend-Optimierung > Richtlinien, klicken Sie auf Hinzufügen und erstellen Sie eine Frontend-Optimierungsrichtlinie, indem Sie die entsprechenden Details angeben.
  6. Binden Sie die Richtlinie an einen virtuellen Lastausgleichs- oder Content Switching-Server.
    1. Navigieren Sie zu Optimierung > Front-End-Optimierung > Richtlinien.
    2. Wählen Sie eine Front-End-Optimierungsrichtlinie aus, und klicken Sie auf Richtlinien-Manager.
    3. Binden Sie unter Front End Optimization Policy Managerdie Front-End-Optimierungsrichtlinie an einen virtuellen Load Balancing- oder Content Switching-Server.

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

Das Dashboard-Dienstprogramm zeigt zusammenfassende und detaillierte Statistiken in tabellarischer und grafischer Form 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 Auswahlen, die der Policy-Zähler während des richtlinienbasierten FEO erhöht.

Hinweis: Weitere Informationen zu Statistiken und Diagrammen finden Sie in der Dashboard-Hilfe der NetScaler-Appliance.

FEO-Statistiken mithilfe der CLI anzeigen

Geben Sie an der Eingabeaufforderung die folgenden Befehle ein, um eine Zusammenfassung der FEO-Statistiken, FEO-Richtlinienauswahl 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

FEO-Statistiken auf dem NetScaler-Dashboard anzeigen

In der Dashboard-GUI können Sie:

  • Wählen Sie Frontend-Optimierung aus, um eine Zusammenfassung der FEO Statistiken anzuzeigen.
  • Klicken Sie auf die Registerkarte Graphische Ansicht, um die Rate der Anfragen anzuzeigen, die von der FEO-Funktion bearbeitet wurden.

Proben-Optimierung:

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

Front-End-Optimierung
April 15, 2024
Beitrag von: 
C
April 15, 2024
Beitrag von: 
C

In diesem Artikel

Feedback zur Site | Your privacy choices footer linkIhre Datenschutzauswahl | Datenschutz und rechtliche Bestimmungen | Cookie-Einstellungen | Einstellungen für die Zustimmung | docs.cloud.com
© 1999- Cloud Software Group, Inc. All rights reserved.