Es ist sehr wichtig, dass die Website so schnell wie möglich geladen wird. Benutzer möchten die Seite, die sie sehen möchten, schnell anzeigen, und wenn Sie sie nicht befriedigen können, werden sie sie an anderer Stelle suchen. In diesem Artikel sehen Sie eine Diskussion über fünf einfache und effektive Techniken, um Ihre Webseiten zu beschleunigen.
Die Ladezeit der Website zu kennen, ist der erste Schritt, bevor Sie entscheiden, was schief geht. Außerdem können Sie wissen, ob Sie Änderungen für Ihre Website beschleunigen müssen.
Wenn Sie YSLOW noch nicht installiert haben, installieren Sie es bitte, wenn Sie es noch nicht installiert haben. Es ist eine Erweiterung von Mozilla Firefox. Sie finden sie aus dem folgenden Link:
Lassen Sie uns zunächst die Six Revisions -Website durchsuchen. Wir alle verwenden das gleiche Beispiel, um sie zu testen (müssen nur in einem neuen Registerkarte oder einem neuen Browserfenster geöffnet werden).
Im Browser gibt es eine Spalte des Kilometermessers (wie in Abbildung 1 gezeigt). Wenn die Webseite geladen wird, sehen Sie Yslow und Nummern. Die Zahl repräsentiert die Zeit (in Sekunden), die der Browser zum Laden einer Website benötigt. Wir möchten, dass diese Zahl so niedrig wie möglich ist.
Abbildung 1: Yslow -Symbol und Kilometerzähler zeigen die Ladezeit der Webseite an
In den meisten Fällen sind eine oder eine Gruppe von Gründen, die eine lange Ladezeit von Webseiten verursachen, wie folgt:
Wir werden diese später besprechen.
Um sicherzustellen, dass die Ladezeit Ihrer eigenen Website angezeigt wird, durchsuchen Sie einige Websites. Schauen Sie sich Google, Facebook und einige Blogs und Websites an, die Sie mögen. Sie werden feststellen, dass je mehr Bilder die Website verwendet, desto länger die Antwortzeit der JS -Seite sein wird.
Yslow misst, wie schnell es lädt, sondern bietet Ihnen auch einige ausführliche Erkenntnisse, wie Sie es tun können, um Ihre Website-Leistung zu verbessern, sowie die mangelnde Ladungsleistung Ihrer Website.
Das Bild unten ist die Registerkarte "Leistung" (wie in Abbildung 2 gezeigt). Wenn Sie jedoch darauf klicken, werden die Details jedes Bereichs angezeigt, der sich auf die Ladezeit und die Gesamtleistung auswirkt.
Abbildung 2: Leistungsschilder
In diesem Bereich ist die subjektivste Wahl, CDN (Content Distribution Network) .CDN für große Websites sehr effektiv zu verwenden. Sie verbreiten Website -Inhalte auf Server in verschiedenen Regionen. Je näher der physische Server dem Benutzer ist und eine Website lädt, desto schneller ist eine Seite. Die Verwendung von CDN wird also im Wesentlichen den Inhalt vom Server auf den nächstgelegenen zugegriffenen Seitenbenutzer verteilen.
Abbildung 3: Leistungsschilder verwenden Buchstaben (a, b, c, d, f), um Klassen und Stromklassen (1-100) darzustellen.
Abgesehen von der Verwendung eines CDN (das kostspielig sein kann) ist alles andere machbar.
Lassen Sie uns jeden Levelfaktor durchlaufen. Hier finden Sie eine kurze zweite Geschwindigkeit für jedes Levelfeld und wie diese Probleme gelöst werden, um eine optimale Leistung zu erzielen.
HTTP -Anforderungen reduzieren : Wenn eine Webseite Dateien vom Server erhält, wird eine HTTP -Anforderung generiert. Der Bereich enthält Skripte, CSS -Dateien, Bilder und asynchrone Client/Server -Anforderungen (AJAX und andere sich ändernde Technologien). Dies ist der wichtigste Punkt, wenn es um Leistung geht, aber es kann leicht mit ein wenig Anstrengung gelöst werden. Beispielsweise ist es oft hilfreich, Skripte, CSS und Bilder so weit wie möglich zusammenzuführen, Cache -Dateien auf dem Maschine des Benutzers.
Add Term Header : 80% der Ladezeit der Seite beziehen sich auf das Herunterladen von Skripten, Bildern und CSS. In den meisten Fällen ändert sich diese Elemente in der Maschine des Benutzers nicht. Sie können den Code im .htaccess in der lokalen Maschine des Benutzers zwischenspeichern (wir werden diskutieren, wie später im Artikel funktioniert).
GZIP -Komponente : Gziping- oder komprimierte JS -Dateien, Bilder, HTML -Dokumente, CSS -Dokumente usw. Benutzer können kleinere Dateiversionen herunterladen, um die Ladegeschwindigkeit von Webseiten zu erhöhen. Dies kann den Serververbrauch verringern, aber Dekompressionskomponenten können je nach Browser des Benutzers auch die Seitenreaktion auf langsamere Reaktion verursachen.
Stellen Sie CSS oben auf : Stellen Sie die CSS -Datei oben auf der Website ein, mit der andere Teile wie Bilder und Text gleichzeitig geladen werden können.
Setzen Sie JS unten : Stellen Sie CSS am Kopf des Dokuments. Sie müssen JS nur einfügen, bevor Sie <Boby> schließen. Während diese Skripte im Hintergrund geladen sind, erhält der Benutzer zunächst die scheinbar vollständige Seite.
Vermeiden Sie CSS -Ausdrücke : Ich habe noch nie CSS -Ausdrücke (dynamische Merkmale genannt) verwendet, die nur eine CSS -Funktion sind, die Programmierkonzepte (wie Steuer-/bedingte Strukturen) hinzufügt, wird ab IE8 die Trident -Layout -Engine (in IE verwendet) nicht mehr unterstützt. Wie auch immer, sie haben keine gute Idee zu verwenden. In gewissem Maße würde ich PHP -Skripte verwenden, um verschiedene CSS -Stilregeln zu laden, die auf unterschiedlichen Bedingungen basieren, z. B. eine Zufallszahl, Tageszeit oder Browser.
Externe Anrufe an JS und CSS : Legen Sie JS- und CSS -Dateien in externe Dateien ein, und der Browser richtet sie mit einer schnelleren Ladegeschwindigkeit der Seite als bei jedem Anruf.
Reduzieren Sie die DNS -Suche : Solange der Benutzer einen Domänennamen in der Adressleiste des Browsers eingibt, führt der Browser immer DNS -Suche nach IP -Adressen durch. Je mehr Eintrittsstandorte die Website hat, desto notwendigere DNS -Suche werden. Halten Sie das Niveau so niedrig wie möglich und führen Sie eine DNS-Abfrage durchschnittlich 60 bis 100 Millisekunden durch.
Zoom in JS : Im Gegensatz zur allgemeinen GZIP -Komprimierung besteht das Zoom in JS -Dokumenten darin, unnötige Räume, Laschen und andere Auswahlzeichen von Zhonghe Yang zu entfernen, die Gesamtgröße der Datei zu reduzieren, und kleinere Seiten können eine schnellere Ladegeschwindigkeit erzielen. Sie können JSMin verwenden, um JavaScript zu zoomen.
Umleitung vermeiden : Ob es sich um die Umleitung von Server -Header, JS -Umleitung oder HTML -Elementumleitung handelt. Ihre Website lädt den Header einer leeren Seite und dann eine neue Seite. Benutzer verbringen immer mehr Zeit, um die von ihnen benötigte Seite zu erhalten, daher sollten sie dies um jeden Preis vermeiden.
Entfernen Sie doppelte Skripte : Das Laden des Browsers, das dasselbe Skript lädt, erhöht die Ladezeit der Seite. Dies ist ein sehr einfaches mathematisches Problem. Mehr Dateien entsprechen mehr Ladezeit. Überprüfen Sie Ihre Website, um sicherzustellen, dass Sie jQuery nicht zwei- oder dreimal oder andere Skripte anrufen.Wenn ... das viel war, gehen wir mit der nächsten Registerkarte von Yslow über, kurz bevor wir in einige andere Techniken einsteigen, um die Leistung Ihrer Website zu erhöhen.
Abbildung 4: Teilebezeichnung.
Teile -Tags (wie in Abbildung 4 gezeigt) können Einblicke in die Auswirkungen der Erhöhung der Ladegeschwindigkeit der Website geben. Hier können Sie sehen, wie lange das aktuelle Dokument geladen werden muss, ob diese Dateien komprimiert sind, die Antwortzeit und die zwischen dem Benutzer des Benutzers zwischengespeicherung und wann der Cache ausgeht. Dies ist eine gute Bewertung der Website und misst ihre Leistung und Geschwindigkeitsoptimierung. Schließlich zeigt das Statistik -Tag (wie in Abbildung 4 gezeigt), die uns alle HTTP -Anforderungen, die gleichzeitig heruntergeladenen Dokumente und die abgegebenen Dateien zeigt. Der leere Cache zeigt die Datei an, die der Browser zum Herunterladen der Rendering -Seite benötigt. Primierter Cache hingegen zeigt eine Liste von Dateien an, die bereits im Browser -Cache des Benutzers vorhanden sind, wodurch die Anfrage des Browsers gespeichert wird, um die Datei nicht erneut herunterzuladen.
Abbildung 5: Registerkarte Statistiken.