Hacks für schnellere Websites mit optimierten Assets | Tipps & Techniken

In diesem Artikel klären wir, wie Sie mit optimierten Assets deine Webseite schneller machen können.

Asset-Optimierung für eine schnellere Website

Die Optimierung von Assets spielt eine wichtige Rolle für eine schnellere Website. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Bilder, Hintergrundbilder und andere Assets optimieren können, um die Ladezeit Ihrer Website zu verbessern.

Optimierung von Bildern

Das Erste, was Sie tun können, um Ihre Bilder zu optimieren, ist sicherzustellen, dass sie die gleiche Größe haben wie die Größe, in der sie auf der Website angezeigt werden. Ein großes Bild von 1000 Pixeln Breite, das in CSS nicht auf eine Breite von 300 Pixeln reduziert wird, nimmt viel Platz ein. Eine verlustfreie Komprimierung Ihrer Bilder kann bis zu 80% der Dateigröße einsparen und Ihre Website schneller machen.

Hintergrundbilder

Wenn es um Hintergrundbilder geht, sollten Sie darauf achten, dass Sie die richtige Größe für die Bildschirmgröße wählen. Es ist sinnvoll, ein 2300 Pixel breites Archivfoto nicht auf einen 400 Pixel breiten Handybildschirm zu laden. Verkleinern Sie das Bild auf 500 Pixel Breite und komprimieren Sie es. Sie gehen von 2,3 MB auf etwa 37k oder weniger. Eine enorme Reduzierung der Größe und der Ladezeiten.

Die richtige Bildgröße für die richtige Bildschirmgröße wählen

Das Attribut "srcset" hilft Ihnen, die richtige Bildgröße für die richtige Bildschirmgröße auszuwählen. Wenn Sie ein Bild mit einer Breite von 700 Pixeln in Ihrer HTML-Datei auf dem Desktop haben, können Sie eine Version mit einer Breite von 350 Pixeln für Bildschirme mit einer Größe von weniger als 480 Pixeln laden. Dies führt zu einer kleineren Datei und einer verbesserten Ladezeit.

Lazy Load

Das "Lazy Loading" ist eine weitere Möglichkeit, um die Ladezeit Ihrer Website zu verbessern. Verwenden Sie das Attribut loading="lazy", um das in den Browsern eingebaute "Lazy Loading" zu nutzen. Laden Sie aber keine Bilder, die sich beim Laden der Website "above the fold", also Bereich dessen befindet, was ohne sceollen, als erstes angezeigt wird. Wenn das Bild im Bereich der Landing Page und im Viewport geladen wird, sollten Sie es nicht mit "Lazy Load" laden. Dies führt zu einer Verschiebung des Inhaltslayouts. Alle Bilder, die sich beim ersten Laden Ihrer Website auf dem Bildschirm befinden, sollten also nicht "lazy loaded" sein.

Entfernen Sie jQuery, Google Fonts und alle anderen unwichtigen CDN-Links

Wenn Sie jQuery, Google Fonts und andere unwichtige CDN-Links von Ihrer Website entfernen, wird sie sicherer und schneller. Class Toggling und all das kann jetzt in Javascript gehandhabt werden und es gibt wirklich keinen Grund, JQuery mehr zu verwenden. Es ist aufgebläht und seine Entfernung kann Ihre Website sicherer machen und viel schneller laden. Googles Page Speed Score wird es als etwas kennzeichnen, das Sie entfernen müssen, um Ihren Score zu verbessern, also sollten wir uns alle daran gewöhnen, ohne es zu arbeiten, wenn es nicht absolut notwendig ist. Sie können Ihre Schriftarten von dort herunterladen, wenn es sich nicht um eine Standardschriftart in Browsern handelt. Speichern Sie alle heruntergeladenen Dateien in einem Schriftartenordner

Verwendung von Content Delivery Networks (CDNs)

Ein weiterer wichtiger Faktor für die Optimierung Ihrer Assets ist die Verwendung von Content Delivery Networks oder CDNs. Diese Netzwerke bestehen aus Servern, die sich weltweit verteilen und eine Kopie Ihrer Website-Dateien bereithalten. Wenn ein Besucher Ihre Website besucht, lädt er die Dateien von dem Server, der am nächsten zu seinem Standort liegt. Dadurch wird die Ladezeit der Website erheblich reduziert, da die Daten nicht über lange Strecken übertragen werden müssen.

Die meisten großen Websites verwenden CDNs für ihre Assets, da sie eine schnelle und effektive Möglichkeit bieten, Inhalte weltweit bereitzustellen. Es gibt viele verschiedene CDNs zur Auswahl, aber einige der bekanntesten und am häufigsten verwendeten sind Amazon CloudFront, Akamai und Cloudflare.

Zusammenfassung

Die Optimierung Ihrer Assets ist ein wichtiger Schritt zur Verbesserung der Ladezeiten Ihrer Website. Durch das Verkleinern und Komprimieren von Bildern und die Verwendung von Lazy Loading können Sie die Ladezeiten erheblich reduzieren und ein besseres Nutzererlebnis bieten. Darüber hinaus ist die Verwendung von Content Delivery Networks ein weiterer wichtiger Faktor für die Optimierung Ihrer Assets und die Verbesserung der Ladezeiten.

Mit diesen Tipps können Sie Ihre Website schneller machen und das Nutzererlebnis verbessern.

Testen Sie doch ganz einfach die Geschwindigkeit ihrer Seite selbst unter https://pagespeed.web.dev/

Alles unter 50 ist viel zu niedrig. Ein Score zwischen 50 und 70 ist stark ausbaufähig und 70–90 sind grundsätzlich in Ordnung. Mit einem Score von 90+ hat ihr Entwickler einen tatsächlich guten Job geleistet.

Hier ein Beispiel mit der kcmediahouse.de Homepage

Wir hoffen dieser Artikel hilft Ihnen, Ihre Webseite schneller zu machen.