Front-End-Optimierung
Hinweis:死Front-End-Optimierung是verfugbar,您要是über eine Advanced oder Premium NetScaler Lizenz verfügen und NetScaler Version 10.5 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 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 | Clientbrowsersenden 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 PDFzur Weboptimierung.
Hinweis:Die Front-End-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:
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.
- 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.
- 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:Der NetScaler wertet Richtlinien zur Front-End-Optimierung nur zur Anforderungszeit aus, nicht zur Reaktionszeit.
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.
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 unterIntegriertes 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:
- Aktivieren Sie die Frontend-Optimierungsfunktion.
enable ns feature FEO
- Erstellen Sie eine oder mehrere Aktionen zur Frontend-Optimierung.
add feo action
Beispiel: Sofügen Sie eine Front-End-Optimierungsaktion für die Konvertierung von Bildern im GIF-Format in das PNG-Format und die Verlängerung des Ablaufzeitraums des Caches hinzu:
add feo action allact -imgGifToPng -pageExtendCache
- [Optional] Geben Sie nicht standardmäßige Werte für die globalen Einstellungen der Frontend-Optimierung an.
set feo parameter [-cacheMaxage
Beispiel: So geben Sie den maximalen Cache-Ablaufzeitraum an:
set feo parameter -cacheMaxage 10
- Erstellen Sie eine oder mehrere Frontend-Optimierungsrichtlinien.
add feo policy
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
- Binden Sie die Richtlinie an einen virtuellen Load-Balancing- oder Content-Switching-Server oder binden Sie sie global.
bind lb vserver
结合cs vserver <名称> -policyName <字符串>之前ity
bind feo global
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
- Speichern Sie die Konfiguration. save ns config
Konfigurieren der Front-End-Optimierung mit der GUI
- Navigieren Sie zuOptimierung>Front-End-Optimierung>Aktionen, und klicken Sie aufHinzufügenund erstellen Sie eine Front-End-Optimierungsaktion, indem Sie die relevanten Details angeben.
- [Optional] Geben Sie die globalen Einstellungen für die Frontend-Optimierung an.
- Navigieren Sie zuOptimierung>Frontend-Optimierungund klicken Sie im rechten Bereich unter Einstellungen aufFrontend-Optimierungseinstellungen ändernund geben Sie die globalen Einstellungen für die Frontend-Optimierung an.
- Erstellen Sie eine Richtlinie zur Frontend-Optimierung.
- Navigieren Sie zuOptimierung>Frontend-Optimierung>Richtlinien, klicken Sie aufHinzufügenund erstellen Sie eine Frontend-Optimierungsrichtlinie, indem Sie die entsprechenden Details angeben.
- Binden Sie die Richtlinie an einen virtuellen Lastausgleichs- oder Content Switching-Server.
- Navigieren Sie zuOptimierung>Front-End-Optimierung>Richtlinien.
- Wählen Sie eine Front-End-Optimierungsrichtlinie aus, und klicken Sie aufRichtlinien-Manager.
- Binden Sie unterFront 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 RegisterkarteGraphische Ansicht, um die Rate der Anfragen anzuzeigen, die von der FEO-Funktion bearbeitet wurden.
Proben-Optimierung:
In derBeispiel-PDF-Dateifinden Sie einige Beispiele für Aktionen zur Inhaltsoptimierung, die auf HTML-Inhalte und die eingebetteten Objekte im HTML-Inhalt angewendet werden.
In diesem Artikel
- Optimierungen, die durch die FEO-Funktion durchgeführt wurden
- So funktioniert die Frontend-Optimierung
- Frontend-Optimierung konfigurieren
- Voraussetzungen
- Konfigurieren der Front-End-Optimierung mithilfe der NetScaler Befehlszeilenschnittstelle
- Konfigurieren der Front-End-Optimierung mit der GUI
- Überprüfen der Konfiguration der Front-End-Optimierung
- FEO-Statistiken mithilfe der CLI anzeigen
- FEO-Statistiken auf dem NetScaler-Dashboard anzeigen