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

von ein 21. Juni 2021 mit Keine Kommentare

Online-Marke­ting: Website Per­forman­ce-Opti­mierung

Klar. Eine Website muss schnell sein, so schnell wie möglich. Niemand wartet ger­ne auf langsame Webseiten. Zu­dem ist die Per­forman­ce eines Webauftritts ein wichtiger Ran­king­fak­tor bei Google. Mit ein paar Tipps kön­nen Sie die Web­site schnell auf Gesch­windig­keit opti­mie­ren.

Konkret geht es darum, die Lade­zeit und die wahrge­nom­mene Ladezeit zu ver­kür­zen.

Informationen gemäss Stand vom 28.3.2023

Performance - GeschwindigkeitBild: intographics auf Pixabay.com

Inhaltsver­zeich­nis: Web­si­te Per­for­man­ce

Vorteile einer schnellen Web­site

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.

Geschwindigkeits­messung

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
    Quelle: 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 Java­Script

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 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 Aus­spielen von Werbung, die von einem Wer­be­ver­markter 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 Ge­schwin­dig­keit und Hoch­ver­füg­bar­keit, je­doch 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 wei­tere Methoden, wie Sie den Webauf­tritt be­schleunigen. Diese eig­nen sich je­doch weniger für Ein­steiger und sollten von einem er­fah­renen Webmaster vorge­nom­men wer­den.“

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 im Umgang mit dem Internet. Er gründete 2001 ein Magazin, kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Werkzeuge konzentrierte. Als Agenturleiter hatte er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Ausserdem hatte Walser kleine Unternehmen in Bezug auf ihre Internetpräsenz beraten und war spezialisiert auf die Wartung und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.