TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie kann man die Seitenladegeschwindigkeit von statischen HTML-Websites verbessern?

2

HTML ist die Basis des Internets und Webserver senden HTML-Seiten an das Browser-Frontend. Browser wie Chrome interpretieren das HTML-Markup und zeigen den Seiteninhalt lesbar an. Dieses Konzept gilt für Websites, die PHP mit Content-Management-Systemen wie WordPress verwenden. Allerdings reicht es heutzutage nicht mehr aus, eine Website zu erstellen. Sie müssen Ihre Website für ein schnelles Laden optimieren, um ein gutes Suchmaschinen-Ranking und eine gute Benutzererfahrung zu erzielen. In diesem Artikel werden wir untersuchen, wie Sie Ihre statische HTML-Website beschleunigen und die Möglichkeiten verbessern können, Ihre Website in den Google-Suchergebnissen an die Spitze zu bringen.

Bevor wir beginnen – Statische HTML-Websites

Denken Sie daran, dass wir in diesem Artikel über statische HTML-Websites sprechen, die Sie selbst erstellen. Sie können HTML-Websites mit Ihrem eigenen Design erstellen oder fertige Frameworks wie Bootstrap verwenden. Im Allgemeinen können Sie die HTML-Seiten und andere Ressourcen (Bilder / CSS / JS) auf Ihren Server hochladen und über den Browser auf die Site zugreifen. Außer Domainname und Hosting-Account benötigen Sie hierfür keine weiteren Tools von Drittanbietern. Alternativ können Sie Tools von Drittanbietern wie Mobirise verwenden, um statische HTML-Seiten zu erstellen und über FTP hochzuladen.

Wir diskutieren nicht über die folgenden Fälle:

  • Content-Management-Systeme wie WordPress – WordPress bietet eine komplette Optimierungssuite zur Verbesserung der Ladegeschwindigkeit Ihrer Website. Lesen Sie unseren Artikel zur Optimierung der Seitenladezeit von WordPress-Sites.
  • Website-Builder-Tools wie Weebly, Wix usw. – diese Plattformen sind keine Open-Source-Lösungen, was im Wesentlichen bedeutet, dass Sie innerhalb der Plattform nur begrenzte Optimierungsmöglichkeiten haben. Sie können einige der in diesem Artikel vorgeschlagenen Optionen verwenden. Sie können jedoch keine Optimierungen wie die Kombination von CSS/JS, das Entfernen von Renderblocking-Ressourcen usw. vornehmen, da Sie nicht auf den Server zugreifen können.

Überprüfen Sie die Seitengeschwindigkeit im Google PageSpeed ​​Insights Tool

Nun, da der Kontext klar ist, werden wir weitermachen. Der beste Weg, um mit der Optimierung zu beginnen, besteht darin, zuerst die grundlegenden Probleme Ihrer Website zu verstehen. Um die geschwindigkeitsbezogenen Probleme zu finden, gehen Sie zu den Google PageSpeed ​​Insight-Tools und überprüfen Sie den Score Ihrer Website. Machen Sie sich zunächst keine großen Sorgen um die Punktzahl, scrollen Sie nach unten und überprüfen Sie den Abschnitt "Möglichkeiten", um die Punktzahl zu verbessern.

Wie kann man die Seitenladegeschwindigkeit von statischen HTML-Websites verbessern?

Vorschläge für Google PageSpeed ​​Insights

Beachten Sie, dass sich die im PageSpeed ​​Insights-Tool angezeigten Opportunities NICHT direkt auf die Punktzahl auswirken. Als allgemeine Regel gilt, dass die Punktzahl niedrig ist, wenn Sie Probleme im Abschnitt „Über dem Einklappen” (Kopfzeilenbereich) Ihrer Website haben. Es umfasst Rendering-Blockierungsressourcen, das Vorladen von Schriftarten und Bildern, kumulative Layoutverschiebung mit Code von Drittanbietern usw. Daher können Sie die Möglichkeiten und die allgemeinen Regeln kombinieren, um die Seitenladegeschwindigkeit Ihrer statischen HTML-Websites zu verbessern.

Wie kann man die Seitenladegeschwindigkeit von statischen HTML-Websites verbessern?

Sie können die folgenden Funktionen verwenden, um die Geschwindigkeit Ihrer Website zu verbessern.

1 Kombinieren und Minimieren von CSS- und JS-Dateien

Eine statische HTML-Website verfügt über ein CSS-Stylesheet als Mindestressource, um den Stil der Elemente auf Ihrer HTML-Seite zu definieren. Darüber hinaus können Sie zusätzliche JavaScript-Dateien verwenden, um andere Funktionen wie Schieberegler auf Ihrer Website hinzuzufügen.

  • Als erstes müssen Sie die unnötigen Leerzeichen und Kommentare in Ihren CSS / JS / HTML-Dateien entfernen. Dies wird als Verkleinerung bezeichnet, die die Dateigröße reduziert und die Seitenladegeschwindigkeit verbessert. Verwenden Sie diese CSS-, JS- und HTML-Minifizierungstools, um unnötige Unordnung aus den Dateien zu entfernen. Denken Sie daran, dass die minimierten CSS- und JS-Dateien Erweiterungen wie .min.css und .min.js haben.
  • Erkundigen Sie sich bei Ihrem Hosting-Unternehmen und aktivieren Sie die GZIP-Komprimierung, um Ihren HTML-Inhalt zu komprimieren. Dadurch wird die an den Browser gelieferte Dateigröße reduziert und die Seitengeschwindigkeit drastisch verbessert. Sie können mit diesem Tool überprüfen, ob Ihre Site die GZIP-Komprimierung verwendet , und die Einsparungen bei der Größe ermitteln.
  • Durch die Kombination von CSS- und JS-Dateien können Sie die Anzahl der HTTP-Anfragen an Ihren Server reduzieren. Daher können Sie die CSS-Dateien kombinieren, anstatt Stile in verschiedenen Stylesheets zu verwenden. Dies ist jedoch nicht erforderlich, wenn Ihr Hosting-Server das HTTP/2-Protokoll unterstützt, das parallele HTTP-Anforderungen unterstützt. Darüber hinaus kann das Kombinieren von JS-Dateien das Layout unterbrechen, es sei denn, Sie wissen, wie Sie den Code innerhalb der Datei richtig kombinieren.

2 Entfernen von Renderblocking-Ressourcen

Der nächste Schritt besteht darin , die Render-Blockierungsressourcen oberhalb des Fold-Bereichs (Header) Ihrer Website zu entfernen. Als Faustregel gilt, dass Sie alle JS-Dateien nach dem Body-Abschnitt Ihrer HTML-Seite verlinken. Dies hilft Ihnen, das Laden der Skripte zu verzögern und Probleme beim Rendern zu vermeiden.

  • Rufen Sie das Google PageSpeed ​​Insights-Tool auf und testen Sie Ihre Website auf die Messung der Seitenladegeschwindigkeit.
  • Wenn Sie Warnungen zu Ressourcen haben, die das Rendern blockieren, notieren Sie den Dateinamen.
  • Verschieben Sie die Datei aus Ihrem Kopfzeilenbereich in den Fußzeilenbereich.

Denken Sie daran, dass es nicht in allen Situationen möglich ist, die Datei in den Fußzeilenbereich zu verschieben. Überprüfen Sie, ob das Layout und die Funktionen Ihrer Site ordnungsgemäß funktionieren, wenn Sie die Dateien neu anordnen. Darüber hinaus müssen Sie möglicherweise das Kombinieren von Dateien deaktivieren, um herauszufinden, welche Ressourcendatei das Problem verursacht.

3 Verwenden Sie Content Delivery Networks (CDN)

Die beiden oben genannten Optionen sind eher technischer Natur, was für Sie möglicherweise schwierig ist. Um keine Zeit zu verschwenden und das Layout Ihrer Website zu beeinträchtigen, besteht die bestmögliche Lösung darin, ein Content Delivery Network (CDN) wie Cloudflare StackPath zu verwenden.

  • Sie können Dateien über das CDN-Netzwerk kombinieren und minimieren, anstatt dies auf Ihrem Server zu tun.
  • Erhöhen Sie die Geschwindigkeit, insbesondere wenn Sie Inhalte für internationale Benutzer bereitstellen.
  • Verbessern Sie die Sicherheit durch Blockieren automatisierter Bots und mit Brute-Force- und DDoS-Schutz.

Das grundlegende Cloudflare-CDN ist kostenlos und reicht für die meisten statischen HTML-Websites aus. Sie können Dateien mit einem einzigen Klick kombinieren und verkleinern und testen, wie sich dies auf Ihre Seitenladegeschwindigkeit im Google PageSpeed ​​Insights-Tool auswirkt. Wenn Sie Frameworks wie Bootstrap verwenden, stellen Sie sicher, dass Sie die CDN-Ressource einschließen, anstatt die Quelldatei von Ihrem Server zu warten.

4 Vermeiden Sie Codes von Drittanbietern

Einer der wichtigsten Faktoren zur Verbesserung der Seitenladezeit besteht darin, die Verwendung von Drittanbietercodes auf Ihrer Website einzuschränken. Das Problem ist, dass Sie das Ladeverhalten von Drittanbietercodes nicht steuern können. Das dynamische Ladeverhalten beeinflusst die Geschwindigkeitsparameter wie kumulative Layoutverschiebung und größte Contentful Paint.

  • Platzieren Sie die Anzeigen wie Google AdSense beim Laden der Seite unterhalb des sichtbaren Bereichs. Leider wirkt sich dies direkt auf Ihre Einnahmen aus, indem die CTR und die Seitenaufrufe reduziert werden.
  • Fügen Sie Google Analytics oder einen anderen Tracking-Code nach dem Textabschnitt ein.
  • Vermeiden Sie das Einfügen von Codes in die Kopfzeile für das Teilen in sozialen Netzwerken.
  • Wenn Sie Google-Schriftarten verwenden, achten Sie auf eine vereinfachte Verwendung mit weniger Schriftstärken und Schriftfamilien. Dadurch können Sie die Anzahl der Dateien reduzieren und sie schneller vom Google-Server abrufen.

5 Schriftarten und Bilder vorladen

Ein weiteres beliebtes Seitengeschwindigkeitsproblem ist das Vorladen von Schriftarten und Bildern, die Sie in den Header-Bereich laden. Wenn Sie Warnmeldungen in Google PageSpeed ​​sehen, fügen Sie die folgenden Codes in Ihren Header-Abschnitt ein. Stellen Sie sicher, dass Sie die Dateinamen durch diejenigen ersetzen, die Sie in Google PageSpeed ​​Insights sehen.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

Dies ist sehr nützlich, insbesondere wenn Sie auf Ihrer Website tolle Symbole für Schriftarten verwenden.

6 Bilder – Komprimieren und Next-Gen-Format verwenden

Die letzte Option, die wir hier erklären, ist die Komprimierung der Bilder, die Sie auf Ihrer Website verwenden. Da statische HTML-Websites keine eingebaute Option zum Verkleinern der Bilder haben, müssen Sie sie vor dem Hochladen auf Ihren Server manuell komprimieren.

  • Einige Webserver bieten eine Option zum Komprimieren von Bildern beim Hochladen. Erkundigen Sie sich bei Ihrem Hosting-Unternehmen, ob es zu diesem Zweck ein Tool anbietet.
  • Verwenden Sie andernfalls Bildkomprimierungstools, um die Größe Ihrer Bilder ohne Qualitätsverlust zu reduzieren.
  • Darüber hinaus können Sie das Bildformat in JPEG-2000 oder JPEG XR konvertieren. Im Allgemeinen haben VPS-Server eine Option zum Servern von Bildern im WebP-Format, die Sie mit Ihrem Hosting-Unternehmen bestätigen können. In diesem Fall benötigen Sie keine Konvertierung, da dies automatisch von der Serverseite für jedes Bild erfolgt. Die Verwendung von Bildern in WebP, JPEG-2000 oder JPEG XR hilft Ihnen, das Problem der Bereitstellung von Bildern im Format der nächsten Generation im Google PageSpeed ​​Insights-Tool zu beheben

7 Verwenden Sie kritische CSS

Wenn Sie auf der gesamten Site denselben Header-Abschnitt verwenden, können Sie die Ladegeschwindigkeit auf einfache Weise verbessern. Anstatt die gesamte CSS-Datei in die Kopfzeile zu laden, können Sie CSS nur für den sichtbaren Kopfzeilenabschnitt verwenden, wenn die Seite in einem Browserfenster geladen wird. Dies wird als kritisches CSS bezeichnet, das Sie mit Tools von Drittanbietern generieren können.

  • Gehen Sie zum kritischen CSS-Generator- Tool und geben Sie Ihre Website-URL an.
  • Generieren Sie kritisches CSS und kopieren Sie den Inhalt.
  • Verschieben Sie die kopierten Stile zwischen … -Tags in den Header-Bereich Ihrer HTML-Site.
  • Sie können das Haupt-Stylesheet in den Fußzeilenbereich verschieben, um CSS-Probleme mit der Renderblockierung zu vermeiden.

Wie kann man die Seitenladegeschwindigkeit von statischen HTML-Websites verbessern?

Kritischer CSS-Generator

Letzte Worte

Wie bereits erwähnt, hängt die Seitenladegeschwindigkeit Ihrer statischen HTML-Website von der Darstellung des Bereichs oberhalb des Faltbereichs im Browser ab. Sie können CSS und Skripte im Header-Bereich reduzieren, um die meisten Probleme und Möglichkeiten zu beheben, die im Google PageSpeed ​​Insights-Tool angezeigt werden. Die beste Option ist, CDN zu verwenden und Inhalte von Drittanbietern im Header-Bereich zu vermeiden.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen