Eine Website oder ein E-Commerce-Projekt einzurichten und zu betreiben ist großartig – Ihre Arbeit ist jedoch noch lange nicht getan, sobald Ihre Website eingerichtet ist und läuft.
Ohne eine angemessene Zustands- und Leistungsüberwachung wird Ihre Website unter den Folgen leiden – was viel größer sein kann als nur eine langsame Ladegeschwindigkeit.
Lassen Sie uns unsere Aufmerksamkeit auf ein hypothetisches, ideales Szenario lenken, in dem alle Websites der Welt so funktionieren, wie sie sollten. Wussten Sie, dass wir neben der sprunghaft ansteigenden 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.
Wenn man den Mittelwert betrachtet, der auch stark umweltbelastende Websites berücksichtigt, steigt diese Zahl auf 0,9 Gramm.
Abgesehen von Problemen auf globaler Ebene , eine ungesunde Website mit unzureichender Leistung kostet Sie Zeit, Geld und Einnahmen. Die Website-Gesundheit ist unserer eigenen ähnlich: Sie kann leicht vernachlässigt und nur schwer verbessert werden.
Sie müssen sich der Hauptkomponenten bewusst sein, aus denen die Website-Gesundheit besteht, um geeignete Überwachungspraktiken durchzuführen, um Bearbeitungszeit zu sparen.
Mit dem Aufkommen schneller und einfacher Website-Builder 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! In Sekundenschnelle haben Sie eine Website.
Viele Website-Eigentümer lehnen jedoch die Tatsache ab, dass die Erstellung einer Website nur der erste Schritt ist. Eine angemessene Leistungserhaltung und Zustandsüberwachung sind ebenfalls entscheidend.
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.
Contents
Aspekte, die für eine hohe Website-Gesundheitsbewertung zu überwachen sind
Core Web Vitals
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.
Einige Tools verfolgen Ihre Core Web Vitals, aber viele Website-Eigentümer 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 Messwerte, die Sie sehen werden:
Größter Contentful Paint (LCP)
Streben Sie nach einer Punktzahl von 2,5 Sekunden oder weniger.
Wenn Ihre Punktzahl über 2,5 Sekunden liegt, könnte dies auf Folgendes hindeuten: Ihr Server verzögert sich, die Ladezeiten der Ressourcen sind nicht optimal, Sie haben eine hohe Anzahl von JavaScript und CSS, die das Rendering blockieren , oder es gibt ein langsames Rendering auf der Clientseite.
Erste Eingabeverzö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 und die Hauptzeit minimieren Thread-Arbeit, halten Sie die Übertragungsgrößen klein und die Anzahl der Anfragen niedrig.
Cumulative Layout Shift (CLS)
Streben Sie nach einer Punktzahl von 0,1 oder weniger.
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.
Seitengeschwindigkeitsblocker
Mehrere Faktoren können die Ladegeschwindigkeit Ihrer Website beeinflussen. Wenn Sie jedoch ein begrenztes Zeitbudget haben und sich zuerst auf die Hauptursachen konzentrieren möchten, achten Sie genau auf die folgenden Faktoren:
- Nicht verwendetes JavaScript und CSS Code.
- Rendern Sie blockierenden JavaScript- und CSS-Code.
- Unminimierter 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 er herunterladen soll, indem er die „Server-Denkzeit” Dadurch wird das Laden der Seite beschleunigt.
So testen Sie Ihre Website:
- Navigieren Sie zu https://pagespeed.web.dev/
- Geben Sie die URL der Seite ein, die Sie scannen möchten.
Ich würde empfehlen, zuerst Ihre Homepage auszuwählen.
Eine andere Ein 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 Standardstandort aus durchgeführt.
Sie können sich auch als Benutzer registrieren und aus einer Liste von Standorten auswählen, um Ihren Standort zu testen Website aus verschiedenen Ländern, Geräten und Browsern.
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 individuelle Läufe.
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 &ndash ; zumal die SaaS-Branche bereits stark umkämpft ist.
Designelemente
Screenshot des Autors, 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 und die Elemente gestalten Sie können Ihre Leistung verbessern oder brechen?
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. Achten Sie darauf, die Größe Ihrer Bilder zu ändern, und vermeiden Sie das Hochladen riesiger Dateien, wenn sie nicht vollständig angezeigt werden.
Komprimieren Sie Ihre Bilder ebenso und probieren Sie stattdessen andere Dateitypen wie WebP, JPEG 2000 und JPEG XR aus schwerere JPEG- oder PNG-Dateien zu wählen.
Erwägen Sie die Implementierung von nativem Lazy Loading, 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 loading=”lazy&rdquo ; 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 „above the fold“ nicht träge laden, da dies den LCP-Score Ihres Bildes verschlechtert Seite und Google empfiehlt die Verwendung von fetchpriority=“high” Attribut auf Bildern „above the fold“, um LCP zu verbessern.
Wenn Sie dieses Attribut verwenden, müssen Sie die Bilder nicht vorab laden. Sie sollten “fetchpriority” Attribut auf Bildern „above the fold“.
Nutzen Sie außerdem die Reaktionsfähigkeit des “srcset” -Attribut, um Bilder in der richtigen Größe basierend auf der Bildschirmgröße zu laden und das Laden unnötig großer Bilder auf kleinen Bildschirmen zu vermeiden. Dies trägt erheblich zur Verbesserung des LCP-Scores bei.
Schriftarten
Extravagante benutzerdefinierte Schriftarten sind für Benutzer ohne 20/20-Sehvermögen oft schwierig zu lesen, aber sie können Ihre Website auch erheblich verlangsamen.
Wechseln Sie extern gehostete Schriftarten gegen websicherere Schriftarten und geben Sie Google-Schriftarten eine versuchen – solange sie über das CDN von Google gehostet werden.
Darüber hinaus sollten Sie erwägen, variable Schriftarten in die allgemeine Ästhetik Ihrer Website zu integrieren, da diese Schriftartspezifikation die Schriftdateigröße erheblich reduzieren kann.
Vergewissern Sie sich, dass Sie Ihre Schriftarten vorab geladen haben.
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 ein paar interaktive Elemente einzufügen, aber Ihre Website damit zu sättigen zu viele bewegliche „Dinge” kann sowohl für Benutzer als auch für Ihre Server frustrierend sein.
Verwenden Sie keine nicht zusammengestellten Animationen, da diese dazu führen, dass die Seite neu gezeichnet wird, was die Haupt-Thread-Arbeit erhöht – und die Webseite kann beim Laden visuell instabil erscheinen.
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
Die Betriebszeit zeigt, wie gut Ihre Website funktioniert.
Wenn Ihre Website häufig abstürzt oder nicht verfügbar ist, beeinträchtigt dies Ihre Benutzererfahrung, Ihr Google-Ranking und damit Ihren Umsatz.
Wenn möglich, streben Sie eine Betriebszeit von 99,999 % an und testen Sie Ihre Website von verschiedenen Standorten.
Tools zur Betriebszeitüberwachung:
- StatusCake.
- Pingdom .
- Bessere Betriebszeit.
- UptimeRobot.
Datenbankleistung
Wenn Sie die Grundlagen überprüft haben und Ihre Website immer noch langsam reagiert, kann dies auf eine schlechte Datenbankleistung zurückzuführen sein.
Sie können dies überprüfen, indem Sie die Antwortzeit für Ihre Abfragen überwachen und die Datenbankabfragen lokalisieren nehmen die meiste Zeit in Anspruch.
Wenn 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 basierend auf genauen 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 CPU (Central Processing Unit) regelmäßig überwachen, insbesondere nachdem Sie Updates oder Designänderungen implementiert haben.
Tools wie New Relic können Ihnen dabei helfen, Ihren gesamten Stack durch effizientes Monitoring und Debugging zu verbessern.
Suchsichtbarkeit
Viele der oben besprochenen Metriken haben bereits einen erheblichen Einfluss auf die Suchsichtbarkeit.
Wenn Sie also Ihre Website-Seiten über Google PageSpeed Insights ausführen 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 entscheiden , DeepCrawl oder jedes andere Tool, das Ihren Anforderungen am besten entspricht.
Website-Crawler helfen bei der Suche nach allen Arten von Problemen, wie zum Beispiel:
- Defekt Links.
- Fehlerhafte Bilder.
- Überwachen Sie wichtige Web-Metriken.
- Umleitungsketten.
- Strukturierte Datenfehler.
- Nicht indexierte Seiten.
- Fehlende Überschriften und Meta-Beschreibungen.
- Gemischter Inhalt.
Stellen Sie sicher, dass Sie in Bezug auf die folgenden Punkte gerüstet sind :
- XML-Sitemap– Stellen Sie sicher, dass Ihre Sitemap korrekt formatiert ist, und prüfen Sie, ob Aktualisierungen erforderlich sind, und reichen Sie Ihre Sitemap erneut über die Google Search Console ein.
- 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 Crawling-Traffic besser zu verwalten, insbesondere wenn Sie vermuten, dass Ihr Server von Anfragen von Google überlastet ist. s-Crawler.
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 erzielt, 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.
Ein SSL-Zertifikat zu erhalten ist kein besonders schwieriger Prozess, aber es kann 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 es seine Inhalte aktiv hält Server in der Nähe der Benutzer, unabhängig vom geografischen Standort. 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, verringert Ihre Bandbreitenkosten, verteilt Ihren Datenverkehr (verringert die Wahrscheinlichkeit, dass Ihre Website ausfällt) und erhöht die Sicherheit durch Funktionen wie DDoS-Abwehr.
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.
Web Application Firewall einrichten
Eine Web Application Firewall (WAF) schützt Webanwendungen, indem sie verdächtigen HTTP-Datenverkehr herausfiltert. Es zielt darauf ab, Anwendungen vor Angriffen wie:
- Site-übergreifender Fälschung.
- Site-übergreifend zu schützen -Scripting (XSS).
- Dateieinbindung.
- SQL-Injektion.
Nachstehend 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 z. B.:
- WordFence.
- Sucuri.
- All-In-One Security (AIOS).
Urteil
Das war's! Wie Sie sehen, 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 Messwerte ansehen und diese verbessern.
SEO ist auch für die Gesundheit Ihrer Website von entscheidender Bedeutung. Überprüfen Sie daher Ihre Suchpräsenz, Links und potenzielle Lastblocker, um zu sehen, was Sie können verbessern.
Und vergessen Sie auch nicht Ihr SSL-Zertifikat und Caching.
Ihr Website-Design kann sich auch auf Ihre Ladegeschwindigkeit und Leistung auswirken, besonders wenn Sie oder Ihre Designer es sind verwenden gerne gewichtige Designelemente.
Denken Sie daran, Ihre Bilder zu optimieren, schwere Schriftarten zu vermeiden und Animationen in Maßen zu verwenden.