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

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

Bild: intographics auf Pixabay.com

Inhaltsverzeichnis: Website Performance

• Vorteile einer schnellen Website
• Geschwindigkeitsmessung
• Der Hosting-Provider
• Daten-Komprimierung
• Weitere lose Tipps
• P.S.

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 CO₂, 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/
  
  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:

• PageSpeed: So machst du deine Web­site schneller
• 26 Tipps um Web­seiten schneller zu machen
• Übersicht weiterer Perfor­man­ce-Werk­zeuge

Autor: Walter B. Walser, kundennutzen.ch