Website-Leistungs- und Zustandsüberwachung: Tipps und Best Practices

Veröffentlicht: 2022-11-01

Das Einrichten und Betreiben einer Website oder eines E-Commerce-Projekts ist großartig – Ihre Arbeit ist jedoch noch lange nicht getan, wenn Ihre Website einmal eingerichtet ist und läuft.

Ohne eine angemessene Zustands- und Leistungsüberwachung wird Ihre Website unter den Folgen leiden – die weitaus größer sein können als nur eine langsame Ladegeschwindigkeit.

Wenden wir unsere Aufmerksamkeit einem hypothetischen Idealszenario zu, in dem alle Websites der Welt so funktionieren, wie sie sollten. Wussten Sie, dass wir neben der steigenden Benutzerzufriedenheit auch zu einer besseren Umwelt beitragen würden?

Schlecht funktionierende Websites wirken sich nicht nur auf jeden aus, der sie erstellt oder verwendet, sondern hinterlassen auch einen größeren CO2-Fußabdruck.

Laut Website Carbon Calculator haben Websites einen CO2-Fußabdruck, und die durchschnittliche Website-Seite emittiert 0,5 Gramm Kohlendioxid pro Aufruf. Das ist nur der Median.

Betrachtet man den Mittelwert, der auch stark umweltbelastende Websites berücksichtigt, steigt diese Zahl auf 0,9 Gramm.

Abgesehen von Problemen auf globaler Ebene kostet Sie eine ungesunde Website mit unzureichender Leistung Zeit, Geld und Einnahmen. Die Website-Gesundheit ist unserer eigenen ähnlich: Sie ist leicht zu vernachlässigen und schwer zu verbessern.

Sie müssen sich der Hauptkomponenten bewusst sein, die den Zustand der Website ausmachen, um geeignete Überwachungspraktiken durchzuführen und so Bearbeitungszeit zu sparen.

Mit dem Aufkommen schneller und einfacher Website-Ersteller ist das Erstellen von Websites für jedermann zugänglich geworden. Alles, was Sie tun müssen, ist sich anzumelden, eine Domain auszuwählen, Ihre Vorlage auszuwählen und voila! Sie haben eine Website in Sekunden.

Viele Websitebesitzer weisen jedoch die Tatsache zurück, dass die Erstellung einer Website nur der erste Schritt ist. Eine angemessene Leistungserhaltung und Zustandsüberwachung sind ebenfalls von entscheidender Bedeutung.

Lassen Sie uns in diesem Sinne einen Blick auf einige wesentliche Website-Gesundheits- und Leistungsindikatoren werfen: was sie sind, wie man sie überwacht und wie man Verbesserungen vornimmt.

Aspekte, die für eine hohe Website-Gesundheitsbewertung zu überwachen sind

Core Web Vitals

Hoher Website Health Score über Core Web Vitals Bild vom Autor, Oktober 2022

Google PageSpeed ​​Insights

Die ersten Metriken, die Sie bei der Durchführung von Leistungstests berücksichtigen sollten, sind Ihre Core Web Vitals. Diese Leistungsindikatoren zeigen Geschwindigkeit, Stabilität und Reaktionsfähigkeit und helfen Ihnen, die Qualität der Benutzererfahrung Ihrer Website zu verstehen.

Mehrere Tools verfolgen Ihre Core Web Vitals, aber viele Websitebesitzer tendieren zu einem einfachen Tool: Google PageSpeed ​​Insights.

Nachdem Sie Ihre URL in das Tool eingegeben haben, wird Ihnen ein Bericht angezeigt, der zeigt, ob Sie Ihren Core Web Vitals-Test bestanden haben, und alle anderen Aspekte, die Sie im Auge behalten müssen. Hier sind die drei wichtigsten Kennzahlen, die Sie sehen werden:

Größte zufriedene Farbe (LCP)

Streben Sie eine Punktzahl von 2,5 Sekunden oder weniger an .

Wenn Ihre Punktzahl über 2,5 Sekunden liegt, könnte dies auf Folgendes hindeuten: Ihr Server ist verzögert, die Ladezeiten der Ressourcen sind nicht auf dem neuesten Stand, Sie haben eine große Anzahl von JavaScript und CSS, die das Rendering blockieren, oder auf der Clientseite wird langsam gerendert.

Erste Eingangsverzögerung (FID)

Streben Sie eine Punktzahl von 100 Millisekunden oder weniger an .

Wenn Ihre Punktzahl diese Zeit überschreitet, müssen Sie möglicherweise die Auswirkungen auf den Code von Drittanbietern reduzieren, die JavaScript-Ausführungszeit reduzieren, die Arbeit des Hauptthreads minimieren, die Übertragungsgröße klein halten und die Anzahl der Anfragen niedrig halten.

Kumulative Layoutverschiebung (CLS)

Streben Sie eine Punktzahl von 0,1 oder weniger an .

Wenn Ihre Punktzahl diesen Wert überschreitet, können Sie zufällige Layoutverschiebungen vermeiden, indem Sie Größenattribute in Ihre visuellen und Videoinhalte einfügen (oder den Platz mit CSS-Feldern für das Seitenverhältnis reservieren). Vermeiden Sie es, Ihre Inhalte zu überlappen, und seien Sie vorsichtig, wenn Sie Ihre Übergänge animieren.

Pagespeed-Blocker

Mehrere Faktoren können die Ladegeschwindigkeit Ihrer Website beeinflussen. Wenn Sie jedoch ein begrenztes Zeitbudget haben und sich zuerst auf die Hauptschuldigen konzentrieren möchten, achten Sie genau auf die folgenden Faktoren:

  • Unbenutzter JavaScript- und CSS-Code.
  • Renderblockierender JavaScript- und CSS-Code.
  • Unverkürzter JavaScript- und CSS-Code.
  • Große Bilddateigrößen (mehr dazu weiter unten).
  • Zu viele Weiterleitungsketten.

Um das Laden von JavaScript- und CSS-Dateien zu verbessern, sollten Sie erwägen, sie vorab zu laden.

Eine weitere Option wäre das Aktivieren früher Hinweise, die dem Browser in der Antwort des HTTP-Servers mitteilen, welche Ressourcen mit dem Herunterladen beginnen sollen, indem die „Server-Denkzeit“ ausgenutzt wird, wodurch das Laden der Seite beschleunigt wird.

So testen Sie Ihre Website:

  1. Navigieren Sie zu https://pagespeed.web.dev/
  2. Geben Sie die URL der Seite ein, die Sie scannen möchten.

Ich würde empfehlen, zuerst Ihre Homepage auszuwählen.

Ein weiteres praktisches Tool ist WebPageTest.org, das auch Ihre Core Web Vitals und andere Metriken anzeigt, die Ihnen helfen können, die Leistung und Gesundheit Ihrer Website drastisch zu verbessern. Außerdem ist es kostenlos!

Fügen Sie einfach eine Seiten-URL in das auf der Website angezeigte Suchfeld ein, und es wird ein vollständiger Test von einem Standardspeicherort aus durchgeführt.

Sie können sich auch als Benutzer registrieren und aus einer Liste von Standorten auswählen, um Ihre Website von verschiedenen Ländern, Geräten und Browsern aus zu testen.

WebPageTest zeigt Ihnen anhand einer Leistungszusammenfassung, die aus vier Hauptabschnitten besteht, genau, wo sich Ihre Website in Bezug auf die Leistung befindet und was sie verlangsamen könnte: Chancen und Experimente, beobachtete Metriken, reale Benutzermessungen und einzelne Läufe.

beobachtete Metriken Bild vom Autor, Oktober 2022

Bei UCRAFT verwenden wir eine Kombination aus Tools wie PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest und mehreren anderen, um ein klares Verständnis dafür zu bekommen, woran wir arbeiten müssen, wenn es um die Leistung unserer Website geht – insbesondere in der SaaS-Branche bereits sehr wettbewerbsfähig.

Design-Elemente

Design-Elemente Screenshot vom Autor, Oktober 2022

Wenn wir über Website-Performance und Zustandsüberwachung nachdenken, überlassen wir diese normalerweise dem Technikteam.

Aber was wäre, wenn ich Ihnen sagen würde, wie Sie Ihre Website gestalten und welche Elemente Ihre Leistung beeinträchtigen oder beeinträchtigen können?

Richtig – es ist an der Zeit, das Designteam einzubeziehen.

Bildoptimierung

Bilder sind großartig, aber sie können Ihre Website verlangsamen, wenn sie nicht die richtige Größe haben. Stellen Sie sicher, dass Sie die Größe Ihrer Bilder ändern, und vermeiden Sie es, riesige Dateien hochzuladen, wenn sie nicht vollständig angezeigt werden.

Komprimieren Sie Ihre Bilder ebenso und probieren Sie verschiedene Dateitypen wie WebP, JPEG 2000 und JPEG XR aus, anstatt sich für schwerere JPEG- oder PNG-Dateien zu entscheiden.

Erwägen Sie die Implementierung von nativem verzögertem Laden, um sicherzustellen, dass Bilder geladen werden, wenn der Benutzer sie ansieht, anstatt sie alle auf einmal zu laden.

Fast alle Browser, einschließlich Chrome, Safari und Firefox, unterstützen das loading=“lazy“-Attribut auf <img> oder <iframe>, das den Browser anweist, sie zu laden, wenn der Benutzer näher an sie heranscrollt.

Stellen Sie sicher, dass Sie Bilder ohne Scrollen nicht faul laden, da dies den LCP-Score Ihrer Seite verschlechtert, und Google empfiehlt die Verwendung des Attributs fetchpriority="high" für Bilder über dem Falz, um den LCP zu verbessern.

Wenn Sie dieses Attribut verwenden, müssen Sie die Bilder nicht vorab laden. Sie sollten das Attribut „Fetchpriority“ für Bilder „above the fold“ entweder vorab laden oder festlegen.

Nutzen Sie außerdem die Reaktionsfähigkeit des „srcset“-Attributs, um Bilder in der richtigen Größe basierend auf der Bildschirmgröße zu laden, und vermeiden Sie das Laden unnötig großer Bilder auf kleinen Bildschirmen. Dies wird erheblich dazu beitragen, den LCP-Score zu verbessern.

Schriftarten

Extravagante benutzerdefinierte Schriftarten sind für Benutzer ohne 20/20-Sicht oft schwierig zu lesen, können Ihre Website jedoch auch erheblich verlangsamen.

Tauschen Sie extern gehostete Schriftarten gegen websicherere Schriftarten aus und probieren Sie Google-Schriftarten aus – solange sie über das CDN von Google gehostet werden.

Ziehen Sie außerdem in Betracht, variable Schriftarten in die allgemeine Ästhetik Ihrer Website einzubinden, da diese Schriftartspezifikation die Schriftdateigröße erheblich reduzieren kann.

Stellen Sie sicher, dass Sie Ihre Schriftarten vorab laden.

Animationen/Zusatzfunktionen

Das versteht sich von selbst: Übertreiben Sie es nicht mit Animationen, Videos, Spezialeffekten, Schiebereglern oder anderen ausgefallenen Elementen.

Es ist schön, hier und da einige interaktive Elemente einzufügen, aber Ihre Website mit zu vielen sich bewegenden „Dingen“ zu sättigen, kann sowohl für Benutzer als auch für Ihre Server frustrierend sein.

Verwenden Sie keine nicht zusammengestellten Animationen, da sie ein erneutes Zeichnen der Seite verursachen, was die Arbeit des Haupt-Threads erhöht – und die Webseite beim Laden visuell instabil erscheinen kann.

PWA-Lösung für mobile Optimierung

Warum gehen Sie nicht den gesamten mobilfreundlichen Weg und verwandeln Ihre mobile Website in eine Progressive Web App (PWA)?

Da PWAs mit Servicemitarbeitern erstellt werden, laden sie zwischengespeicherte Inhalte schneller. Darüber hinaus ähneln PWAs nativen mobilen Apps, was für Leistung und UX großartig ist.

Zusätzliche technische Leistungsmetriken

Betriebszeit

Uptime zeigt, wie gut Ihre Website funktioniert.

Wenn Ihre Website häufig abstürzt oder ausfällt, schadet dies Ihrer Benutzererfahrung, Ihren Google-Rankings und damit Ihrem Umsatz.

Streben Sie nach Möglichkeit eine Betriebszeit von 99,999 % an und testen Sie Ihre Website von verschiedenen Standorten aus.

Tools für die Verfügbarkeitsüberwachung:

  • StatusKuchen.
  • Pingdom.
  • Bessere Betriebszeit.
  • UptimeRobot.

Datenbankleistung

Wenn Sie die Grundlagen überprüft haben und Ihre Website immer noch langsam reagiert, kann dies an einer schlechten Datenbankleistung liegen.

Sie können dies überprüfen, indem Sie die Antwortzeit für Ihre Abfragen überwachen und die Datenbankabfragen ermitteln, die die meiste Zeit in Anspruch nehmen.

Sobald Sie das getan haben, beginnen Sie mit der Optimierung! Sie können Tools wie Blackfire.io verwenden, um Engpässe einfach zu identifizieren und Lösungen auf der Grundlage genauer Daten zu finden.

Hardware des Webservers

Ihre Website kann verzögern, wenn Ihr Speicherplatz voll mit Protokolldateien, Bildern, Videos und Datenbankeinträgen ist. Stellen Sie sicher, dass Sie die Auslastung Ihrer Zentraleinheit (CPU) regelmäßig überwachen, insbesondere nachdem Sie Aktualisierungen oder Designänderungen implementiert haben.

Tools wie New Relic können Ihnen dabei helfen, Ihren gesamten Stack durch effizientes Monitoring und Debugging zu verbessern.

Sichtbarkeit suchen

Viele der oben besprochenen Metriken haben bereits einen erheblichen Einfluss auf die Sichtbarkeit in der Suche.

Wenn Sie also Ihre Website-Seiten über Google PageSpeed ​​Insights laufen lassen und optimieren, tun Sie auch wichtige Dinge für Ihre SEO.

Sie können sich auch für Website-Crawling-Tools wie Semrush oder Sitechecker.pro, Screaming Frog, DeepCrawl oder jedes andere Tool entscheiden, das Ihren Anforderungen am besten entspricht.

Website-Crawler helfen, alle Arten von Problemen zu finden, wie zum Beispiel:

  • Kaputte Links.
  • Gebrochene Bilder.
  • Überwachen Sie wichtige Web-Metriken.
  • Ketten umleiten.
  • Strukturierte Datenfehler.
  • Keine indizierten Seiten.
  • Fehlende Überschriften und Meta-Beschreibungen.
  • Gemischter Inhalt.

Stellen Sie sicher, dass Sie in folgenden Punkten gerüstet sind:

  • XML-Sitemap – Stellen Sie sicher, dass Ihre Sitemap korrekt formatiert ist, und prüfen Sie, ob es notwendig ist, Aktualisierungen vorzunehmen und Ihre Sitemap erneut über die Google Search Console einzureichen.
  • Robots.txt – Stellen Sie sicher, dass Sie eine robots.txt-Datei für Ihre Webseiten verwenden (HTML, PDF oder andere Nicht-Medienformate, die Suchmaschinen lesen können), um den Crawl-Verkehr besser zu verwalten, insbesondere wenn Sie vermuten, dass Ihr Server damit überfordert ist Anfragen vom Crawler von Google.

Website-Sicherheit und Caching

Holen Sie sich Ihr SSL-Zertifikat!

Eine gesunde Website ist eine sichere Website.

Selbst wenn Ihre Website in perfekter Zeit geladen wird und eine Punktzahl von 100/100 erreicht, werden Benutzer (oder Suchmaschinen) Ihrer Website auf keinen Fall vertrauen, wenn sie nicht mit https:// beginnt.

Ein SSL-Zertifikat ist im Wesentlichen ein Code auf Ihrem Server, der eine verschlüsselte Verbindung aufbaut und garantiert, dass Benutzerdaten sicher bleiben.

Das Beziehen eines SSL-Zertifikats ist kein besonders schwieriger Prozess, kann jedoch langwierig sein, wenn es manuell durchgeführt wird.

Wenn Sie jedoch einen etablierten Hosting-Anbieter wie BlueHost verwenden, kann Ihr Anbieter in den meisten Fällen ein kostenloses SSL für Ihre Domain ausstellen.

Erwägen Sie die Verwendung eines CDN

Content Delivery Networks (CDNs) sind verteilte Server, die zusammenarbeiten, um schnelle Internetinhalte bereitzustellen.

Mit anderen Worten, ein CDN ist ein Tool, das die Leistung Ihrer Website beschleunigt, indem der Inhalt unabhängig vom geografischen Standort auf Servern in der Nähe der Benutzer gespeichert wird. Dies wird auch als Caching bezeichnet.

Wenn Sie eine globale Präsenz haben, ist ein CDN ein Muss! Es erhöht die Ladegeschwindigkeit Ihrer Seite, senkt Ihre Bandbreitenkosten, verteilt Ihren Datenverkehr (verringert die Wahrscheinlichkeit, dass Ihre Website ausfällt) und erhöht die Sicherheit durch Funktionen wie DDoS-Minderung.

Zu den Top-Playern der Branche gehören Cloudflare, Amazon Cloudfront und Google Cloud CDN. Es gibt jedoch viele andere Optionen, also recherchieren Sie und wählen Sie das beste CDN für Ihre Website und Ihre Geschäftsanforderungen aus.

Richten Sie die Webanwendungsfirewall ein

Eine Web Application Firewall (WAF) schützt Webanwendungen, indem sie verdächtigen HTTP-Datenverkehr herausfiltert. Es zielt darauf ab, Anwendungen vor Angriffen wie den folgenden zu schützen:

  • Cross-Site-Fälschung.
  • Cross-Site-Scripting (XSS).
  • Dateiaufnahme.
  • SQL-Injektion.

Nachfolgend finden Sie eine Liste der beliebtesten und vertrauenswürdigsten Firewalls für Webanwendungen:

  • Cloudflare-WAF.
  • GoDaddy-Firewall.
  • Microsoft Azure.

Oder wenn Sie WordPress verwenden, können Sie die Installation von Plugins in Betracht ziehen, wie zum Beispiel:

  • WordFence.
  • Sucuri.
  • All-In-One-Sicherheit (AIOS).

Urteil

Das ist ein Wrap! Wie Sie sehen können, hängen die Leistung und der Zustand einer Website von verschiedenen Aspekten ab.

Wenn Ihre Website hinterherhinkt, ist der erste logische Schritt, Ihre Core Web Vitals zu überprüfen und zu sehen, was Sie verbessern können. Sie können sich auch andere technische Kennzahlen ansehen und diese verbessern.

SEO ist auch für die Gesundheit Ihrer Website von entscheidender Bedeutung, also überprüfen Sie Ihre Suchsichtbarkeit, Links und potenzielle Ladeblocker, um zu sehen, was Sie verbessern können.

Und vergessen Sie auch nicht Ihr SSL-Zertifikat und Caching.

Ihr Website-Design kann sich auch auf Ihre Ladegeschwindigkeit und Leistung auswirken, insbesondere wenn Sie oder Ihre Designer gerne gewichtige Designelemente verwenden.

Denken Sie daran, Ihre Bilder zu optimieren, schwere Schriftarten zu vermeiden und Animationen in Maßen zu verwenden.

Mehr Ressourcen:

  • So verwenden Sie den Chrome UX-Bericht, um die Leistung Ihrer Website zu verbessern
  • 6 Tipps zur Verbesserung der Leistung des Google Display-Netzwerks
  • Technisches SEO für Fortgeschrittene: Ein vollständiger Leitfaden

Beitragsbild: JulsIst/Shutterstock