Tempo, tempo: Aktion für eine kürzere Ladezeit der Website

mit Keine Kommentare

Online-Marketing-Beitrag: Website Per­forman­ce-Opti­mierung

Informationen gemäss Stand vom 26.7.2021

Klar. Eine Website muss schnell sein, so schnell wie möglich. Niemand wartet gerne auf langsame Webseiten. Zu­dem ist die Per­forman­ce eines Webauftritts ein wichtiger Rankingfaktor bei Google. Mit ein paar Tipps kön­nen Sie die Website schnell auf Geschwindig­keit optimieren.

Konkret geht es darum, die Ladezeit und die wahrgenommene Ladezeit zu verkürzen.

Performance - Geschwindigkeit

Bild von intographics auf Pixabay

Inhaltsverzeichnis: Website Performance

Vorteile einer schnellen Website

Je weniger Elemente eine Website besitzt, desto schneller ist sie grund­sätzlich. Nun, was hat die Welt vom schlan­­ken Web­design und gesparter Band­breite?

  • Nutzerfreundlichkeit
    Klar, schnelle Websites, zufriedenere Besucher.
  • Google
    Die Performance der Website ist ein wichtiger Faktor für die Google Suchmaschine.
  • Langsame Datenverbindung
    Wer surft und keine schnelle Datenverbindung hat, ist froh über nicht zu schwere Webseiten.
  • Ökologischer Fussabdruck
    Je leichter eine Webseite ist, desto weniger Strom wird benötigt.
    Die Startseite von kundennutzen.ch verbrauchte am 19.2.2019 beispielsweise 0.61 Gramm CO2, gemessen mit websitecarbon.com.

Geschwindigkeitsmessung

Bevor Sie an die Optimierung der Webseiten gehen, müssen Sie zuerst einmal ermitteln, wo der Webauf­tritt zurzeit steht. Es ist auch darauf zu achten, dass diese Tests zu verschiedenen Tages­zeiten verschie­dene Werte ergeben kön­­nen. Nehmen Sie von diesen verschie­denen Werten einen Durch­schnitt.

  • PageSpeed Insights
    Dieser Onlineservice von Google testet sowohl die konventionellen Webseiten sowie die Mobilen. Zudem er­halten Sie viele Tipps zur Optimierung der Performance.
    Wenn Sie vor der URL den Begriff ORIGIN: eingeben, erhalten Sie nicht nur die Geschwindigkeit einer ein­zel­nen Webseite, sondern den Durchschnitt der gesamten Website. Das Tool informiert, wie lange der First Con­tent­ful Paint (FCP) dauert. Zudem erfahren Sie wie lange es zum Laden des DOM (DOM Content Loaded oder DCL) dauert. Behandelt wird auch das Thema Web Core Vitals.
    https://snip.ly/ohrrjt
    Insight
    Quelle: Google PageSpeed Insights
  • CA App Synthetic Monitor
    Dieses mehrsprachige Werkzeug ruft eine Website von diversen Punkten der Welt aus.
    asm.ca.com/de/checkit.php
  • Keycdn (E)
    Dieses sehr nützliche Online-Tool misst aus verschiedenen Regionen der Welt, wie lange es dauert, bis sich eine einzelne Webseite aufgebaut hat. Dabei wird jede einzelne geladene Ressource aufgelistet.
    tools.keycdn.com/speed
  • Tinyjpg (E)
    Dieses Programm analysiert eine Webseite und zeigt an, wie viele Ressourcen Sie verschwenden, durch den Ein­satz nicht komprimierter Grafiken.
    tinyjpg.com/analyzer
  • Pingdom (E)
    Mit diesem Werkzeug erkennen Sie rasch, welche Dateien beim Abrufen der Webseite invol­viert sind und wie­viele KBs sie bean­spruchen.
    tools.pingdom.com
  • WebPageTest (E)
    Dieser Test liefert sehr viele detaillierte Informationen.
    webpagetest.org
  • GTmetrix (E)
    Dieser Onlinedienst liefert jede Menge Informationen zur Optimierung einer Website. Die Informationen sind je­doch schwieri­ger zu inter­pretieren und für Einsteiger weniger geeignet.
    gtmetrix.com
  • Firefox und Chrome
    Mit dem Firefox Browser lassen sich ohne weitere Installation Prüfungen durchführen, verwenden Sie die Tas­ten­kombination [CTRL] + [UMSCHALT] + [E], Klick auf den Reiter NETZWERK und Taste [F5] drücken.
    Mit dem Chrome Browser geht es auch, mit [CTRL] + [UMSCHALT] + [I].

Der Hosting-Provider

Als Erstes brauchen Sie einen schnellen Hosting-Provider. Gerade bei Billig-Angeboten teilen sich zu viele Web­si­tes den gleichen Server. Mit den oben erwähnten Werkzeugen können Sie den Provider und Ihren Webauftritt gut tes­ten.

Auch wichtig: Der Serverstandort muss in der Nähe Ihrer Zielgruppe stehen.


Daten-Komprimierung

Zum Komprimieren der Dateien gibt es viele kostenlose Tools im Web. Zur Sicherheit sollten Sie alle Dateien im Ori­ginalzustand sichern, passiere, was wolle …

  • Das richtige Dateiformat
    Es fängt damit an, dass Sie das richtige Dateiformat wählen. So ist es nicht egal, ob eine Grafik im JPG, PNG, SVG, WEBP oder GIF-Format erstellt wurde.
  • Fotos, Grafiken 1
    Grafische Dateien können Sie mit Onlinediensten wie kraken.io/web-interface und punypng.com gut mini­mie­ren. Beim Komprimieren von Grafiken sind Einsparungen von 80% keine Seltenheit. Gerade das Kompri­mieren von gra­fi­schen Elementen ist für Anwender ohne tech­nische Kennt­nisse sehr einfach möglich.
  • Fotos, Grafiken 2
    Geben Sie immer die Breite und Höhe eines Bildes an, die Ladezeit verringert sich damit. Der Browser muss die Grösse nicht selbst berechnen und kann Inhalte schneller aufbauen. Wenn Sie mit einem CMS arbeiten, wird Ihnen diese Arbeit automatisch abgenommen.
  • Fotos, Grafiken, Videos 3
    Fügen Sie dem IMG TAG die Anweisung loading=“lazy“ hinzu. Dann werden die Bilder erst geladen, wenn sie benötigt werden (beim Scrollen nach unten, sofern es der Browser unterstützt).
    Beispiel: <img src="i/keyword.jpg" loading="lazy" alt="Keyword" title="Keyword" width="640" height="395">
  • Fotos, Grafiken 4
    Bilder laden Sie in der Grösse hoch, die absolut notwendig ist.
  • Schriften
    Verwenden Sie Systemschriften, die bereits lokal installiert sind und nicht übertragen werden müssen.
  • CSS-Dateien
    Die Cascading Style Sheets-Dateien können Sie mit csscompressor.com drastisch verkleinern. Komprimieren Sie die Dateien mit der höchsten Rate, ist der Code praktisch nicht mehr lesbar. Sie sollten deshalb eine Da­ten­siche­rung des unkompri­mierten Codes bereit­halten.
  • GZIP-Kompression
    Webserver bieten eine Seitenkompression an. HTML, Bildformate, CSS- und Javascript-Dateien lassen sich kom­primieren. Bei der Kompression wird aus einer Datei eine ZIP-Datei erstellt. Die ZIP-Datei wir an den Client über­tra­gen. Dieser entpackt die Datei bevor er sie anzeigt. Mit diesem Online-Tool überprüfen Sie, ob GZIP auf Ihrem Server aktiv ist.
  • Javascript
    Den Javascript-Code können Sie mit einem Tool wie javascriptcompressor.com kompri­mieren.
  • Critical Path CSS Generator
    Der kritische Pfad ist der Pfad zum Rendern einer Webseite, was notwendig ist, bevor das passieren kann. Bis der Browser Ihre Stylesheets anfordert, empfangen, heruntergeladen und analysiert hat, bleibt die Seite leer. Durch die Reduzierung der Menge an CSS, die der Browser durchlaufen muss, und durch das Einfügen auf der Seite können wir die Seite dazu bringen, viel schneller zu rendern.
    Eher für Profis
  • HTTP/2
    Sofern Ihr Hosting-Provider es bereits anbietet, nutzen Sie HTTP/2. Dafür muss Ihr Webauftritt mit dem HTTPS-Pro­tokoll arbeiten.
  • Wenige Dateien
    Binden Sie sowenige Dateien ein wie möglich.
  • WordPress
    Wer mit einem Content-Management-System wie zum Beispiel WordPress arbeitet, kann Kompri­mierungs­pro­zes­se einem Plugin über­lassen.Autoptimize ist ein kleines wirkungsvolles Plugin für die Komprimierung, Zu­sam­men­­fassung und Mini­mierung von CSS- und Javascript-Dateien. Zudem besitzt es eingebaute Funk­tionen für das sogenannte „CSS above the fold“. Die Anzahl der einge­bundenen Dateien werden sich damit extrem ver­ringern.BJ Lazy Load ladet Bilder erst, wenn man nach unten scrollt.Better WordPress Minify komprimiert CSS- und Ja­va­script Dateien. So redu­zieren Sie die Anzahl der HTTP-Re­quests.
  • Unnötige Plugins entfernen
    Jedes zusätzliche Plugin kann ein Sicherheits­problem sein und muss geladen werden. Lieber gelegentlich et­was manuell durch­führen, dafür Plugins einsparen.
  • Datenbank aufräumen
    Unnötiges löschen und die Datenbank reorganisieren.

Weitere Tipps

CSS3 anstatt Javascript

Verwenden Sie, sofern möglich, CSS3 anstatt Javascript. Gerade für Slider, Bildergalerien und Akkordions ist CSS3 die bessere Wahl.

Wenn es sein muss

Externe Zugriffe erhöhen die Lade­zeit. Wenn der Aufbau Ihrer Website die Hilfe von Servern im Inter­net benötigt, kos­tet das Zeit. So zum Beispiel für das Ausspielen von Werbung, die von einem Werbe­vermarkter generiert wer­den oder wenn ein Server eines Dienst­leisters Ihre Website­statistik speichert.

Content Delivery Network (CDN)

Ein CDN ist ein System von geografisch verteilten Servern rund um die Welt. Diese Server verwalten jeweils eine Ko­pie der Daten. Dabei geht es bei Content Delivery Networks um Geschwindigkeit und Hochverfügbarkeit, je­doch bringt ein CDN noch eine ganze Reihe von weiteren Vorteilen. Doch: Macht ein CDN die Website wirklich schneller?
Wahrheit über CDN: KeyCDN Praxistest.

 

P.S.

„Selbstverständlich gibt es noch viele weitere Methoden, wie Sie den Webauftritt beschleunigen. Diese eig­nen sich je­doch weniger für Einsteiger und sollten von einem erfahrenen Webmaster vorgenommen wer­den.“

Klicken, ähnliche Themen:

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing Manager. Er half frü­her Un­ter­neh­mern 100% mehr aus Ihrer Web­site he­r­au­­s­zu­­­ho­len. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert.