Geschwindigkeit und Leistung der Website: Was du tun kannst und wie HubSpot hilft

Highlighted
HubSpot-Moderator/-in

Das HubSpot CMS ist eines der fortschrittlichsten und optimiertesten Content-Management-Systeme auf dem Markt. Wir arbeiten ständig daran, deine von HubSpot gehostete Website weiter zu optimieren und bieten Lösungen an, die du implementieren kannst, um die Geschwindigkeit und Leistung deiner Website zu verbessern.

 

Dinge, die HubSpot hinter den Kulissen tut, um deine Website zu optimieren:

 

Secure Socket Layer (SSL)
Im Oktober 2017 brachte Google ein Chrome-Update auf den Markt, mit dem Seiten, die ein Formular enthalten, aber nicht SSL-fähig sind, als "nicht sicher" gekennzeichnet wurden. Da Chrome etwa 47% des Browser-Marktanteils hält, wirkt sich dieses Update auf Millionen von Besuchern und Vermarktern im gesamten Web aus.

 

Standard-SSL ist für alle Benutzer des Marketing Hub Basic, Professional und Enterprise enthalten. Diese Funktion stellt sicher, dass deinTraffic und deine Leads von diesem Google Chrome-Update nicht beeinträchtigt werden und die Informationen deiner Besucher sicher bleiben.

 

HTTP/2
HTTP/2 ist ein Ersatz dafür, wie HTTP "on the wire" ausgedrückt wird. Es handelt sich nicht um eine grundlegende Neufassung des Protokolls; HTTP-Methoden, Statuscodes und Semantik sind die gleichen, und es sollte möglich sein, die gleichen APIs wie HTTP/1.x (möglicherweise mit einigen kleinen Ergänzungen) zur Darstellung des Protokolls zu verwenden.

Der Schwerpunkt des Protokolls liegt auf der Leistung, insbesondere auf der vom Endbenutzer wahrgenommenen Latenz, der Netzwerk- und Server-Ressourcennutzung. Ein Hauptziel ist es, die Nutzung einer einzigen Verbindung von Browsern zu einer Website zu ermöglichen.

Der gesamte SSL-Verkehr auf den von HubSpot gehosteten Websites wird über HTTP/2 abgewickelt. Hier erfährst du, wie du das sichere Protokoll aktvierst. 

 

IPv6
IPv6 ist die jüngste Version des Internet-Protokolls und erweitert die Anzahl der verfügbaren Adressen auf eine praktisch unbegrenzte Anzahl - 340 Billionen Billionen Billionen Adressen. Dem Internet gehen die IPv4-Adressen aus.

Der Übergang zu IPv6 ermöglicht es dem Internet weiter zu wachsen und ermöglicht außerdem die Entwicklung neuer, innovativer Dienste, da mehr Geräte an das Internet angeschlossen werden können.

Alle von HubSpot gehosteten Websites enthalten IPv6-Adressen, so dass auf sie nativ über IPv6 aufgerufen werden können. 

 

JavaScript-Minimierung
Während Leerzeichen, Zeilenumbrüche und Kommentare die Bearbeitung und das Lesen von kodierten Dateien drastisch erleichtern, nehmen sie den Browsern zusätzliche Zeit zum analysieren.

Kleinere JavaScript-Dateien führen zu einer flüssigeren und schnelleren Benutzererfahrung für deine Website-Besucher. jQuery, die beliebte Javascript-Bibliothek, veranschaulicht sehr schön, wie wirkungsvoll die Minimierung ist: die minimierte jQuery ist 86k groß im Vergleich zur unminimierten Version mit 271k.

HubSpot entfernt automatisch alle unnötigen Leerzeichen, Zeilenumbrüche und Kommentare aus den JavaScript-Dateien deines Designmanagers, um sicherzustellen, dass diese so schnell wie möglich geparst und bereitgestellt werden. Beachte jedoch, dass JavaScript-Dateien, die in den Dateimanager hochgeladen werden, nicht automatisch verkleinert werden. Daher solltest du diese vor dem Hochladen verkleinertn, wenn du planst, sie in deine Website aufzunehmen.

 

HINWEIS: Jedes Mal, wenn du deine JavaScript-Dateien aktualisierst, werden sie automatisch im Hintergrund verkleinert, so dass es eine kurze Zeit dauert, bis du siehst, dass die .min.js Version deiner Javascript-Dateien auf Live-Seiten bereitgestellt wird. Syntaxfehler können verhindern, dass wir deine JavaScript-Dateien minimieren können.

 

Screen Shot 2018-08-10 at 4.37.28 PM.png

 

Kombinieren von CSS
HubSpot verkleinert (entfernt unnötige Leerzeichen und Zeilenumbrüche) und fasst alle auf einer Seite enthaltenen CSS-Dateien automatisch in einer CSS-Datei zusammen. Dies führt zu minimalen HTTP-Anforderungen und der schnellsten Bereitstellung und Analyse von CSS auf deiner Website.

Schließlich wird die kombinierte CSS-Datei per HTTP/2-Push gesendet, was bedeutet, dass die Browser mit dem Herunterladen aller benötigten CSS beginnen können, noch bevor das HTML der Seite fertig geladen ist.

 

HINWEIS: Jedes Mal, wenn du deine CSS-Dateien aktualisierst, müssen wir die CSS-Dateien auf einer Seite neu verkleinern und kombinieren, so dass es eine kurze Zeit dauert, bis du siehst, dass die kombinierte CSS-Version deiner CSS-Dateien auf Live-Seiten bereitgestellt wird. Auch hier können Syntaxfehler uns daran hindern, deine CSS-Dateien zu minimieren und zu kombinieren. Bei Aktualisierungen externer CSS-Dateien werden die CSS-Dateien nicht aktualisiert.

Zudem werden bei Seiten mit Inline-CSS die CSS-Dateien derzeit nicht kombiniert.

 

Browser- und Server-Caching
Jedes Mal, wenn ein Besucher eine Seite auffruft, stellt sein Browser eine komplexe Folge von Anfragen. Diese Anfragen treffen auf verschiedene Server, die komplexe Berechnungen und Routen durchführen, um den Besuchern deine Dateien zur Verfügung zu stellen.

 

HubSpot speichert Seiten und Dateien sowohl auf Server- als auch auf Browserebene automatisch im Cache, um die schnellstmögliche Lieferung aller Seiteninhalte an die Besucher deiner Website zu gewährleisten.

Wenn sich deine Seite oder irgendeine Abhängigkeit deiner Seite (wie z.B. eine Vorlage oder ein Modul) ändert, löschen wir automatisch die Server-Caches für diese Seite.

Das Server-Caching ist besonders effektiv für mobile Website-Besucher sowie für Besucher außerhalb der USA, wo die Netzwerk-Latenzzeit höher ist.

 

Domain-Neuschreibung
Jede zusätzliche Domain, die auf deiner Website verwendet wird, zieht eine zusätzliche DNS-Abfrage und -Verbindung nach sich. Je weniger Domains du verwendest, desto schneller wird deine Website geladen.

HTTP/2 unterstützt das gleichzeitige Laden mehrerer Dateien über dieselbe Verbindung, so dass die alten Richtlinien für das "verschieben (sharding)" deiner Ressourcen auf mehrere Domains nicht mehr gelten.

 

Die URLs von Assets, auf die in CMS-Seiten wie Dateien, CSS und Bildern verwiesen wird, werden automatisch umgeschrieben, so dass sie, wenn möglich, der Domain der aktuellen Seite entsprechen.

 

Wenn du also ein Bild auf http://cdn2.hubspot.net/hubfs/53/HubSpot_Logos/HSLogo_gray.svg auf einer Seite verweist, die auf https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_gray.svg angeboten wird, wird die URL automatisch auf www.hubspot.com aktualisiert.

 

Text-Komprimierung
Textbasierte Dateien wie HTML, CSS und JS werden alle mit gzip komprimiert, bevor sie den Browsern zur Verfügung gestellt werden. Die Komprimierung kann die Dateigrößen um bis zu 10x reduzieren. Während die Reduzuierung die Parse-Zeit von CSS- und JS-Dateien im Browser beschleunigt, bringt die Komprimierung diese Dateien schneller zum Browser.

 

Bildkomprimierung/Optimierung und automatische Bildgrößenanpassung
Wenn du ein Bild in den Dateimanager hochlädst, werden die Bilder automatisch optimiert. Genauer gesagt werden JPEGs und PNGs von ihren Metadaten (EXIF und andere Dinge, die Bilder größer machen) befreit. Alle Bilder werden auch neu komprimiert, um visuell einwandfreier dargestellt werden zu können. Zusätzlich können wir Bilder in einer anderen Kodierung anbieten, wenn diese als kleineres PNG im Vergleich zu JPEG dargestellt werden können.

 

Bilder werden unabhängig von ihrer ursprünglichen Auflösung mit 72 dpi erneut gespeichert. Wenn du eine Datei mit 300 dpi hochlädst, die ursprünglich für den Druck erstellt wurde, wird sie mit 72 dpi gespeichert, was dem Standard für das Web entspricht.

 

Wenn das CMS eine Seite rendert, passt HubSpot die Größe der Bilder automatisch an und sucht nach Bildern, die die Attribute "width" oder "height" haben. Wenn diese Bilder auf dem Dateimanager gehostet werden, hängen wir Pfadsegmente für Breite und/oder Höhe an die URL des Bildes an. Wenn die URL einen height- oder width-Parameter hat, fängt das CMS diese Anfrage ab und versucht, die Größe auf die angeforderte(n) Dimension(en) anzupassen.

Browsern stehen mehrere Optionen für die zu ladende Bildauflösung zur Verfügung, so dass deine Bilder auf Standard- und hochauflösenden Bildschirmen gestochen scharf aussehen.

 

Die Bildoptimierung/-komprimierung und die automatische Bildgrößenanpassung sind standardmäßig für alle von HubSpot gehosteten Seiten/Dateien aktiviert.

Screen Shot 2018-08-10 at 4.19.29 PM.png

 

Beschleunigte mobile Seiten (AMP)
AMP, oder Accelerated Mobile Pages, ist ein mobilfunkspezifisches Seitenformat, das Inhalte fast augenblicklich lädt. AMP kann auf deinen von HubSpot gehosteten Blog-Posts mit einem Klick aktiviert werden. Weitere Einzelheiten und die entsprechende Anleitung findest du hier unter Verwendung von Accelerated Mobile Pages (AMP) in HubSpot.

 

Was du tun kannst, um deine Website zu optimieren

jQuery in der Fußzeile laden
jQuery ist eine beliebte JavaScript-Bibliothek, die standardmäßig auf allen von HubSpot gehosteten Websites enthalten ist. Wir haben jetzt die Möglichkeit, jQuery in die Fußzeile (im Gegensatz zur Kopf-html) deiner von HubSpot gehosteten Websites aufzunehmen. Durch das Laden von jQuery in der Fußzeile kann deine Seite gerendert werden, ohne dass das Parsen und Laden von jQuery unterbrochen werden muss, bis sie benötigt wird, wodurch sichergestellt wird, dass visueller Code wie HTML und CSS zuerst gerendert wird.

 

Dies erfordert, dass alle deine jQuery-Abhängigkeiten auch in der Fußzeile deiner Seiten geladen werden. Um das Laden deiner Seiten mit in der Fußzeile geladenem jQuery zu testen, kannst du den Query-String ?hsMoveJQueryToFooter=True zu deinen Live-Seiten hinzufügen, um sicherzustellen, dass das JavaScript deiner Seiten korrekt funktioniert, bevor du die Änderung auf deinen Live-Seiten vornimmst.

pasted image 0.png

 

Nur relevante CSS- und JavaScript-Dateien anhängen
Gib dein Bestes um nur JavaScript- und CSS-Dateien nur an Seiten/Templates anzuhängen und zu verwenden, die diese auch tatsächlich verwenden. Google verfügt über ein raffiniertes Coverage-Tool, mit dem analysiert wird, wie viel angefordertes CSS und JavaScript tatsächlich auf einer bestimmten Seite verwendet wird, was darauf hindeuten könnte, dass diese Kennzahl eines Tages ein Bewertungs-/Ranking-Indikator sein könnte.

Je weniger JavaScript und CSS auf einer Seite vorhanden sind, desto schneller wird die Seite geladen und desto besser ist das Besuchererlebnis.

 

Das Anhängen abhängiger JavaScript- oder CSS-Dateien an benutzerdefinierte Module trägt dazu bei, die Menge an unbenutztem Code zu reduzieren, die eine Seite lädt. Auf diese Weise wird sichergestellt, dass der abhängige Code nur auf Seiten vorhanden ist, auf denen das benutzerdefinierte Modul vorhanden ist. Wenn ein benutzerdefiniertes Modul mehrfach auf einer einzigen Seite eingebunden wird, wird HubSpot das abhängige CSS und JavaScript nur einmal einbinden.

 

Minimierung von HTTP-Anfragen und herkunftsübergreifenden HTTP-Anfragen
Vermeide, zu viele HTTP-Anfragen für Ressourcen auf deinen Seiten zu stellen. Gib dein Bestes, um so wenige Dateien wie möglich in deine Webseiten einzubinden (wir kombinieren CSS-Dateien automatisch in einer einzigen, kombinierten CSS-Datei).

 

Darüber hinaus verlangsamen HTTP-Anforderungen aus verschiedenen Quellen die Seiten und sind auf externe Dienste angewiesen, die effizient und zuverlässig arbeiten. Hoste innerhalb von HubSpot alles, was dir möglich ist, um zu vermeiden, dass externe und herkunftsübergreifende Ressourcen auf deinen Seiten abgerufen werden.

 

1 Antwort
Highlighted
HubSpot-Mitarbeiter/-in

Danke für diesen Post, Franzi! 

 

@Becks ihr seid ja absolute Pros was das HubSpot CMS angeht - hast du zusätzlich zu den obigen Tipps noch andere best practices zu teilen, um die Geschwindigkeit der Website zu verbessern?

0 Likes