Optimierung der Webseitenleistung

drucken · Время на чтение: 4мин · von · Veröffentlicht · Aktualisiert

spielenHören Sie sich diesen Artikel an

Website-Seitenoptimierung – Website-Leistung.Websites sind normalerweise in zwei Teile unterteilt: Front-End und Back-End. Wir können verstehen, dass der Hintergrund zur Implementierung der Funktionen der Website verwendet wird, wie zum Beispiel: Benutzerregistrierung durchführen, Passwörter ändern, Artikel kommentieren usw. Aber was ist mit dem Frontend? Tatsächlich sollte es eine Leistungsfunktion sein. Die meisten Faktoren, die sich auf die Zugänglichkeit des Benutzers auswirken, hängen mit der Optimierung der externen Seiten der Website zusammen. Seitenoptimierung – Dieser Artikel gibt einen Überblick über diesen Prozess.

Der Inhalt des Artikels:

1. Optimierung der Seitenladezeit

Bessere Seitenoptimierung - Dies ist der Fall, wenn die Ressourcen überhaupt nicht geladen werden. Versuchen Sie daher, die Anzahl der heruntergeladenen unnötigen Ressourcen zu minimieren.

  1. Bewerten Sie, ob einige Abhängigkeiten Ihrer Site erforderlich sind, und wägen Sie die Vor- und Nachteile ab.
  2. Ist der abhängige Ladepfad zuverlässig und blockiert er die gesamte Seite, wenn er nicht verfügbar ist?

2. Komprimieren Sie alle komprimierbaren Ressourcen

Komprimieren Sie alle komprimierbaren Ressourcen – ein Beispiel für das Herunterladen von Ressourcen auf einer Site.

  1. Der Code muss vollständig komprimiert sein.
  2. Löschen Sie unerwünschte Bilder.
  3. Verwenden Sie CSS3 anstelle von Bildern.
  4. Verwenden Sie Bilder mit einem höheren Komprimierungsverhältnis. Insbesondere GIFs, einige Videoformate (H.264 oder WebM) sind viel kleiner als GIFs.
  5. Verwenden Sie WordArt-Schriftarten, keine Bilder.
  6. Stellen Sie Benutzern mit neueren Browsern modernere Bildformate zur Verfügung (z. B. WebP).
  7. Bitmaps mit mehreren Auflösungen für unterschiedliche Seitengrößen.
  8. Geben Sie eine Breite und Höhe für das Bild an, andernfalls kann es zu Beschneidungen kommen.
  9. Verwenden Sie HTTP/2. Ein Sprite ist beispielsweise ein großes Bild, das aus vielen kleinen Bildern besteht, wodurch die Anzahl der HTTP-Anfragen reduziert werden kann. Das Zwischenspeichern ist jedoch schwierig, und das Ändern des kleinen Bildes führt dazu, dass der Cache aller kleinen Bilder ungültig wird. HTTP/2: Mehrere Anfragen können über einen Link initiiert werden, sodass keine Sprites erforderlich sind.

3. Website-Cache-Optimierung

Browser-Caching-Mechanismus:

  1. Besuchen Sie die Seite, fordern Sie verschiedene Ressourcen an und der Browser prüft, ob ein lokaler Cache vorhanden ist.
  2. Wenn ja, prüfen Sie, ob die Ressource abgelaufen ist. Nicht abgelaufen, Cache direkt verwenden. Wenn es abläuft, wird eine Anfrage an den Server gestellt.
  3. Die Etag- und Last-Modified-Header-Felder werden in die gesendete Anfrage einbezogen.
  4. Der Server verwendet das Etag und die letzte Änderung, um festzustellen, ob die vom Browser zwischengespeicherte Ressource nicht verfügbar ist.
  5. Wenn die Ressource noch gültig ist, geben Sie einen 304-Antwortcode zurück, um den Browser anzuweisen, den Cache zu verwenden. Andernfalls geben Sie die aktualisierte Ressource zurück.

Nach dieser Logik können Sie Ihren Website-Cache planen.

Wie kann ich den Browser benachrichtigen, eine Ressource zu aktualisieren, wenn die Ressource vorzeitig abläuft?

Dies ist normalerweise nicht möglich, da der Browser erkennt, dass die Ressource nicht abgelaufen ist, und die Anfrage überhaupt nicht stellt. Dies kann jedoch durch Ändern der URL der Ressource erreicht werden. Daher müssen Sie dem Dateinamen der Ressource eine Versionsnummer oder ein zufälliges Tag hinzufügen. Zum Beispiel style.12.css. Das heißt, lassen Sie den Browser die HTML-Datei nicht zwischenspeichern, sonst fragt der Browser den Server nicht ab, bis sie abläuft.

4. Kritischer Renderpfad

Der Browser zeigt die Webseite mit den folgenden Schritten an:

  1. Verarbeiten Sie das HTML-Markup und erstellen Sie den DOM-Baum.
  2. Verarbeiten Sie das CSS-Markup und erstellen Sie den CSSOM-Baum.
  3. Kombinieren Sie DOM und CSSOM zu einem Renderbaum.
  4. Layout entsprechend dem Renderbaum, um die Geometrieinformationen jedes Knotens zu berechnen.
  5. Zeichnen Sie jeden Knoten auf dem Bildschirm.

Die Optimierung des kritischen Rendering-Pfads bedeutet, den Rendering-Prozess so zu optimieren, dass die Webseite so schnell wie möglich gerendert werden kann.

CSS

CSS-Dateien blockieren das Rendern. Nachdem der Browser den DOM-Baum erstellt hat, muss er warten, bis der CSSOM-Baum abgeschlossen ist. Ein Tag oben im Dokument, um nicht standardmäßiges CSS zu verhindern und es dem Browser zu ermöglichen, die CSS-Datei so schnell wie möglich anzufordern.

Vermeiden Sie die Verwendung von @import in CSS-Dateien, da der Browser das importierte CSS erst findet und lädt, nachdem die Datei, die den Import enthält, geladen und kompiliert wurde. Erwägen Sie die Verwendung von Inline-CSS, das keine zusätzlichen Anforderungen erfordert und die Darstellung des Hauptinhalts nicht blockiert.

js

Das Java-Skript wird erst ausgeführt, wenn das CSSOM erstellt wurde. js verhindert auch, dass der DOM-Baum erstellt wird. Wenn „async“ im Tag nicht markiert ist.

Jetzt werden Sie verstehen, was Seitenoptimierung ist und wie sie aufgebaut ist. Wenn Sie diese Prozesse verstehen, können Sie die Seiten Ihrer Website schnell optimieren, Anfragen reduzieren und das Laden beschleunigen.

Lesen dieses Artikels:

Danke fürs Lesen: SEO HELPER | NICOLA.TOP

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 229

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Das könnte dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

пять × два =