Webleistung und -geschwindigkeit: die besten Techniken
Veröffentlicht: 2021-08-30Ladegeschwindigkeit und Web-Performance sind in aller Munde in den SEO- und Webperf-Communities sowie im weiteren Sinne im E-Marketing und E-Commerce.
Wie Andy Davies, Berater und Referenz für Web-Performance, uns daran erinnert:
„Der Kontext beeinflusst die Erfahrung,
Erfahrung beeinflusst das Verhalten,
Verhalten beeinflusst Geschäftseinnahmen.“
Egal, ob Sie versuchen, Ihren Umsatz, Ihre SEO oder beides zu steigern, Sie müssen wissen, dass schnelle Seiten für die Qualität Ihrer Benutzererfahrung unerlässlich sind. Geschwindigkeit hilft auch dabei, die richtigen Signale an Google zu senden, das seit dem Page Experience-Update die Geschwindigkeit berücksichtigt.
Wie Sie auch wissen, muss eine Website die Erwartungen der Benutzer erfüllen, bevor sie die der Suchmaschinen erfüllt. Daher sind Anzeigegeschwindigkeit und Interaktivität Teil der Voraussetzungen für ein qualitativ hochwertiges Benutzererlebnis, vor allem um Engagement und Conversions zu fördern! Beachten Sie beispielsweise, dass laut einer Google-Studie 77 % der Internetnutzer eher dazu neigen, auf einer Website oder einer Anwendung zu bestellen, mit der sie ihren Kauf schnell abschließen können.
Aber welche Techniken haben die sichtbarste Wirkung auf Ihre Besucher, um ihnen ein reibungsloses Surferlebnis und ein echtes Geschwindigkeitsgefühl zu bieten?
Hier ist eine nach Optimierungshebeln organisierte Checkliste für eine bessere Anzeigegeschwindigkeit und Interaktivität.
Optimieren Sie die Anzeigegeschwindigkeit einer Website
Je heller eine Seite ist, desto weniger Zeit wird für die Anzeige benötigt.
Zusätzlich zur Ressourcenoptimierung können Sie die Anzeigerate und die Abmessungen der verschiedenen Elemente festlegen, aus denen eine Seite besteht, um das Gefühl von Geschwindigkeit und Benutzerfreundlichkeit zu verbessern. Hier sind einige grundlegende Techniken:
- Bilder in die effizientesten Formate komprimieren
Die Formate WebP (empfohlen von Google) und AVIF (die noch bessere Ergebnisse liefern) der neuen Generation ermöglichen es Ihnen, das Gewicht von Bildern im Vergleich zu JPEG um bis zu 50 % zu reduzieren und gleichzeitig eine optimale visuelle Qualität beizubehalten. Da Sie wissen, dass das Gewicht von Bildern etwa 50 % des Gewichts der Seiten ausmacht, ist dies ein wesentlicher Hebel, um Ihre Seiten schnell zu machen. - Passen Sie die Anzeige von Medien und Bildern an verschiedene Bildschirme an
Ändern Sie die Größe und definieren Sie die Größe von Medien und Bildern, je nachdem, ob der Benutzer Ihre Website von einem Mobiltelefon oder einem Computer aus besucht. - Reduzieren Sie das Gewicht der Seitenressourcen
Optimieren Sie Ihren Code: Minimierung (Entfernung unnötiger Zeichen) von HTML-, JS- und CSS-Dateien und Ressourcenkomprimierung (Gzip- und Brotli-Formate) und in einigen Fällen Verkettung sind bewährte Methoden, um das Gewicht von Seiten zu reduzieren und somit zu beschleunigen die Anzeige im Browser. - Faules Laden
Diese Technik besteht darin, nur das zu laden, was auf dem Bildschirm sichtbar ist, anstatt die gesamte Seite zu laden. Mit anderen Worten, der Browser leistet nur den Aufwand, der im Verhältnis zu dem, was der Besucher auf seinem Bildschirm sehen muss, unbedingt erforderlich ist. - Schriftarten optimieren
Sie können das Format Ihrer Schriftarten optimieren (z. B. WOFF2, wodurch 30 bis 50 % der Dateigröße eingespart werden) und auch festlegen, dass Text angezeigt wird, auch wenn die Schriftart noch nicht vom Browser geladen wird, um das Rendern zu beschleunigen. - Beseitigen Sie blockierende Ressourcen und laden Sie sie asynchron
Vermeiden Sie es, das Rendern Ihrer Seiten zu blockieren: Laden Sie Ressourcen lieber asynchron, insbesondere für CSS (kritisches CSS), JS (async und defer) und Schriftarten (display:swap).
Wenn Sie keine Wahl haben, weil einige Ressourcen zu Beginn des Seitenladens unerlässlich sind, müssen diese Ressourcen natürlich so leicht wie möglich sein. - Übernehmen Sie die richtige Caching-Strategie
Damit Seiten für Ihre Benutzer so schnell wie möglich angezeigt werden, sollten Sie statische Elemente zwischenspeichern.
Dazu müssen Sie vorab dynamische Inhalte und statische Inhalte identifizieren und die Regeln für das Caching statischer Inhalte definieren: wie lange und auf welchem Cache (Browser, Herkunft oder CDN).
[Fallstudie] Verwaltung des Bot-Crawlings von Google
Lesen Sie die FallstudieVerbessern Sie die Interaktivität: sofort ansprechende Seiten
Neben der Geschwindigkeit, mit der Elemente im Browser angezeigt werden, ist die Fähigkeit zur Interaktion unerlässlich, um Ihre Benutzer vollständig zufrieden zu stellen.
Andernfalls setzen Sie sie Frustration aus, die sich in Verhaltensweisen wie wütenden Klicks, hektischen Bewegungen der Maus auf der Seite oder willkürlichem Scrollen niederschlägt, um zu überprüfen, ob die Seite funktioniert.
Im schlimmsten Fall kehren Ihre Besucher auf die vorherige Seite zurück oder verlassen Ihre Website endgültig, um eine neue Suche bei Google durchzuführen, oder gehen zu Ihren Mitbewerbern.
Denken Sie daran, dass 43 % der Internetnutzer im Falle einer negativen Erfahrung für ihren nächsten Einkauf auf die Website eines Mitbewerbers gehen. Sie müssen sich also die Mittel geben, um Ihre Besucher anzuziehen, aber auch zu halten.
Meistens sind es die Skripte und Javascript von Drittanbietern, die für eine schlechte Interaktivität verantwortlich sein können. Solange der Browser damit beschäftigt ist, JavaScript abzurufen, zu parsen und auszuführen, kann er tatsächlich nicht auf die Interaktionen des Benutzers reagieren.
Auch hier gibt es Techniken, um Ihren Code und Ihre Drittanbieter zu optimieren und Ihren Besuchern ein optimales Erlebnis zu ermöglichen:
- Reduzieren Sie die Auswirkungen Dritter, indem Sie deren Beladung verzögern
Sie können mit dem Laden und Ausführen von Skripts beginnen, nachdem die vorrangigen Inhaltselemente auf Ihrer Seite angezeigt wurden. Aber Achtung: Denken Sie daran, dass das Verzögern des Ladens von JavaScript es in Bezug auf die Leistung nicht kostenlos macht!
Es kann darum gehen, das Laden einiger Funktionen (Chat, Widgets, Tracking…) nach der Anzeige der Hauptelemente zu verschieben, um den Benutzer zu beruhigen, aber es löscht nicht die Zeit, die der Browser benötigt, um den Code zu verarbeiten verschiebt es nur in der Zeit. - Reduzieren Sie die JavaScript-Ausführungszeit
Teilen Sie die Aufgaben auf, die Ihre Browserzeit in Anspruch nehmen (lange Aufgaben), und stellen Sie außerdem sicher, dass Sie eine kurze Verarbeitung als Reaktion auf Benutzerinteraktionen bevorzugen (z freie Zeit, um bestimmte JavaScript-Verarbeitungen auszuführen). - Reduzieren Sie die Arbeit des Hauptthreads
Der Browser kann schneller auf Interaktionen reagieren, indem er die Anzahl der Anfragen und die Größe des Austauschs reduziert.
Sparen Sie auch Zeit: Automatisieren Sie die Optimierungstechniken Ihrer Website
Wir haben gerade zwei sehr wichtige Aspekte der Benutzererfahrung behandelt: Anzeigegeschwindigkeit und Interaktivität. Die gute Nachricht ist, dass alle Optimierungen, die wir gerade in dieser Checkliste erwähnt haben, automatisiert werden können!
Außerdem haben Sie möglicherweise zwei von Googles Core Web VItals verlinkt, die es Ihnen ermöglichen, diese Aspekte zu bewerten: die Largest Contentful Paint und die First Input Delay.
Natürlich sollten Sie auch daran denken, die visuelle Stabilität Ihrer Seiten für ein optimales Benutzererlebnis zu verbessern, indem Sie an Ihrem kumulativen Layout-Shift-Score arbeiten.
Sie sollten wissen, dass diese 3 Metriken (LCP, CLS und Total Blocking Time oder TBT, ein Äquivalent von FID) 70 % der von PageSpeed Insights vergebenen Punktzahl ausmachen.
Logischerweise wirkt sich also alles, was Sie tun, um Ihre Seiten zu beschleunigen und diese Metriken zu optimieren, positiv auf Ihre Benutzer sowie auf Ihre Leistungswerte aus.
Kurz gesagt, Sie können bei Ihrer UX denselben Ansatz anwenden wie bei SEO: Hochwertige Inhalte und Erfahrungen garantieren die Zufriedenheit der Benutzer und tragen dazu bei, von Google besser indexiert zu werden.
Auch müssen Webperf-Optimierungen, wie bei SEO, im Laufe der Zeit beibehalten werden.
Dies erfordert Zeit und Fachwissen, da sich Techniken und Metriken schnell weiterentwickeln. Darüber hinaus haben technische Ressourcen selbst in großen Teams nicht immer die Zeit oder das Wissen, um die Geschwindigkeit einer Website effektiv aufrechtzuerhalten. und der Einsatz von Ressourcen und Energie für eine Kommandooperation, die wie ein Auflauf abfällt, ist sehr frustrierend und sogar entmutigend.
Anstatt also Zeit mit der Wartung zu verschwenden, die Nebenwirkungen bei jeder Weiterentwicklung der Website zu fürchten und die Plugins zu vervielfachen, auf die Gefahr hin, sie zu überlasten, ist es besser, die Anwendung aller Frontend-Optimierungstechniken mit einem einzigen Tool zu automatisieren!
Sie sollten wissen, dass der ROI einer Webperf-Optimierungslösung für stark frequentierte E-Commerce-Websites in den meisten Fällen einfach zu messen ist.
Tatsächlich hat Google geschätzt, dass -0,1 Sekunden Ladezeit zu +8 % Conversions führen können, was eine Frontend-Optimierungslösung sehr einfach erreichen kann.
Bei Fasterize haben wir festgestellt, dass oft sogar eine Steigerung der Konversionsraten von weniger als 1 Punkt ausreicht, um den ROI unserer SaaS-Lösung sicherzustellen; Ganz zu schweigen von der Zeitersparnis der technischen Teams.
Da das Geschäft die Sehnen des Krieges ist, können Sie die Berechnung selbst durchführen, und es ist einfach! Es ermöglicht Ihnen, das Interesse an der Automatisierung der Leistungsoptimierung zu verstehen und Ihre internen Teams zu überzeugen und einzubeziehen.
Sparen Sie Zeit an allen Fronten!