Website-Geschwindigkeitsoptimierung: Vorgehensweise im Jahr 2020 # Schritt für Schritt

Vor etwa einem Jahrzehnt gab Google bekannt, dass sich die Geschwindigkeit der Website auf das Ranking der Websuche auswirken würde. Obwohl der Beitrag die Auswirkungen der Geschwindigkeit auf das Ranking nicht klarstellte, verstanden die Webmaster, die die Ankündigung lasen, dass die Optimierung der Website-Geschwindigkeit ganz oben auf ihren Entwicklungsplänen stehen sollte.


Zusätzlich zu SEO Vorteile der Geschwindigkeitsoptimierung, Die Ladezeiten von Seiten sind wichtig, um festzustellen, wie viele Benutzer auf Ihrer Website verbleiben. HubSpot meldet das Ein Rückgang der Conversion hängt mit zunehmenden Ladezeiten der Seite zusammen – Eine Verzögerung der Ladezeit um eine Sekunde kann zu einer Reduzierung der Umwandlung um ~ 20-30% führen!

Handbuch zur Optimierung der Website-Geschwindigkeit

In den letzten Jahren hat die durchschnittliche Seitengröße zugenommen. In der Tat im Jahr 2018, Im Durchschnitt betrug die Seitengröße mehr als 2 MB! Ein wesentlicher Teil dieser Seitenladung besteht aus Bildern, statischen Dateien und Videos.

Um es gelinde auszudrücken, die Größe Ihrer Website und die Geschwindigkeit Ihrer gesamten Website spielen eine große Rolle! Selbst bei einer ständig steigenden Seitenlast können Sie die Handhabung Ihrer Website verbessern. Dieser Beitrag beschreibt alles.

Website-Geschwindigkeitsoptimierung: Was Sie brauchen, bevor wir anfangen

In diesem Beitrag wird davon ausgegangen, dass Sie bereits zwei wichtige Dinge erledigt haben:

  • Sie verwenden ein optimiertes Thema, das über WordPress selbst nicht viel Aufblähen bringt.
  • Sie befinden sich auf einem ausreichend schnellen Host.

Wenn Sie diese beiden Kästchen ankreuzen, können Sie mit den folgenden Abschnitten fortfahren, um eine umfassende Liste von Aufgaben zu erhalten, die Sie ausführen können, um sicherzustellen, dass die Ladezeiten Ihrer Website minimal sind.

Erste Schritte mit der Optimierung der Website-Geschwindigkeit

Anatomie einer Webseite

Anatomie

Der Trick, um Ihre Webseiten auf Geschwindigkeit zu optimieren, besteht darin, zu verstehen, was in eine Webseite einfließt. Lassen Sie uns die beliebtesten Komponenten durchgehen:

  • Der HTML-Code, der einer Webseite Struktur und Inhalt verleiht – selbst wenn WordPress die Party auf Ihrer Website ausführt, wird lediglich der Inhalt der Datenbank – der gesamte Inhalt – übernommen und in eine statische HTML-Ausgabe konvertiert
  • Statische Dateien, die bei Design, Funktionalität und Interaktivität helfen (CSS, JavaScript)
  • Bilder für Hintergründe, Logos und Inhalte

Um eine Seite zu rendern, fordert der Browser jedes Element einer Webseite an – die Seite selbst in Form von HTML, statischen Dateien, Bildern und externem Inhalt. Daher ist die Anzahl der HTTP-Anfragen spielt auch eine entscheidende Rolle bei der Optimierung der Website-Geschwindigkeit.

Finden Sie heraus, wo Sie stehen: Tools zur Optimierung der Website-Geschwindigkeit

Bevor wir uns bestimmten Techniken zuwenden, die Ihnen bei der Optimierung Ihrer Website helfen, nehmen wir uns einen Moment Zeit, um Tools zu überprüfen, mit denen Sie die Geschwindigkeit von Webseiten analysieren können.

Wenn Sie ein Anfänger sind, der nach einem gelegentlichen Testwerkzeug sucht, können Sie die Verwendung in Betracht ziehen die Pingdom Tools Suite für eine schnelle Bewertung Ihrer Website. Für eine vollständigere Lösung können Sie zu gehen Google Page Speed ​​Insights.

Pingdom-GeschwindigkeitstestPingdom-Tools für Geschwindigkeitstests

Darüber hinaus können Sie es versuchen, wenn Sie nach einer schnellen Option in Form eines Browser-Plugins suchen YSlow, Hiermit werden Websites getestet und Vorschläge aus dem Browser bereitgestellt. Weiterhin ist die GTmetrix-Tool verwendet die Testergebnisse von YSlow für Berichte.

�� Wenn Sie weitere Optionen zum Testen der Geschwindigkeit Ihrer Website wünschen, wird dieser Beitrag aufgelistet 5 der besten Tools zur Geschwindigkeitsüberprüfung.

Stellen Sie vor dem Durchlaufen der in diesem Beitrag aufgeführten Techniken sicher, dass Sie Ihre Website mit einem der hier aufgeführten Tools ausführen, um als Benchmark zu dienen. Sobald Sie eine Geschwindigkeitsoptimierung für die Website vorgenommen haben, kehren Sie zum Tool zurück, um nach Geschwindigkeitsverbesserungen zu suchen.

Schritt 1: Optimieren Sie statische Dateien

Der erste Schritt dieses Handbuchs konzentriert sich auf die Optimierung statischer Dateien – am häufigsten in Form von Stylesheets (CSS-Dateien) und Skripten (JS-Dateien)..

(a) Bewegen Sie CSS nach Kopf, JS nach unten

Die erste Optimierung besteht darin, sicherzustellen, dass die Stylesheets in den Abschnitt Ihrer Seitenstruktur verschoben werden, während alle Skripte direkt über das schließende Tag Ihrer Seite verschoben werden. Die Logik dahinter ist einfach:

  • Im Allgemeinen sind Stylesheets kleiner als Skripte
  • Sobald Stylesheets in das Tag geladen wurden, bevor der Browser den Hauptteil der Seite rendert, werden alle Elemente, die auf der Seite gerendert werden, ordnungsgemäß formatiert
  • Die Funktionalität der Skripte kommt im Allgemeinen ins Spiel, sobald der Inhalt der Seite geladen ist, sodass Skripte im Allgemeinen ganz unten platziert werden können

Diese Vorgehensweise stellt sicher, dass Besucher Ihrer Website eine Seite nicht frustriert verlassen, während sie darauf warten, dass sie geladen wird.

Um den Skriptteil schnell zu bearbeiten, können Sie das Plugin “Skripte in Fußzeile” für WordPress installieren. Es funktioniert mit dem Autopiloten und macht den Job gut.


Skripte zur Fußzeile Skripte zur Fußzeile

Autor (en): Joshua David Nelson

Aktuelle Version: 0.6.4.1

Letzte Aktualisierung: 15. April 2020

scripts-to-footerphp.0.6.4.1.zip


94% Bewertungen


Über 20.000 Installationen


3.1.0Anforderungen

(b) Minimierung einrichten

Beim Minimieren werden die Teile einer Datei entfernt, die für ihre Ausführung nicht erforderlich sind. In Ihren Stylesheets oder Skripten ist beispielsweise Folgendes für die Ausführung nicht erforderlich:

  • Leerzeichen zum Einrücken
  • Bemerkungen
  • lange Funktions- und Variablennamen
  • unbenutzter Code

Die Minimierung hilft erheblich, indem sie die Größe Ihrer statischen Dateien verringert. Sie können Ihre Dateien mithilfe eines Dienstes wie minimieren Minimieren, oder installieren Sie eine davon Minifizierungs-Plugins in WordPress.

(c) Verwenden Sie asynchrones Laden

Ein Webbrowser rendert und fordert Ressourcen nacheinander an, sobald sie auf einer Webseite angezeigt werden. Dies wird als synchrones Laden bezeichnet. Sie können diese Standardfunktionalität des Browsers jedoch mithilfe von ändern das asynchrone Attribut Ressourcen zu laden, sobald sie verfügbar sind. Beispielsweise können Sie ein Skript wie folgt asynchron laden:

Hier ist Eine Liste von Plugins, die Ihnen beim asynchronen Laden in WordPress helfen.

(d) Verwenden Sie die GZIP-Komprimierung

Die GZip-Komprimierung ist eine Technik zum Komprimieren von Ressourcen über HTTP-Anforderungen. Bei der GZip-Komprimierung sendet der Server komprimierte Dateien mit Ressourcen, die der Browser beim Rendern einer Webseite entpackt.

Die Zeit und die Ressourcen, die zum Komprimieren und Dekomprimieren einer Ressource erforderlich sind, werden durch die Zeit und Bandbreite aufgewogen, die beim Übertragen einer kleineren Datei vom Server zum Client eingespart werden. Diese Technik lädt Seiten nicht nur schneller, sondern spart auch Serverkosten.

Die GZip-Komprimierung ist Teil einiger WordPress-Caching-Plugins wie WP Fastest Cache.

(e) Verwenden Sie Google CDN für beliebte Bibliotheken

Die endgültige Optimierungstechnik in diesem Schritt ist Verwenden von Google oder Microsoft CDN beim Abrufen allgemeiner Bibliotheken, die auf Ihrer Website verwendet werden. Der Grund dafür ist einfach: Aufgrund der Beliebtheit dieser CDNs ist es wahrscheinlich, dass ein Besucher bereits eine zwischengespeicherte Version der Ressource in seinem Browser hat.

Schritt 2: Bilder optimieren

Wie oben erläutert, sind Bilder die Hauptursache für die zunehmende Größe der Webseiten im Laufe der Jahre.

Schauen Sie sich sogar die eigenen Zahlen von CodeinWP an:

Bild laden

Deshalb, Das Anpacken von Bildern sollte zu den bedeutendsten Verbesserungen der Geschwindigkeit Ihrer Website führen, und das tut es.

Bilder sind für eine Website unerlässlich. Die Verwendung von Bildern in voller Qualität für das Web wird jedoch nicht wirklich empfohlen. Sie sollten Bilder so stark komprimieren, dass die Größe drastisch reduziert wird und gleichzeitig eine angemessene visuelle Qualität erzielt wird.

Sie können ein paar Dinge tun, um dies zu erreichen und die Geschwindigkeit der Website zu optimieren:

(a) Laden Sie Bilder der richtigen Größe hoch

Ihr aktuelles Thema hat wahrscheinlich die maximale Bildgröße, die angezeigt werden kann – in Bezug auf die Abmessungen. Finden Sie heraus, was das ist, und laden Sie dann nur Bilder hoch, die maximal doppelt so groß sind.

Warum zweimal? Auf diese Weise kann das Thema auch Versionen der Bilder in Retina-Qualität anzeigen.

(b) Verwenden Sie den richtigen Bildtyp

Die beiden am häufigsten verwendeten Bildtypen im Web sind JPGs und PNGs.

Sie sind nicht gleich.

  • JPG-Bilder sind für Fotos und andere komplexe Bilder mit vielen Farbinformationen gedacht
  • PNG-Bilder eignen sich perfekt für Grafiken mit wenig Farbinformationen, z. B. Screenshots der Benutzeroberfläche.

Beispiel eines PNG-BildesThemen

(c) Optimieren Sie Bilder vor dem Hochladen lokal

Es gibt verschiedene Tools, die Sie verwenden können, bevor Sie Bilder auf Ihre Website hochladen.

  • Versuchen Sie es mit einer Weblösung TinyPNG
  • Versuchen Sie es für den Desktop ImageOptim

tinypng
imageoptim

(d) Laden Sie Ihre Bilder faul

Eine andere Technik zur Optimierung von Bildern ist das verzögerte Laden. Dabei wird ein Bild erst heruntergeladen, wenn ein Besucher einen Bildlauf nach unten durchführt, um es anzuzeigen.

Lazyload-DemoDemonstration des faulen Ladens auf CodeinWP

Hier finden Sie eine vollständige Anleitung zum verzögerten Laden von Bildern auf Ihrer Website.

(e) Holen Sie sich ein Bildoptimierungs-Plugin

Zu guter Letzt sollten Sie ein Plugin zur Qualitätsbildoptimierung für Ihre WordPress-Site erhalten. Je nachdem, welches Sie am Ende verwenden, wird der Großteil Ihrer Bildoptimierungsanforderungen möglicherweise mit dem Autopiloten erledigt.

Hier sind 6 der besten Plugins zur Bildoptimierung im Vergleich.

Wenn Sie eine schnelle Empfehlung benötigen, schauen Sie sich unsere an Optimole. Es bietet eine hocheffiziente Bildkomprimierung zusätzlich zu einem CDN im kostenlosen Plan! Optimole liefert auch einige herausragende Ergebnisse, wenn es sich gegen seine Hauptkonkurrenten stellt:

PNG-Optimierungsergebnisse

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88,7%Verlustbehaftet und verlustfrei
Stellen Sie sich vor301 KB67 KB77,7%Verlustig
TinyPNG301 KB79,7 KB73,5%Verlustig
ShortPixel301 KB90,4 KB69,96%Verlustig
Smush301 KB247 KB17,9%Verlustfrei
EWWW301 KB257,4 KB14,6%Verlustfrei

JPG-Optimierungsergebnisse

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%Verlustig
TinyPNG518 KB248,6 KB52%Verlustig
Optimole518 KB274 KB47%Verlustbehaftet und verlustfrei
Stellen Sie sich vor518 KB338,7 KB34,64%Verlustig
EWWW518 KB488,9 KB5,7%Verlustfrei
Smush518 KB493 KB4,9%Verlustfrei


Bildoptimierung & Lazy Load von Optimole Bildoptimierung & Lazy Load von Optimole

Autor (en): Optimole

Aktuelle Version: 2.3.1

Letzte Aktualisierung: 21. April 2020

optimole-wp.zip


96% Bewertungen


50.000 + Installationen


WP 4.7 + Erforderlich

Schritt 3: Optimieren Sie HTTP-Anforderungen

Zu Beginn des Beitrags haben wir erläutert, dass beim Laden einer Webseite durch einen Benutzerbrowser die eigentlichen Übertragungen über einzelne HTTP-Anforderungen erfolgen. Eine einzelne Anforderung ruft jede Ressource ab. Daher erhöht eine Erhöhung der Anzahl solcher Anforderungen die Ladezeiten Ihrer Webseite.

Site-AnfragenHTTP-Anforderungen einer Webseite

(a) Dateien kombinieren

Die erste Aufgabe, um die Last von HTTP-Anforderungen zu minimieren, besteht darin, ähnliche Ressourcen zu kombinieren. Wenn Sie Ressourcen minimieren, können Sie ähnliche Dateien miteinander kombinieren. Beispielsweise können alle Stylesheets (CSS-Dateien) und alle benutzerdefinierten JavaScript-Dateien zu einzelnen Dateien kombiniert werden. Dies reduziert die Anzahl der Anforderungen, die ein Client stellen muss, um alle Ressourcen zu laden.

Wieder diese Minifizierungs-Plugins für WordPress kann Ihnen dabei helfen.

(b) Minimieren Sie DNS-Lookups

Wenn eine HTTP-Anfrage an eine Domain wie www.codeinwp.com gesendet wird, wird eine DNS-Suche (Domain Name System) durchgeführt, um die IP-Adresse des Servers zu ermitteln. Folglich sollte Ihr Ziel auch darin bestehen, die Anzahl der DNS-Suchvorgänge über alle Anforderungen hinweg zu minimieren, um das Laden der Website zu beschleunigen.

Hier ist ein cooler Guide von Kinsta wie das geht.

(c) Aktivieren Sie Keep-Alive

Ohne Optimierung sendet der Browser eine einzelne HTTP-Anforderung für jede Ressource. Diese Verbindung wird geschlossen, sobald der Download abgeschlossen ist. Der Browser fordert dann beim Server eine neue Ressource an. Keep Alive ist eine Technik, mit der eine Anforderung nicht beendet wird, wenn ein Ressourcendownload abgeschlossen ist.

Sie können Keep Alive auf folgende Arten aktivieren:

(d) Weiterleitungen minimieren

Eine Umleitung ist eine Anweisung, einen Client automatisch von einem Ort zu einem anderen Ort einer Ressource zu bringen. Jede Weiterleitung erhöht die Ladezeiten Ihrer Webseite. Sofern dies nicht unbedingt erforderlich ist, sollten Sie Weiterleitungen in Ihrem Code vermeiden.

(e) Verwenden Sie ein CDN

Ein CDN (Content Delivery Network) ist eine Sammlung von Webservern, die an großen geografischen Standorten vorhanden sind und Inhalte schnell und effizient an Kunden liefern.

Einem Client, der eine Ressource anfordert, wird die Ressource von einem Server bereitgestellt, der dem Standort des Clients geografisch am nächsten liegt. Dies stellt sicher, dass der angeforderte Inhalt den Client in kürzester Zeit erreicht!

Wir haben eine separate Ressource, in der die besten CDN-Lösungen für WordPress-Websites sowie Informationen zum Starren verglichen werden.

Schritt 4: Caching

Ohne einen Abschnitt zum Zwischenspeichern kann kein Leitfaden zur Optimierung der Website-Geschwindigkeit existieren. Einige Techniken, die wir zuvor besprochen haben, wie GZip-Komprimierung und Minificaiton, sind heute Teil vieler Caching-Lösungen.

Caching bezieht sich auf ein Phänomen des Speicherns einer Ressource in einem temporären Speicher, um sie bei Bedarf schnell abzurufen. Es gibt verschiedene Formen des Caching:

  • Seiten-Caching: Eine statische HTML-Version einer auf dem Server gespeicherten Seite
  • Datenbank-Caching: Die Ergebnisse allgemeiner Datenbankabfragen (z. B. Top-10-Beiträge auf Ihrer Site), die auf dem Server gespeichert sind
  • Browser-Caching: Speichern von Teilen Ihrer Seite im Browser

Wir haben die beliebtesten WordPress-Caching-Plugins in diesem Beitrag verglichen. TL; DR: Geh auschecken WP Rocket wenn Sie nach einer Komplettlösung suchen. Wenn Sie etwas bevorzugen, das kostenlos ist, finden Sie hier eine Anleitung So konfigurieren Sie den W3 Total Cache.

Schritt 5: Für Mobilgeräte optimieren

In den früheren Teilen dieses Artikels haben wir Optimierungstechniken erläutert, die sowohl für Desktop- als auch für Mobilgeräte relevant sind. Der Verbrauch von Inhalten auf Mobilgeräten nimmt jedoch zu, und ein kleinerer Bildschirm bringt neue Herausforderungen mit sich. In diesem Abschnitt werden daher Methoden zur Optimierung der Website-Geschwindigkeit für mobile Geräte erläutert.

Mobile Optimierung bezieht sich auf die Praxis, sicherzustellen, dass mobile Besucher Ihrer Webseite die gleiche Funktionalität und Effizienz wie ihre Desktop-Kollegen haben. Die folgende Liste enthält bestimmte Hygienefaktoren für die Kuratierung von Webinhalten für mobile Geräte:

  • Verwenden Sie responsives Webdesign, um sicherzustellen, dass verschiedene Geräte unterschiedliche Versionen einer Webseite erhalten
  • Vermeiden Sie die Verwendung von Flash und Popups, da mobile Geräte dies möglicherweise nicht unterstützen
  • Positionieren Sie Interaktionen wie Links nicht zu nahe beieinander

Zusätzlich zu diesen Faktoren ist AMP (Accelerated Mobile Pages) ein Projekt, das darauf abzielt, Inhalte zu erstellen, die schnell und geräteübergreifend konsistent sind.

Hier ist eine Anleitung für den Einstieg in AMP in WordPress.


AMPERE

Autor (en): AMP-Projektmitwirkende


74% Bewertungen


Über 500.000 Installationen


WP 4.9 + Erforderlich

Mehr Info

amp.1.5.3.zip

Aktuelle Version: 1.5.3

Letzte Aktualisierung: 15. April 2020


74% Bewertungen


Über 500.000 Installationen


WP 4.9 + Erforderlich

WordPress.org Plugin Seite


AMPERE

Fazit

Ich hoffe, dieser Leitfaden hat Ihnen einige Tipps gegeben, wie Sie das allgemeine Niveau der Website-Geschwindigkeitsoptimierung auf Ihrer Website verbessern können.

Nur um es noch einmal zusammenzufassen; Wir haben uns zuerst die Anatomie einer Webseite angesehen, um bestimmte Bereiche zu verbessern. Dann gingen wir zu bestimmten Schritten zur Optimierung über:

  • Schritt 1 befasste sich mit der Optimierung statischer Dateien in Form von Stylesheets und Skripten
  • In Schritt 2 wurden Bilder und ihre Optimierung behandelt
  • In Schritt 3 ging es um Techniken zur Optimierung von HTTP-Anforderungen
  • In Schritt 4 wurden einige beliebte Caching-Techniken erläutert
  • Schritt 5 umfasste die Optimierung für mobile Geräte

Gibt es etwas, mit dem Sie bei der Optimierung der Website-Geschwindigkeit zu kämpfen haben? Lass es uns in den Kommentaren unten wissen.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout, Präsentation und Bearbeitung von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map