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

von ein 21. Juni 2021 mit Keine Kommentare

Online-Marketing: Website Performance-Optimierung

Sicherlich, eine Webseite muss flink sein – am besten blitzschnell. Kein Benutzer hat Geduld für trägen Seitenaufbau. Zudem spielt die Performance eines Internetauftritts eine entscheidende Rolle im Google-Ranking. Mit gezielten Optimierungsmassnahmen lässt sich die Geschwindigkeit Ihrer Webseite effizient steigern. Im Speziellen zielen diese Massnahmen darauf ab, sowohl die tatsächliche als auch die wahrgenommene Ladezeit zu minimieren.

Informationen gemäss Stand vom 17.7.2023

Performance - GeschwindigkeitBild: intographics auf Pixabay.com

Inhaltsverzeichnis: Website Performance

Vorteile einer schnellen Website

Je weniger Elemente eine Web­site be­sitzt, desto schneller ist sie grund­sätz­lich. Nun, was hat die Welt vom schlan­ken Web­de­sign und gesparter Band­brei­te?

  • Nutzerfreundlichkeit
    Klar, schnelle Websites, zufriedenere Besucher.
  • Google
    Die Performance der Website ist ein wichtiger Faktor für die Google Such­maschine.
  • Langsame Datenverbindung
    Wer surft und keine schnelle Daten­ver­bindung 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 bei­spiels­weise 0.61 Gramm CO2, gemessen mit websitecarbon.com.

Geschwindigkeitsmessung

Bevor Sie an die Optimierung der Web­seiten gehen, müssen Sie zuerst einmal er­mitteln, wo der Webauf­tritt zur­zeit steht. Es ist auch darauf zu ach­ten, dass diese Tests zu ver­schie­denen Tages­zeiten ver­schie­dene Werte er­geben 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 Per­formance.
    Wenn Sie vor der URL den Begriff ORIGIN: eingeben, erhalten Sie nicht nur die Geschwindigkeit einer ein­zel­nen Webseite, sondern den Durch­schnitt 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.
    developers.google.com/speed/pagespeed/insights/
    Insight
    Bild: Google PageSpeed Insights
  • 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 Res­source aufgelistet.
    tools.keycdn.com/speed
  • Tinyjpg (E)
    Dieses Programm analysiert eine Web­seite und zeigt an, wie viele Res­sour­cen Sie verschwenden, durch den Ein­satz nicht komprimierter Grafi­ken.
    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
  • DebugBear (E)
    Ein weiteres leistungsfähiges Werkzeug zum Messen der Geschwindigkeit einer Website mit allen Details.
    debugbear.com
  • 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-Pro­vi­der

Als Erstes brauchen Sie einen schnellen Hosting-Provider. Gerade bei Billig-Ange­boten teilen sich zu viele Web­si­tes den gleichen Server. Mit den oben erwähn­ten 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-Kom­pri­mie­rung

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 rich­tige 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 abge­nommen.
  • Fotos, Grafiken, Videos 3
    Fügen Sie dem IMG TAG die Anwei­sung loading=”lazy” hinzu. Dann werden die Bilder erst geladen, wenn sie be­nö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 Seiten­kompres­sion an. HTML, Bildformate, CSS- und Javascript-Dateien lassen sich kom­primieren. Bei der Kompres­sion 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 JavasSript-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 notwen­dig ist, bevor das passieren kann. Bis der Browser Ihre Stylesheets anfor­dert, empfangen, herunter­gela­den 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 brin­gen, 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 wirkungs­volles 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­bun­denen Dateien werden sich damit ex­trem ver­ringern.
  • 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 Akkor­dions ist CSS3 die bessere Wahl.

Drittanbieter: Wenn es sein muss

Externe Zugriffe erhöhen die Ladezeit. Wenn der Aufbau Ihrer Website die Hilfe von Servern im Inter­net benötigt, kos­tet das Zeit. So zum Beispiel für das Aus­spielen von Werbung, die von einem Wer­be­ver­markter generiert werden 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 Hoch­ver­füg­bar­keit, jedoch bringt ein CDN noch eine ganze Reihe von weiteren Vorteilen. Doch: Macht ein CDN die Web­site wirklich schneller?
Wahrheit über CDN: KeyCDN Praxistest.

 

P.S.:

„Selbstverständlich gibt es noch viele weitere Methoden, wie Sie den Webauftritt beschleunigen. Diese eignen sich jedoch weniger für Einsteiger und sollten von einem erfahrenen Webmaster vorgenommen werden.“

Bitte klicken, ähn­liche The­men:

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Seit 1995 hat Walter B. Walser Erfahrung mit dem Internet. Im Jahr 2001 gründete er das Magazin kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Tools konzentriert. Als Agenturleiter hat er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Darüber hinaus beriet Walser kleine Unternehmen bei ihrem Internetauftritt und spezialisierte sich auf die Pflege und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.