5 effektivste Möglichkeiten, um die Ladezeit der Website zu verkürzen

Wie schnell wird Ihre Website oder App initiiert?ally Loads ist der erste Eindruck, den Ihre Benutzer bekommen. In diesem Leitfaden listen wir bewährte Techniken auf, mit denen Sie beim ersten Laden der Seite wertvolle Sekunden einsparen können.

Anfangsladezeit

Die Zeit, die von der Eingabe Ihres Domainnamens durch Ihren Benutzer oder Kunden bis zur Anzeige von Inhalten benötigt wird, ist die wichtigste Zeit, die Sie benötigen, um einen guten ersten Eindruck zu hinterlassen.

Amazon hat herausgefunden, dass alle 100 Millisekunden von lateNcy kostete sie 1 % Umsatz.

Und doch betrachten viele Webentwickler dies als einen nachträglichen Einfall. Für immer mehr Funktionen werden immer mehr Bibliotheken hinzugefügtally Mit der Zeit sehen sie weniger Conversions. Schlimmer noch: Diese Konvertierungsverluste sind schwer zu erkennen, weil sie a aufgeben langsam ladende Seite bevor es Zeit hat, Metriken zu senden.

Einige davon sind Techniken, die im Front-End und andere im Back-End implementiert werden können. Unabhängig davon müssen Web-Apps schnell geladen werden.

Fügen Sie die richtigen Maße hinzu

Als erstes müssen Sie Messungen hinzufügen. Es gibt viele Phasen des Ladens process, und Sie wissen nicht, wo der Engpass liegt, wenn Sie nicht die richtigen Segmente messen.

Im Folgenden sind die wichtigsten Meilensteine ​​der Verladung aufgeführt process:

Dies bedeutet, dass Sie Metriken für verfolgen sollten jedes Segment dieses Diagramms.

Lassen Sie uns durchgehen, wie Sie das tun könnten.

Browsäh Anfrage zur Antwort zugestellt:

Messen Sie dies auf Ihrem Server. Sie möchten den Moment erhalten, in dem Ihre API die Anfrage erhält, wenn sie eine Antwort liefert. Je nachdem, ob beispielsweise externe Aufrufe von Datenbanken getätigt werden, kann dies entweder sehr kurz oder ein erheblicher Engpass sein.

Antwort auf die erhaltene Antwort:

Dies ist schwieriger zu messen, aber eine Möglichkeit, dies zu tun, besteht darin, einen Zeitstempel hinzuzufügen, wenn Ihre Antwort Ihren Server verlässt, und diesen mit der aktuellen Zeit auf der Benutzerseite zum erstmöglichen Zeitpunkt zu messen (ein Skript-Tag im Kopf des HTML-Codes) Seite).

Antwort auf erste inhaltliche Farbe erhalten:

Die erste Inhaltsfarbe ist, wenn das erste Element auf dem DOM gerendert wird. Das kann etwas so Einfaches sein wie ein Text, ein Hintergrund oder ein Ladespinner. Dies kann durch Laufen gemessen werden Lighthouse in den Chrome Dev Tools.

Erste inhaltliche Farbe zur größten inhaltlichen Farbe:

Die größte Inhaltsfarbe liegt vor, wenn das größte Element im b des Benutzers gerendert wirdrowsäh Ansichtsfenster. Das ist typischally signalisiert das Ende des „Rendering“-Teils des Seitenladevorgangs und der Benutzer sieht eine Popup-Anzeigeated Bildschirm. Dies wird auch durch den Betrieb von Lighthouse gemessen.

Größte inhaltliche Farbe bis Zeit für interaktive:

FinallyDie Interaktionszeit bezieht sich auf die Zeit, in der der Benutzer Aktionen wie Scrollen, Klicken und Tippen ausführen kann. Es kann besonders seinally Es ist frustrierend, wenn diese Dauer lang ist, weil sie einen gerenderten Bildschirm vor sich sehen, aber nichts tun können, wenn sie es erwarten! Dies ist eine weitere Kennzahl, die uns Lighthouse bei der Messung hilft.

Code reduzieren

Nachdem Sie die Messungen durchgeführt haben, können Sie Optimierungen vornehmen. Optimierungen haben Kompromisse, und die Messungen zeigen Ihnen, welche es wert sind.

Die am schnellsten zu ladende Seite ist eine leere Seite, aber einer App kann eine Menge Code hinzugefügt werden, bevor irgendjemand den Unterschied in der Ladegeschwindigkeit zwischen ihr und einer leeren Seite bemerken kann. Was oft passiert, ist, dass die Inkremente so klein sind, dass man den Unterschied von Build zu Build erst eines Tages bemerkt und es sich einfach langsam anfühlt. Sie erkennen, dass Ihre App blo istated, und an diesem Punkt wird die Reduzierung des Codes einen Unterschied machen.

Wenn Sie den Code reduzieren, erhalten Sie zwei Geschwindigkeitsverbesserungen:

• Ihre App wird schneller über das Netzwerk übertragen.
• Der b des BenutzersrowsEr beendet das Parsen des Codes schneller.

Die erste Beschleunigung ist gering; Da Anfragen über die Leitung komprimiert werden, kann es sein, dass Sie nur 1 KB an Einsparungen einsparen, wenn Sie 10 MB Quellcode herausschneiden bandwidth. Die Beschleunigung durch das Parsen ist jedoch signifikant. Ihre Benutzer führen Ihre App wahrscheinlich auf einem ganzen Spektrum von b ausrowsBenutzer und Computer, von denen viele nicht über die Rechenleistung verfügen, um den Code so schnell zu analysieren wie Sie selbst.

Oder sie könnten weiterlaufen mobile Gerätemit noch weniger Rechenleistung. Der Unterschied kann in der Größe von Sekunden liegen.

Je weniger Code Sie haben, desto schneller ist das browsEr kann das Parsen abschließen und mit der Ausführung Ihrer App beginnen. Selbst wenn Sie einen Ladebildschirm anzeigen möchten, der von Javascript gesteuert wird, muss dieser Code zuvor analysiert werden.

Aber Sie möchten keine Features oder Aktualität kürzenally Code löschen. Glücklicherweise gibt es ein paar Standardverfahren, um Code zu reduzieren, ohne dies tun zu müssen.

• Führen Sie Ihren Code durch Minifizierer. Minifier führen Optimierungen wie kurze lange Namen in kurze durch (signUpDarkModeButton wird zu ss), entfernen Leerzeichen und andere, um Ihren Code so kompakt wie möglich zu machen, ohne etwas zu verlieren.
• Partials importieren. Bibliotheken sind oft bloated mit Dingen, die Sie nicht brauchen, die aber in einem Dachpaket zusammengefasst sind. Vielleicht möchten Sie nur eine bestimmte Funktion einer Dienstprogrammbibliothek, sodass Sie statt der gesamten Bibliothek nur den Code importieren können, den Sie benötigen.
• Baum-Shake-toter Code. Manchmal hinterlassen Sie Code zu Debugzwecken oder haben eine veraltete Version nicht gründlich bereinigtated-Funktion, und obwohl sie in Ihrem Quellcode enthalten ist, wird sie nie ausgeführt. Es gibt Werkzeuge in der JavaScript-Toolchain, wie Webpack, das toten Code oder ungenutzte Abhängigkeiten erkennen und sie automatisch aus dem Produktions-Build entfernen kannally .

Teilen Sie den Code in Blöcke auf

Nachdem Sie so viel Code wie möglich aus Ihrer gesamten App reduziert haben, können Sie darüber nachdenken, diese Idee weiter zu verdrängen und den für das anfängliche Laden erforderlichen Code zu reduzieren.

Nehmen wir an, 20 % Ihres Codes unterstützen eine App-Funktion, auf die Benutzer erst nach wenigen Klicks zugreifen können. Es wäre verschwendete Zeit für den browsSie müssen diesen Code analysieren, bevor ein Ladebildschirm angezeigt wird. Durch die Aufteilung Ihres Codes in Blöcke kann die Zeit für die Interaktion erheblich verkürzt werden.

Anstatt ein ineinander verflochtenes Abhängigkeitsdiagramm der Importe für alle Ihre Javascript-Dateien zu haben, identifizieren Sie einfach auszuschneidende Bereiche. Beispielsweise lädt eine Komponente möglicherweise einige umfangreiche Bibliotheken. Sie können isolierenate Kopieren Sie diese Komponente in eine eigene Datei und importieren Sie sie dann erst, wenn der Benutzer bereit ist, mit dieser Komponente zu interagieren.

Es gibt mehrere Bibliotheken, die das Laden verzögern können, je nachdem, welches Framework Sie verwenden. Es ist nicht erforderlich, über Bord zu gehen und jede Komponente aufzuteilen, da der Benutzer dann eine schnelle Anfangslast hat und auf jede nachfolgende Interaktion warten muss. Finden Sie die größten Teile, die Sie segmentieren können, und teilen Sie dort Ihren Quellcode auf.

Serverseitiges Rendern

Da browsDa die Benutzer all das intensive Parsen und Kompilieren durchführen müssen und Benutzer auf Chromebooks und Mobilgeräten arbeiten, besteht eine gängige Technik zur Verkürzung der Ladezeiten darin, dass Ihre Server einen Teil dieser Last übernehmen. Dies bedeutet, dass Sie, anstatt eine leere Seite bereitzustellen und dann den gesamten Inhalt mit Javascript auszufüllen, wie es heutzutage bei den meisten Single-Page-Apps der Fall ist, eine Javascript-Engine auf Ihrem Server ausführen können (usually Node.js) und füllen Sie so viele Daten und Inhalte wie möglich aus.

Ihre Server werden viel schneller und vorhersehbarer sein als die der Benutzer. browsers. Zwangsläufig müssen sie noch etwas Javascript-Code analysieren, damit die App interaktiv ist. Dennoch kann das serverseitige Rendering einen Großteil des ursprünglichen Inhalts ausfüllen, sodass beim Aufruf der Seite für den Benutzer bereits ein Ladebildschirm oder zumindest ein Fortschrittsbalken angezeigt wird.

Und wenn Daten für die erste Ansicht benötigt werden, muss der Kunde keine Trennung vornehmenate darum bitten, das zu bekommen; es wird schon hydraulisch seinated in der App, damit der Kunde sie verwenden kann.

Komprimieren Sie Vermögenswerte

Assets erwecken eine Seite zum Leben, und eine Seite fühlt sich erst dann vollständig geladen an, wenn diese Assets mit dem Rendern fertig sind. Dies können Ihr Hintergrund, Benutzeroberflächensymbole oder ein Benutzer sein profile Bild, sogar der Ladespinner. Oftmals können Assets auch das Layout verschieben. Wenn ein Benutzer also versucht, mit etwas zu interagieren, springt die Seite möglicherweise weiter hin und her, während Assets geladen werden. Manchmal sind diese Assets die größte Inhaltsfarbe.

Aber Assets sind auch einer der schwersten Teile einer App. Ein Bild kann mehrere Megabyte groß sein und das Laden vieler Symbole kann leicht die Größe von b überschreitenrowser ist maximal concurMieten Sie ein Limit für Netzwerkanfragen, was zu einer erstaunlichen Ladewarteschlange führt.

Sie möchten fast nie ein Bild aus dem Internet herunterladen und dann in Ihrer App darauf verweisen. Die Größe der Bilder sollte geändert werden auf die kleinstmögliche Größe, in der sie angezeigt werden. Wenn Sie einen Benutzer haben profiWird das Bild in einem winzigen 50 x 50 Pixel großen Element angezeigt, ohne die Größe zu ändern, benötigt Ihre App die Zeit, das vollständige Bild herunterzuladen, das als Desktop-Hintergrund scharf aussieht, und es dann auf die winzige Größe zu verkleinern.

Zweitens Bilder können komprimiert werden abhängig von ihrem Format. Heutzutage, webm ist das bevorzugte Format, aber der Bereich der Komprimierung im Web wird ständig verbessert und viele neue Formate sind in Sicht. Aufgrund der sich ändernden Formate sind einige browsDie neueren Versionen werden von anderen Benutzern möglicherweise nicht unterstützt! Zum Glück, browsEr-Technologie kann den Benutzer browsEr lädt das Format, das sie unterstützen.

Also auf links komprimierenatest und gratest-Format, sondern behalten Sie auch eine weniger moderne Version bei und verwenden Sie sie picture und video Elemente, die Fallback-Formate unterstützen.

Schlussfolgerung

Dies sind fünf der effektivsten Techniken, um Ihren Benutzern eine zu geben blitzschnelle erste Ladung auf Ihrer App. Diese werden Ihre Konvertierung verbessernates, Benutzerzufriedenheit und sogar Rankings suchen, da SEO schnelle Ladezeiten belohnt. Beim Terrastruktur, wir verwenden diese Techniken und mehr, damit Benutzer erstellen könnenate und zeigen Sie die Diagramme, die Sie in diesem Artikel sehen, so schnell wie möglich an.