Die Bedeutung von Pagespeed für den Erfolg einer Website

"Schallgeschwindigkeit"; Illustration von freeillustrated

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Pagespeed ist ein wesentlicher Faktor für die Performance und den Erfolg einer Website. In einer digitalen Welt, in der Nutzer schnelle und nahtlose Erfahrungen erwarten, kann eine langsame Ladezeit dazu führen, dass Besucher abspringen. Dieser Beitrag soll verdeutlichen, warum Pagespeed so wichtig ist und wie die Ladezeiten einer Website verbessert werden können. Zudem gibt es Tipps, nicht alles umzusetzen, was sich anbietet.

Die Inhalte bilden das Herzstück einer Website
– doch Pagespeed sorgt für ein flüssiges Nutzererlebnis.

Inhaltsverzeichnis

Worin liegt der Vorteil von Pagespeed?

Benutzererfahrung (User Experience):
- Nutzer erwarten schnelle Ladezeiten. Laut Studien verlassen die meisten Besucher eine Website, wenn sie länger als drei Sekunden zum Laden benötigt. Eine schnelle Website sorgt für eine bessere Benutzererfahrung und erhöht die Wahrscheinlichkeit, dass Besucher länger bleiben und mehr Seiten aufrufen.
Suchmaschinenoptimierung (SEO):
- Google und andere Suchmaschinen berücksichtigen die Ladegeschwindigkeit einer Website bei der Platzierung in den Suchergebnissen. Eine schnellere Website kann somit zu einer besseren Sichtbarkeit und höheren Platzierungen führen.
Conversion-Rate:
- Eine schnellere Website kann die Conversion-Rate erhöhen. Nutzer, die nicht lange warten müssen, sind eher bereit weiterzuklicken.
Mobile Nutzer:
- Mobile Nutzer sind besonders empfindlich gegenüber langsamen Ladezeiten. Da immer mehr Menschen über mobile Geräte auf das Internet zugreifen, ist eine schnelle Ladezeit auf mobilen Endgeräten unerlässlich.

Faktoren, die die Ladezeit beeinflussen

Hosting
Bilder optimieren
Browser-Caching, Seiten-Caching usw.
Minifizierung von CSS, JavaScript und HTML
Content Delivery Network (CDN)

1. Hosting

- Ein zuverlässiger Hosting-Anbieter mit schnellen Servern und hoher Verfügbarkeit ist entscheidend. Shared Hosting kann kostengünstig sein, aber es kann auch die Ladezeit beeinflussen. Selbst können wir von Shared Webhosting nur von guter Erfahrung sprechen.

'Shared Webhosting' – feines Webhosting (inkl. sog. Managed 😉 ergo für Hausgebrauchs und weit darüber! Preis, ’n Butterbrot für Zwei auf der Alm. Siehe der Unterschiede Share Hosting – vServer – Root-Server.

Share Hosting – vServer – Root-Server. – einfach der 3

2. Bilder optimieren

- Große Bilddateien können die Ladezeit erheblich verlangsamen. Komprimierte Formate wie JPEG oder PNG und Tools wie TinyPNG reduzieren die Dateigröße, ohne die Bildqualität stark zu beeinträchtigen.
  - https://tinyjpg.com
  - https://compressor.io
  - https://www.iloveimg.com/de (plus Bildbearbeitungen)
  - Google-Chrome-Browser, Lighthouse
- Das Plug-in https://de.wordpress.org/plugins/optimus/ (u. a. in Empfehlung).
- Lazy Loading implementieren:
  - Lazy Loading sorgt dafür, dass Bilder und andere Medien erst geladen werden, wenn sie im sichtbaren Bereich des Nutzers erscheinen. Dies reduziert die anfängliche Ladezeit der Seite. Das hat heute WordPress inklusive, mit Plug-in Autoptimize ist das die bessere Wahl.

3. Browser-Caching, Seiten-Caching usw.

- Browser-Caching ermöglicht es, häufig genutzte Dateien auf dem Gerät des Nutzers zu speichern, sodass sie bei wiederholten Besuchen schneller geladen werden. Seiten-Caching speichert die generierte HTML-Seite und reduziert die Ladezeit, indem der Server nicht jedes Mal die Seite neu generieren muss. Beide Methoden können die Ladezeiten erheblich verbessern. Siehe unseren Beitrag WP: Caching unter der Lupe.

WP: Caching unter der Lupe – Einblicke in die Unterschiede

4. Minifizierung von CSS, JavaScript und HTML

- Minifizierung bedeutet, unnötige Zeichen (wie Leerzeichen und Kommentare) aus den Dateien zu entfernen, um deren Größe zu reduzieren und die Ladezeiten zu verbessern. Plug-ins wie Autoptimize können diesen Prozess automatisieren. Siehe unseren Beitrag zum Plug-in Autoptimize.

Autoptimize + Async JavaScript? … hier von Erfolg

Entdecke auf Wegerl.at unter den richtigen Suchbegriffen wertvolle Inhalte für deinen Erfolg!

5. Content Delivery Network (CDN)

- Der Vollständigkeit sei hier noch bemerkt: Ein CDN verteilt die Inhalte Deiner Website über mehrere Server weltweit, sodass die Daten vom nächstgelegenen Server zum Nutzer gelangen. Dies verkürzt die Ladezeit erheblich, insbesondere für internationale Besucher. Doch Lese: CDN und Google AMP – ein kritischer Blick.

CDN und Google AMP – ein kritischer Blick

Praktische Schritte zur Verbesserung der Ladezeit

Pagespeed-Analyse durchführen
Plug-ins sorgfältig auswählen
Datenbank optimieren

1. Pagespeed-Analyse durchführen

- Tools wie Googles https://pagespeed.web.dev/,
- https://tools.pingdom.com/,
- https://gtmetrix.com/ oder
- https://www.webpagetest.org/ analysieren die aktuelle Ladegeschwindigkeit einer Website und bieten konkrete Verbesserungsvorschläge.

Pagespeed-Analysen liefern Einsichten zur Ladezeit – die Vorschläge zur Optimierung sind der Schlüssel zum Erfolg.

WP Page Load Stats 7: Website-Performance im Blick

2. Plug-ins sorgfältig auswählen

- Plug-ins können die Funktionalität einer Website erweitern, aber zu viele oder schlecht entwickelte Plug-ins können die Ladezeit verlangsamen. Es sollten Plug-ins gewählt werden, die gut bewertet sind und regelmäßig aktualisiert werden.

3. Datenbank optimieren

- Eine überfüllte Datenbank kann die Ladezeit beeinträchtigen. Plug-ins wie WP-Optimize können verwendet werden, um die Datenbank zu bereinigen und zu optimieren. Siehe auch WP-Sweep. Die Golden Regel: Egal, was an der Datenbank geändert, optimiert oder anpasst wird, bitte immer ein Backup der Datenbank anlegen.

Fazit

Pagespeed ist ein zentraler Aspekt für den Erfolg einer Website. Durch die Optimierung der Ladezeiten kann nicht nur die Benutzererfahrung verbessert, sondern auch die Platzierungen in den Suchmaschinen und die Conversion-Rate erhöht werden. Die Umsetzung der oben genannten Schritte erfordert zwar etwas Zeit und Mühe, aber die positiven Auswirkungen auf die Website werden es wert sein.

Indem Pagespeed ernst genommen und kontinuierlich an der Optimierung gearbeitet wird, kann sichergestellt werden, dass die Website wettbewerbsfähig bleibt und die Besucher zufriedenstellt.

Tipps, nicht alles umzusetzen, was sich anbietet: Der restliche Beitrag dient lediglich als Aufzeichnung meiner anfänglichen Auffassungen zum Thema. Ich persönlich möchte anmerken, dass es durchaus ein Kunststück ist, ein einfaches WordPress durch Themen wie folgend unnötig zu verkomplizieren.

Website PageSpeed, vom Kennenlernen zur Weisheit

Das sind so Auszüge von Erfahrungswerten.

Es ist mühsam, das folgende gründlich zu lesen und nur noch so Auszug als Beispiele. Doch gerade für Anfänger ist es geeignet, sich damit zu beschäftigen, sich selbst zu prüfen und einen kritischen Blick zu entwickeln. Es dient eher zum Überfliegen und zum Bilden eines Gesamtbildes, anstatt nachzuahmen. Die Empfehlung ist meist, sich mit den geeigneten Plug-ins zu befassen.

Falls so Snippets angeboten werden …

Alt- und Title-Tag bei Bildern automatisch setzten?
Ungenutzte CSS-Klasse von Bildern entfernen?
Unnötige Width- und Height-Tags von Bildern entfernen?

Da folgen so Bemerkungen:

Hier meiner Website ist das Snippet Alt- und Title-Tag bei Bildern automatisch setzten nicht geeignet, da zum einen in Bildern von "pixabay.com" Zeichenfolge (Text) anstatt der Bilder angezeigt ist und andererseits die Darstellung der Website behindert.
Das Snippet Width- und Height-Tag und Attribute von Bildern entfernen ist hier ungeeignet, weil gewisse Bilder nicht so positioniert wie erwünscht und eingebettete Links sind schmaler dargestellt sowie das Titelbild teils falsch übertragen wird.

Mit diesen Dingen ist mit Vorsicht umzugehen und es ist immer besser davon abzusehen, solcherart Verbesserungen ist sich in Verzicht zu üben 🙂

Embeds + Responsive Images deaktivieren?

Wieder eine Bemerkung: Meiner Website hier ungeeignet …

function block_wp_embed() {
 wp_deregister_script('wp-embed'); }
add_action('init', 'block_wp_embed');

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

… eingebettete Links sind nicht entsprechender Darstellung.

Style.css auf Performance optimieren?

Als Anfänger bedenke bitte, dass bei der Komprimierung von originalen Dateien zu Problemen kommen kann und alle Kommentare zu den Funktionen entfernt werden. Abgesehen davon ist diese Vorgehensweise mit einem Plug-in wie 'Autoptimize' überflüssig.

wp.content/themes/twentyfourteen/style.css
Nach Theme Update wäre die komprimierte style.css zu erneuern.

Dieser Aktion von Komprimierung weist Dashboard/Aktualisierungen auf Theme Update hin und möchte aktualisiert sein. Der unerwünschten Updateaufforderung kann man ändern. Der komprimierten style.css die aktuelle Versionsnummer einfügen, z. B.:

/*
Version: 1.9
 */

… und der überflüssige Hinweis fällt weg. Für echtes Update ist man nicht irritiert.

Erstmal:

… habe ich die original style.css belassen, da es dem Editieren zu fehlerhaften Darstellung kam. Die Website hatte beiderseits eines Rands und ähnliches, der Menüs Texte waren eingerückt. Nachvollziehbar war dies nach Benützung des CSS Stylesheet Editor – wie auch immer …

Erfolg brachte die Komprimierungen sodann des Tools von cleancss.com/css-minify/ sowohl der style.css als auch im Customizer (wobei dieses als "Inline CSS" arbeitet) oder wie hier mit Child-Theme (als CSS-Datei). Wie gesagt, mit Plug-in wie 'Autoptimize' sind solcherart Aktionen überflüssig.

Relative URLs in WordPress?

Für die relativen URLs ist anzumerken: bei Weiterleitung von Artikel auf mehrere Seiten, d. h. Paginierung:

<!--nextpage-->

OT Anmerkung:  wird über Text-Editor eingefügt und im Visuellmodus als -----PAGE BREAK----- angezeigt.

Bemerkung: … hier zufällig des Beispiels muss zur Funktionalität für "Beitragstyp" der Filter /add_filter( 'post_link', 'root_relative_permalinks'); sowie für "Seitentyp" / add_filter( 'page_link', 'root_relative_permalinks'); auskommentiert bzw. gelöscht sein, weil ansonsten, die Buttons zwar dargestellt sind, aber keine Weiterleitung nächsten Seite besteht.

Herzschlag von WordPress regulieren?

Die WordPress Heartbeat API ist eine nützliche Funktion, die Echtzeitkommunikation zwischen dem Server und dem Browser ermöglicht, während man im WordPress-Administrationsbereich angemeldet ist. Sie nutzt die Datei /wp-admin/admin-ajax.php, um AJAX-Anfragen vom Browser auszuführen. Standardmäßig erfolgen diese Anfragen alle 15 Sekunden auf Seiten zum Bearbeiten von Beiträgen und alle 60 Sekunden auf dem Dashboard.

Da gibt es sowohl Snippets als auch bspw. Plug-in mit über 4 MB.

/* --- WP-Herzschlag anpassen --- */

function custom_heartbeat_settings( $settings ) {
   // Legen Sie ein längeres Herzschlagintervall fest, um die Serverlast zu verringern
    $settings['interval'] = 120; // Für alle Seiten auf 120 Sekunden einstellen

    // Wenden Sie bei Bedarf verschiedene Intervalle an, die auf der Bildschirm -ID basieren
    if ( strpos( $_SERVER['REQUEST_URI'], 'post.php' ) !== false || strpos( $_SERVER['REQUEST_URI'], 'post-new.php' ) !== false ) {
        $settings['interval'] = 30; // Setzen Sie auf 30 Sekunden für die Bearbeitungsseiten
    }

    return $settings;
}
add_filter( 'heartbeat_settings', 'custom_heartbeat_settings' );

/* Ende WP-Herzschlag anpassen */

Beim Verwenden des Snippets treten Ungereimtheiten auf, wie beispielsweise, dass die Zeitangaben bei den Revisionen nicht mehr in der richtigen Reihenfolge sind.

Die vollständige Deaktivierung des Herzschlags kann zu unerwünschten Nebenwirkungen führen, insbesondere für Funktionen, die auf regelmäßige AJAX-Abfragen angewiesen sind.

… et cetera etc.

Wie immer, solcherart Snippets und Performance-Tipps mit sehr kritischem Blick betrachten – im Zweifelsfall besser sein lassen! – oder sei auf unterschiedliche Aspekte vorbereitet!