5 häufige Fehler, die sich auf die Ladezeiten von Seiten auswirken

Wenn das Laden Ihrer Website beim Besuch durch Benutzer lange dauert, kann dieser Artikel Inspiration für Ihre Optimierungsarbeit liefern. Aber selbst wenn es Ihnen nicht hilft, Ihr Problem zu lösen, können Sie erfahren, welche häufigen Fehler sich auf die Ladezeit einer Website auswirken.

Warum ist die Ladezeit einer Seite wichtig?

Die Ladezeit der Seite wirkt sich direkt auf die intuitive Erfahrung des Benutzers mit der Website-Leistung aus. Laut Forschungsdaten

Sobald die Ladezeit der Seite 3 Sekunden überschreitet, verliert die Hälfte der besuchenden Benutzer das Warten.

• Suchmaschinenranking – Die Seitenladezeit ist einer der wichtigen Faktoren dafür, wie Suchmaschinen Ihre Website in den Suchergebnissen einstufen. Daher beeinflusst die Ladezeit einer Webseite, wie einfach es für Benutzer ist, sie im Web zu finden.
• Conversion-Rate – Je schneller die Seite geladen wird, desto engagierter wird der Benutzer sein. Eine langsame Website führt natürlich zu niedrigeren Conversion-Raten. Wenn das Laden Ihrer Webseite zu lange dauert, wird die Ausführung des Call-To-Action (CTA) viel Zeit in Anspruch nehmen. Während dieser Zeit werden die Geduld und der Enthusiasmus des Benutzers nachlassen und der Benutzer wird Ihre Website schließlich schließen, ohne etwas zu kaufen Ihr Produkt oder die von Ihnen bereitgestellten Dienstleistungen nutzen.
• Benutzererfahrung – Je länger das Laden Ihrer Website dauert, desto zufriedener werden Ihre Benutzer sein. Dadurch werden die Kundenbindung und die Wiederholungsbesuchsraten höher sein.

Sehen wir uns ein paar Beispiele an, die auf Untersuchungen von HubSpot basieren:

• Wenn Yahoo die Seitenladezeit um 0,4 Sekunden reduzieren würde, könnte der Traffic um 9 % steigen.
• Eine Seite, die eine Sekunde langsamer ist, könnte Amazon 1,6 Milliarden US-Dollar Umsatz pro Jahr kosten.
• Eine Verzögerung von 2 Sekunden bei Bing-Suchen führt zu einem Umsatzverlust von 4,3 % pro Besucher, einem Rückgang der Klicks um 3,75 % und einem Rückgang des Abfragevolumens um 1,8 %.

Anhand der oben genannten Daten können Sie erkennen, wie wichtig die Seitenladezeit für Ihre Website ist.

Faktoren und Optimierungstechniken, die die Ladezeit einer Seite beeinflussen

Unter diesen Fehlern habe ich die fünf häufigsten Fehler aufgelistet, die mir beim Erstellen einer Website begegnet sind.

1. Eine große Anzahl von HTTP-Anfragen

Immer wenn der Browser eine Datei, Seite oder ein Bild vom Webserver abrufen muss, stellt er eine HTTP-Anfrage, woraufhin Sie die Option „Netzwerk“ in Chrome übergeben können Karte „Entwicklertools“ zum Überwachen, welche Netzwerkanfragen die Anwendung stellt, welche Anfragen zeitaufwändiger sind und andere Informationen.

Allgemeine Browser begrenzen normalerweise die Anzahl gleichzeitiger HTTP-Anfragen auf 4–8. Wenn die Anzahl gleichzeitiger Anforderungen groß ist, kommt es daher zu langen Wartezeiten. Untersuchungen von Yahoo zeigen, dass 80 % der Ladezeit Ihrer Anwendung von HTTP-Anfragen abhängt und dass die Reduzierung der Gesamtzahl der HTTP-Anfragen hilfreich ist, um die Seitenladezeiten zu beschleunigen.

Sie können die Gesamtzahl der HTTP-Anfragen für Ihre Webanwendung auf folgende Weise reduzieren:

• CSS/JS-Dateien zusammenführen – Sie können versuchen, CSS-Dateien und JS-Dateien in derselben Datei zusammenzuführen, wodurch die Anfragen reduziert werden Es ist auch nicht erforderlich, mehrere Dateien vom Server abzurufen. Da alle CSS-Dateien in Blöcken gerendert werden, führt die Reduzierung der CSS-Dateien zu einer erheblichen Verbesserung der Seitenladezeiten.
• Laden von Inhalten bei Bedarf – Anstatt alle Bilder Ihrer App auf einmal zu laden, laden Sie sie nur bei Bedarf. Dieser Ansatz wird als Lazy Loading oder On-Demand-Loading bezeichnet. Wenn ein Benutzer auf Ihrer Website ankommt, können Sie Bilder nur dann laden, wenn der Benutzer zu dieser bestimmten Stelle scrollt, anstatt sie alle per Klick zu laden.
• Browser-Cache aktivieren – Ermöglicht das Zwischenspeichern von statischen Bildern oder Website-Inhalten, die sich nicht häufig ändern. Wenn der Benutzer die Website zum zweiten Mal besucht, kann der Cache diesen Inhalt laden, ohne eine neue HTTP-Anfrage an den Server zu senden. Dadurch werden Inhalte schneller geladen.
• Der Server unterstützt HTTP/2 – Bei Verwendung von HTTP/2 muss nur eine Verbindung vom Browser zum Server hergestellt werden, um eine Website zu laden, und mehrere Anfragen sind gleichzeitig zulässig. Dies ist wesentlich effizienter, als für jede Ressource eine neue Verbindung zu erstellen.

2. Kein CDN verwenden

Wenn auf Ihrer Website kein CDN aktiviert ist, erhöhen sich die Ladezeiten, wenn der physische Standort des Benutzers weit vom Server entfernt ist. Diese Verzögerungen machen sich mit zunehmender Entfernung stärker bemerkbar und wirken sich auf alle HTTP-Anfragen an den Server aus. Die Verwendung eines CDN kann die Ladezeiten von Seiten verbessern.

CDNWas ist das?

Der vollständige Name von CDN ist Content Delivery Network, ein Content-Distributionsnetzwerk. CDN ist ein auf dem Internet aufgebautes Content-Verteilungsnetzwerk, das auf an verschiedenen Orten bereitgestellten Edge-Servern basiert und den Lastausgleich, die Content-Verteilung, die Planung und andere Funktionsmodule der zentralen Plattform nutzt, um Benutzern den Zugriff auf die benötigten Inhalte in der Nähe zu ermöglichen.

Durch die Verwendung eines CDN können Benutzer die Ressourcen, die sie für eine Webseite benötigen, von dem Server abrufen, der ihrem Standort am nächsten liegt. Server in einem CDN sind an verschiedenen geografischen Standorten verteilt. Daher ist die Verwendung dieser Art von CDN eine der effektivsten Möglichkeiten, die Ladezeit von Anwendungen zu verbessern.

Wenn sich Ihr Webserver beispielsweise in Kalifornien befindet, könnte das Topologiediagramm Ihres Gastzugangsnetzwerks wie folgt aussehen, wenn Sie ein CDN bereitstellen.

Die meisten CDN-Dienste verfügen über einen eigenen Netzwerk-Backbone, der im Vergleich zum Internet eine höhere Servicequalität, niedrigere Paketraten, schnellere Ladegeschwindigkeiten usw. bieten kann. Der Nachteil ist, dass es teuer ist.

3. Dateigröße und Seitengröße

Das Laden großer Dateien vom Webserver oder das Laden der Seitengröße nimmt viel Zeit in Anspruch, sodass die Ladezeit der Seite möglicherweise länger wird.

Das Aktivieren der Komprimierung ist eine gängige Methode, um die Dateigröße von HTTP-Anfragen zu reduzieren und die Ladezeiten von Seiten zu verbessern.

Es gibt zwei gängige Komprimierungsmethoden:

Die erste Methode ist Gzip. Gzip kann ähnliche Codes in der Datei finden und diese vorübergehend ersetzen, um die Datei zu verkleinern. Derzeit unterstützen die meisten Webserver die Gzip-Komprimierung. Durch die Aktivierung der Komprimierung von HTML- oder CSS-Dateien können in der Regel etwa 50 % bis 70 % der Dateigröße eingespart werden, wodurch die Seitenladezeiten und die verwendete Bandbreite reduziert werden. Sie können die Seitenladezeiten weiter verkürzen, indem Sie die Größe der in Ihrer Anwendung verwendeten Bilder reduzieren.

Eine andere Komprimierungslösung heißt Brotli. Die Komprimierung ist 20 bis 30 % höher als bei gzip und die Ausführungseffizienz ist effizienter. Daher kann ich sie nicht beweisen . Sie können sich an Ihrer tatsächlichen Situation orientieren.

4. Alle Ressourcen gleichzeitig laden

Das gleichzeitige Laden aller HTML-, CSS- und JS-Dateien verlängert die Ladezeit der Seite, da der Seitenrenderingprozess blockiert wird, bis alle diese Ressourcen geladen sind.

Das verzögerte Laden von JavaScript ist ein Mechanismus zum Laden großer JS-Dateien, nachdem andere Elemente geladen wurden. Diese Methode stellt sicher, dass das Laden von Seiteninhalten nicht durch das Laden großer JS-Dateien beeinträchtigt wird.

Wenn Sie eine HTML-Site haben, müssen Sie die externe JS-Datei (defer.js) vor dem aufrufen.

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

Der obige Code besagt: „Warten Sie, bis das gesamte Dokument geladen ist, bevor Sie die externe defer.js-Datei laden.“

5. Viele Weiterleitungen

Im Allgemeinen verwenden wir Weiterleitungen, um Seitenverschiebungen oder -löschungen zu verarbeiten um Fehler beim Benutzerzugriff zu vermeiden. Allerdings bedeuten mehr Weiterleitungen auch mehr HTTP-Anfragen. Dies kann die Seitenladezeiten erheblich verlängern. Google empfiehlt Websitebesitzern, Weiterleitungen zu entfernen, um die Ladezeiten zu verbessern, insbesondere auf Mobile-First-Websites.

Sie können ein ähnliches Website-Scraping-Tool verwenden, um alle Weiterleitungsanfragen auf Ihrer Website abzurufen. Indem Sie dies analysieren, behalten Sie den Überblick und können unnötige Weiterleitungen vermeiden.

Im Allgemeinen werden Weiterleitungen in zwei Arten unterteilt:

• Serverseitige Weiterleitungen – schnell und zwischenspeicherbar.
• Clientseitige Weiterleitungen – Langsam und nicht zwischenspeicherbar.

Optimieren Sie die Ladezeiten von Webseiten, indem Sie die Verwendung clientseitiger Weiterleitungen für Ihre Seiten vermeiden und gleichzeitig serverseitige Weiterleitungen auf ein Minimum beschränken.

Fazit

Es wird angenommen, dass eine Website, die schnell funktioniert und lädt, sowohl für den Webmaster als auch für den Benutzer von Vorteil ist. Ich hoffe, dieser Artikel hat Ihnen genügend Vertrauen in die Bedeutung der Seitenladezeit gegeben.

Wenn Sie darüber nachdenken, die Leistung Ihrer Website zu verbessern, kann ich einige Tools mit Ihnen teilen, wie zum Beispiel Google Pagespeed Insights, Pingdom, YSlow usw. Diese Tools können vollständige Berichte liefern, die Ihnen Einblick in die Mängel Ihrer Website geben. Wir hoffen, dass auch Ihre Website ein besseres Benutzererlebnis bietet.

Originalquelle: https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt von5 häufige Fehler, die sich auf die Ladezeiten von Seiten auswirken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!