Optimieren der Performance Ihrer CMS Hub-Website

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Starter, Professional, or Enterprise

Wie gut das Nutzererlebnis für Website-Besucher ist, hängt von der Qualität des Content, der Ladegeschwindigkeit der Seiten, der Sicherheit und der Barrierefreiheit ab. Wenn Sie diese Faktoren verbessern, wirkt sich das positiv auf die Suchmaschinenoptimierung aus.

Eine bessere Performance bietet Besuchern ein besseres Nutzererlebnis. Sie müssen also die Schwachpunkte Ihrer Website finden und beheben, um eine bessere Performance zu erzielen.

Beginnen Sie mit einer guten Grundlage

Es ist einfacher, auf einem guten Fundament aufzubauen, das mit Blick auf die Performance entwickelt wurde, als zu versuchen, Performance-Probleme später zu beheben. Denken Sie an folgende Metapher: es ist einfacher, von Grund auf neu ein schnelles Auto zu konstruieren, als ein langsames Auto zu kaufen und zu versuchen, es schnell zu machen.

Die HubSpot CMS Boilerplate wurde entwickelt, um schnell zu sein und bewährte Methoden zu fördern. In der GitHub README finden Sie die aktuellen Scores in Lighthouse und Website Grader.

Wenn Sie von der Boilerplate aus entwickeln, wissen Sie, dass diese Werte auch ohne jeglichen von Ihnen hinzugefügten Code erreicht werden. Das bedeutet, dass Sie Ihre Aufmerksamkeit auf den Code richten können, den Sie über die Boilerplate hinzugefügt haben. 

Build a site based on the boilerplate

Häufige Engpässe bei der Website-Performance

Die meisten Techniken und bewährte Methoden zur Optimierung der Webleistung sind nicht HubSpot-spezifisch. Der Grund dafür ist, dass auch die meisten Engpässe bei der Website-Performance nicht HubSpot-spezifisch sind. 

Die meisten Performance-Probleme lassen sich in zwei Kategorien einteilen: Rendering und Laden.

  • Lade-Performance ist die Effizienz der Übertragung aller für Ihre Webseite benötigten Dateien an den Browser des Benutzers.
  • Rendering-Performance bezeichnet die Effizienz des Browsers, alles, was er heruntergeladen hat, zu verarbeiten und dem Benutzer das Endergebnis anzuzeigen.

Die Lade-Performance ist etwas einfacher zu verstehen – die Anzahl der Dateien, die Größe der Dateien und die Geschwindigkeit der Bereitstellung dieser Dateien bestimmen die Lade-Performance. Rendering-Performance ist ein kompliziertes Design. Cascading Style Sheets (CSS), JavaScript (JS), Bilder, Videos, das vom Besucher verwendete Gerät und der verwendete Webbrowser sind allesamt wichtige Faktoren. CSS ist eine rendering-blockierende Ressource. Schlecht geschriebenes CSS kann beim Rendern der Seite eine kumulative Layout-Verschiebung (Cumulative Layout Shift, CLS) verursachen. Bilder können CLS auslösen und benötigen viel RAM. Videoplayer können CLS verursachen, einige Dateiformate erfordern mehr Verarbeitungsaufwand. JS kann das Document Object Model (DOM) und das Cascading Style Sheet Object Model (CSSOM) einer Seite manipulieren und damit eines der genannten Probleme verursachen. JS kann auch ressourcenintensiv sein. All diese Faktoren müssen ausgeglichen werden, und es müssen bewährte Methoden befolgt werden, um ein schnelles Erlebnis für alle Besucher zu gewährleisten.

Bilder

Bilder sind auf fast jeder Seite im Internet zu finden. Bilder sind in der Regel die größten Dateien auf einer Seite. Je mehr Bilder und je größer die Bilder sind, desto länger dauert es, bis die Seite geladen ist. Animierte Bilder, wie GIFs und animiertes WebP, benötigen ebenfalls mehr Platz als nicht animierte Bilder derselben Größe. Einige Bildformate sind ebenfalls besser in der Performance als andere und für bestimmte Szenarien besser geeignet.

Was Sie tun können

  1. Das Wichtigste, was Sie tun können, ist, Ihre Bilder für das Web zu optimieren. Bildoptimierung ist eine gemeinsame Aufgabe von Content-Autoren und Entwicklern.
  2. Verwenden Sie weniger Bilder pro Seite.
  3. Verwenden Sie das richtige Bildformat für den jeweiligen Anwendungsfall.
  4. Verwenden Sie nach Möglichkeit skalierbare Vektorgrafiken (SVGs). SVGs können unendlich groß werden, ohne an Qualität zu verlieren. Das Einbinden von SVGs ist sinnvoll, wenn Sie Animationen erstellen. Bei statischen Grafiken ist die Erstellung eines SVG-Sprite-Sheets oder die einfache Behandlung als normales img-Element oder Hintergrundbild in der Regel besser für die Performance.
  5. Laden Sie Bilder per Lazy Loading auf intelligente Weise.
  6. Stellen Sie sicher, dass die img-Elemente die HTML-Attribute „height“ und „width“ enthalten. Dies erleichtert den Browsern die Rendering-Zeit und ermöglicht es HubSpot, auf intelligente Weise ein srcset für Sie hinzuzufügen. HubSpot hilft nicht nur beim Optimieren, Webbrowser können auch auf intelligente Weise für kumulative Layoutverschiebungen optimieren, wenn Sie Breite und Höhe angeben. 
  7. Verwenden Sie die CSS-Eigenschaft aspect-ratio, um Platz zu reservieren, wenn sich die Maße des Bildes ändern können.
  8. Verwenden Sie resize_image_url, um zu erzwingen, dass Bilder auf eine bestimmte Auflösung verkleinert werden.
  9. Verwenden Sie für Hintergrundbilder Medienabfragen in Kombination mit resize_image_url, um Bilder in einer für das jeweilige Gerät sinnvollen Größe bereitzustellen.
  10. Große Hero-Bilder können mit <link rel="preload" as="image" href="http://example.com/img_url.jpg"> innerhalb eines require_head-Tags vorgeladen werden. Gehen Sie sparsam mit diesem Verfahren um, eine übermäßige Anwendung kann der Performance schaden.

Automatisch abgespielte Videos

Videohintergründe und automatisch abgespielte Videos können eine Website durchaus von anderen abheben. Leider haben sie ihren Preis. Videohintergründe werden häufig für Website-Header verwendet. Wenn ein Video automatisch abgespielt wird, bedeutet dies, dass der Browser sofort mit dem Laden des Videos beginnen muss. Dies kann vor allem bei langsameren Verbindungen oder bei der Nutzung von Handydaten problematisch sein.

Was Sie tun können

  1. Vermeiden Sie die Verwendung von automatisch abspielenden Videos. Wenn es sich um eine Hintergrundanimation handelt, sollten Sie CSS-Animationen oder JavaScript-Animationen verwenden. Wenn Sie ein automatisch abspielendes Video anzeigen müssen:
  2. Wählen Sie je nach Anwendungsfall eine angemessene Auflösung für das Video, und wenden Sie einen Effekt auf das Video an, damit eine niedrigere Auflösung weniger auffällt.
  3. Stellen Sie sicher, dass die Qualität des Videos je nach Gerät und Verbindung skaliert wird. Am besten verwenden Sie dazu einen Video-Sharing-/Hosting-Dienst wie YouTube, Vidyard oder Vimeo.
  4. Deaktivieren Sie die automatische Wiedergabe auf mobilen Geräten und zeigen Sie stattdessen ein Ersatzbild an.

JavaScript

JavaScript (JS) ist nützlich, um Ihrer Website Interaktivität hinzuzufügen. Das Laden von viel JS-Code erhöht im Allgemeinen die Dateigröße der JS-Dateien und die Zeit, die der Browser zum Rendern interaktiver Elemente benötigt. Das Laden von JS im <head> kann auch ein Problem darstellen, da JavaScript standardmäßig eine rendering-blockierende Ressource ist. Außerdem wird JS auf dem Gerät des Besuchers ausgeführt, d. h., es ist auf die Ressourcen dieses Geräts beschränkt.

Was Sie tun können

  1. Als das CMS von HubSpot auf den Markt kam, wurde jQuery standardmäßig im <head> geladen. Sie können es unter „Einstellungen“ > „Website“ > „Seiten“ vollständig entfernen oder auf die neueste Version von jQuery aktualisieren. Seien Sie vorsichtig, wenn Sie diese Einstellungen auf älteren Websites ändern, wenn Sie diese nicht selbst erstellt haben, da sie möglicherweise mit jQuery erstellt wurden oder auf dem Laden von jQuery im Header basieren.
  2. Stellen Sie sicher, dass JavaScript kurz vor </body> geladen wird, um eine Rendering-Blockierung zu vermeiden. Sie können require_js verwenden, um JavaScript für Module oder Vorlagen nur bei Bedarf zu laden, ohne dass das JavaScript versehentlich mehrfach für mehrere Instanzen eines Moduls geladen wird.
  3. Erwägen Sie ein Refactoring Ihres JS, um effizienter zu werden. Verwenden Sie weniger JS-Plug-ins, verwenden Sie semantisches HTML, wo es sinnvoll ist. Verwenden Sie zum Beispiel für Dropdowns <details> und <summary>. Verwenden Sie für modale Dialogfelder <dialog>.
  4. Wenn Sie eine riesige JS-Bibliothek nur für ein paar kleine Funktionen verwenden, sollten Sie es in Betracht ziehen, Vanilla JS zu verwenden oder eine Teilmenge der Bibliothek zu laden, wenn möglich.
  5. Verwenden Sie require_js, um JS nur bei Bedarf und nur einmal pro Seite zu laden. Verwenden Sie beim Einsatz von require_js die Attribute async oder defer, um die Seiten-Performance zu verbessern.
  6. Um zu steuern, wo und wann das JavaScript eines Moduls geladen wird, verwenden Sie js_render_options in der meta.json-Datei des Moduls.
  7. Wenn Sie externe Ressourcen laden, verwenden Sie „preconnect“ und „DNS prefetch“ in geeigneter Weise, um ein schnelleres Erlebnis zu bieten.
  8. Begrenzen Sie die Anzahl der von Ihnen verwendeten Tracking-Skripts. Tracking-Skripts versuchen oft, alle Aktionen eines Benutzers auf einer Seite zu verstehen, um Ihnen Einblicke zu geben. Das ist eine Menge Code, der analysiert, was der Benutzer tut. Jedes Tracking-Skript verstärkt dies noch.

Tool für Empfehlungen

Das HubSpot-Tool für Empfehlungen ist eine hervorragende Möglichkeit, Performance- und SEO-Feedback speziell für Ihre Website zu erhalten.  

Erfahren Sie mehr über das Tool für Empfehlungen

Code-Warnungen

Code-Warnungen ist eine Funktion von CMS Hub Enterprise, die als zentraler Überblick über Probleme dient, die innerhalb Ihrer CMS Hub-Website identifiziert werden. Das Beheben von Problemen, die in Code-Warnungen identifiziert werden, kann dazu beitragen, die Performance Ihrer Website zu optimieren. Die identifizierten Probleme umfassen verschiedene Bereiche von HubL-Limits bis hin zu CSS-Problemen.

Erfahren Sie mehr über Code-Warnungen.

Was übernimmt HubSpot für Sie?

Die meisten bewährte Methoden für Performance/Geschwindigkeit sind nicht für HubSpot spezifisch. Das CMS von HubSpot kümmert sich automatisch um viele gängige Performance-Probleme für Sie. Zu diesen Optimierungen zählen:

Beim Einfügen von CSS in ein benutzerdefiniertes Modul lädt HubSpot die module.css-Datei auf intelligente Weise nur dann, wenn ein Modul auf einer Seite verwendet wird, und lädt sie nur einmal, unabhängig davon, wie viele Instanzen des Moduls sich auf der Seite befinden. Standardmäßig wird module.css nicht asynchron geladen, Sie können dies jedoch ändern, indem Sie css_render_options in die meta.json-Datei des Moduls aufnehmen.

Zusätzliche Ressourcen zur Verbesserung der Geschwindigkeit Ihrer Website

Es gibt eine Vielzahl von Tools, mit denen sich die Performance verbessern und testen lässt. Es ist hilfreich, diese Tools zu kennen und zu nutzen. Diese Liste erhebt keinen Anspruch auf Vollständigkeit und stammt von unserer Entwickler-Community.

Bildoptimierung

Wenn Sie Ihre Bilder vor dem Hochladen und Bereitstellen für das Web optimieren, stellen Sie sicher, dass Sie kein für den Bildschirm und den Anwendungsfall zu großes Bild bereitstellen. 

Beliebte Tools für die Bildoptimierung:

Performance-Tests

Das Testen der Performance und die Optimierung dahingehend sollten Teil jeder Website-Erstellung sein. Es gibt eine Vielzahl von Tools zum Testen der Geschwindigkeit einer Website. Es ist wichtig, diese Tools und ihre Funktionsweise zu verstehen, damit Sie fundierte Entscheidungen über Performance-Verbesserungen treffen können.

Mit einigen Tool kann nur gemessen werden, andere bewerten auch. Es ist wichtig zu verstehen, wie das eigentlich funktioniert.

Tools, die messen, testen in der Regel die Ladezeit, die Skriptausführungszeit, die Zeit bis zum ersten inhaltsreichen Bild, die Netzwerkzeiten für das Herunterladen von Elementen usw. Diese Tools liefern in der Regel Ergebnisse, die bestimmte Zeiten für jede dieser Kennzahlen angeben. Wenn Sie den Test wiederholen, verschieben sich die Messwerte in der Regel geringfügig, da nicht jeder Seitenaufbau exakt gleich ist. 

Tools, die eine Bewertung vornehmen, messen nicht nur die Geschwindigkeit, sondern sagen Ihnen auch, ob Sie gut oder schlecht abschneiden, oft in Form von Prozent- oder Buchstabenwerten. Diese Bewertungen sollen Entwickler und Marketer dazu motivieren, sich zu verbessern. Es gibt so viele verschiedene Kennzahlen und Aspekte der Performance, die berücksichtigt werden müssen. Sie können Ihre Gesamt-Performance nicht nur auf eine einzige Kennzahl stützen, und darüber hinaus wirken sich einige Kennzahlen unterschiedlich stark auf die wahrgenommene Performance aus. Diese Tools gewichten die Kennzahlen also unterschiedlich, um die Gesamt-Performance zu berechnen. Es gibt keinen branchenweiten Standard für die Gewichtung der Kennzahlen. Im Laufe der Zeit kann sich diese Gewichtung ändern, wie es bei Google Page Speed der Fall war. Es gibt auch keinen branchenweit akzeptierten Mindest- oder Maximalwert für die einzelnen Kennzahlen. Einige Tools stützen sich dabei auf ein Perzentil der getesteten Websites. Das bedeutet, dass Ihre Ergebnisse mit denen anderer getesteter Websites verglichen werden. Dies führt dazu, dass der Geschwindigkeitsbereich „gut/ausgezeichnet“ mit der Zeit immer schwieriger zu erreichen ist. Einige Tools setzen dagegen auch Benutzererfahrung, Besucherbindung und ROI-basierte Recherche, um den richten Schwellenwert für eine gute Bewertung zu bestimmen. Berücksichtigen Sie auch, dass nicht alle Tools die spätere Lade-Performance der Seite berücksichtigen. Das HubSpot-Modulsystem beispielsweise trennt CSS und JS für einzelne Module und lädt diese Elemente nur, wenn das Modul tatsächlich auf der Seite platziert wird. Dies kann zu mehreren kleineren CSS-Dateien führen, die von Google Page Speed Insights geflaggt werden könnten. Die Realität ist jedoch, dass Sie beim nächsten Laden der Seite kein CSS oder JS für Module herunterladen müssen, die sich auf der nächsten Seite wiederholen – sie werden im Cache gespeichert. Stattdessen müssen Sie nur die Dateien für Module herunterladen, die Sie noch nicht gesehen haben, und das sind dann Kilobytes anstelle einer monolithischen Datei.

Bei bewertenden Tools sollten Sie mehrere Tools verwenden und bei jedem den bestmöglichen Score anstreben. Ihnen sollte jedoch bewusst sein, dass sie unterschiedliche Gewichtungen vornehmen. Bemühungen, die einen Score in einem Tool verbessern können, haben in einem anderen möglicherweise nicht den gleichen Effekt.

Beliebte Tools für Performance-Tests:

Verwandtes Thema:

 


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.