Diese Website, gemessen

Hier steht, was diese Website wiegt, wie schnell sie erscheint, wie Suchmaschinen sie lesen und wer sie bedienen kann. Jede Zahl zu dieser Website stammt aus unserer eigenen Messung; das «i» daneben zeigt, wann und wie wir gemessen haben.

  • 138 KB
    Startseite, übertragen
  • 1.15 s
    Largest Contentful Paint
  • 100
    SEO in Lighthouse
  • 100
    Barrierefreiheit in Lighthouse

Leicht

Seitengewicht behandeln wir als Gestaltungsentscheid: Was der Inhalt nicht braucht, bleibt weg.

Seitengewicht

Die Startseite überträgt 138 KB, weniger als ein Zehntel der mittleren mobilen Startseite mit 2.56 MB (HTTP Archive, Web Almanac 2025).

  • Median-Seite2.56 MB
  • Tüpfli138 KB
Abb.: Übertragene Daten einer Startseite, mobil

Bilder

Die 15 Bilder dieser Website wiegen als Originale 4.2 MB. Ein grosser Bildschirm erhält 335 KB, als AVIF in der Breite, die das Layout braucht. In unserem Test mit 24 Fotos bei gleicher Qualität waren AVIF-Dateien rund ein Viertel kleiner als ein gut optimiertes JPEG.

  • Originale4.18 MB
  • Ausgeliefert335 KB
Abb.: Alle Bilder dieser Website

Kompression

Die Textdateien dieser Website ergeben zusammen 3.76 MB. Der Server schickt sie mit Brotli, das bringt sie auf 635 KB. Ältere Clients erhalten gzip, 745 KB.

  • Ungepackt3.76 MB
  • gzip745 KB
  • Brotli635 KB
Abb.: Textdateien dieser Website

Schriften

Aus drei TTF-Dateien mit 237 KB wurde eine variable WOFF2-Datei mit 45 KB. Die mittlere mobile Startseite lädt 122 KB an Schriften (HTTP Archive, Web Almanac 2025).

  • 3 × TTF237 KB
  • WOFF245 KB
Abb.: Schriftdaten dieser Website

Schnell

Wo der Inhalt es zulässt, bauen wir Seiten im Voraus; der Server schickt dann eine fertige Datei, statt eine Datenbank abzufragen.

Zeit bis zum Hauptinhalt

Auf einem simulierten Handy mit langsamer Verbindung zeigt die Startseite ihren Hauptinhalt nach 1.15 s. Google wertet einen LCPLargest Contentful Paint: die Zeit, bis das grösste Bild oder der grösste Textblock im ersten Bildschirm dargestellt ist. Google bewertet 2.5 Sekunden oder weniger als gut.Im Glossar bis 2.5 Sekunden als gut.

  • Diese Website1.15 s
  • Grenze für «gut» (Google)2.5 s
Abb.: Zeit bis zum Hauptinhalt, Achse in Sekunden

Vor dem Besuch gebaut

Alle 46 Seiten dieser Statische WebsiteEine Website, deren Seiten als fertige HTML-Dateien entstehen, bevor jemand sie besucht. Der Server liefert nur Dateien aus und rechnet bei keinem Aufruf.Im Glossar liegen als fertige HTML-Dateien bereit, gebaut in 2.5 s. Bei einem Aufruf schickt der Server nur eine Datei.

  • Statische Website. Für Inhalte, die sich bis zu ein paar Mal pro Woche ändern. Jede Seite ist fertig, bevor der erste Aufruf kommt.
    • Build (bei uns lokal): Die meiste Arbeit
    • Deploy (auf dem Server): Wenig Arbeit
    • Besuch (jeder Besuch): Keine Arbeit
    • Bei Bedarf (ein Extra): Keine Arbeit
  • Mit CMS. Für Teams, die Texte und Bilder selbst pflegen. Jede Änderung baut und veröffentlicht die betroffenen Seiten.
    • Build (bei uns lokal): Etwas Arbeit
    • Deploy (auf dem Server): Etwas Arbeit
    • Besuch (jeder Besuch): Keine Arbeit
    • Bei Bedarf (ein Extra): Keine Arbeit
  • Mit Backend. Für Websites, die rechnen, etwa bei Buchungen, Logins oder Preisen. Ein Teil der Arbeit passiert, während jemand auf die Seite wartet.
    • Build (bei uns lokal): Wenig Arbeit
    • Deploy (auf dem Server): Wenig Arbeit
    • Besuch (jeder Besuch): Die meiste Arbeit
    • Bei Bedarf (ein Extra): Wenig Arbeit
  • Links vom Strich liegt die Arbeit vor dem Besuch, rechts die Arbeit, auf die man beim Besuch wartet.
Abb.: Wann eine Seite zusammengesetzt wird, je nach Art der Website

Laden bei Bedarf

6 von 6 Bildern der Startseite laden erst, wenn jemand zu ihnen scrollt (Lazy LoadingEin Bild, Video oder eingebettetes Element erst laden, wenn jemand in seine Nähe scrollt. Browser können das selbst, mit dem Attribut `loading="lazy"`.Im Glossar). Keines steht im ersten Bildschirm.

Schema: Beim Herunterscrollen wird jedes Bild knapp vor dem Bildschirm geladen. Weiter unten liegende Bilder bleiben leer und laden nichts. Auf der Startseite dieser Website funktionieren 6 von 6 Bildern so.

Abb.: Bilder laden, wenn sie näher kommen

Zwischenspeichern

Skripte, Schrift und Bilder tragen einen Fingerabdruck im Dateinamen; der Browser behält sie ein Jahr lang. HTML prüft er bei jedem Besuch, eine neue Fassung ist also gleich sichtbar.

Beim ersten Besuch lädt der Browser HTML, CSS, JavaScript, die Schrift und die Bilder vom Server. Beim zweiten prüft er nur, ob sich das HTML geändert hat. CSS, JavaScript, Schrift und Bilder kommen aus dem Browser-Cache, der sie ein Jahr lang behält.

Abb.: Erster und zweiter Besuch; Grau kommt vom Server

Sichtbar

Wir achten darauf, was Suchmaschinen und KI-Assistenten lesen: Titel, Beschreibungen und strukturierte Daten.

Suchgrundlagen

Ein Wert von 100 heisst, dass keine Such-Prüfung von Lighthouse scheitert. Das Ranking hängt von Inhalt, Konkurrenz und Links ab. Das misst kein Prüfwerkzeug.

In jedem Build geprüft

Nach jedem Build prüft ein Skript alle 46 Seiten auf Titel, Beschreibung, kanonische Adresse, strukturierte Daten und genau einen <h1>. Scheitert eine Seite, wird nichts veröffentlicht.

  • <title>Tüpfli, Webagentur für schnelle Websites und Web-Apps</title>

    53 Zeichen, erlaubt 10 bis 65

  • <meta name="description" content="Tüpfli gestaltet, baut und betreut Websites und Web-Apps. Diese Website zeigt, was wir messen: Gewicht, Tempo, Suchgrundlagen und Barrierefreiheit.">

    147 Zeichen, erlaubt 50 bis 160

  • <link rel="canonical" href="https://beta.tuepfli.ch/de">

    kanonische Adresse gesetzt

  • <h1>Websites und Web-Apps, auf Tempo gebaut.</h1>

    genau ein h1

Abb.: Die Startseite, wie die Build-Prüfung sie liest.

Im Suchergebnis

Titel, Adresse und Beschreibung genau so, wie die Startseite sie den Suchmaschinen angibt.

Tüpflihttps://tuepfli.ch › de

Tüpfli, Webagentur für schnelle Websites und Web-Apps

Tüpfli gestaltet, baut und betreut Websites und Web-Apps. Diese Website zeigt, was wir messen: Gewicht, Tempo, Suchgrundlagen und Barrierefreiheit.

Abb.: Die Startseite als Suchergebnis.

Zwei Sprachen

Jede Seite gibt es auf Englisch und Deutsch unter eigener Adresse, verbunden durch hreflang. Die Sitemap führt alle 44 Adressen auf, und die Website leitet nie nach Browsersprache um.

en

/services

We build your online presence and look after it once it is live.

de

/de/leistungen

Wir bauen deinen Online-Auftritt und betreuen ihn, wenn er live ist.

Abb.: Eine Seite, zwei Adressen, verbunden durch hreflang.

KI-Assistenten

Die robots.txt lässt 12 Crawler namentlich zu, darunter Googlebot, Bingbot und die Such-Crawler von OpenAI, Anthropic und Perplexity.

12 Crawler erlaubtAllow: /

  • Google
    • GooglebotAllow: /
  • Microsoft Bing
    • BingbotAllow: /
  • OpenAI
    • OAI-SearchBotAllow: /
    • ChatGPT-UserAllow: /
    • GPTBotAllow: /
  • Anthropic
    • Claude-SearchBotAllow: /
    • Claude-UserAllow: /
    • ClaudeBotAllow: /
  • Perplexity
    • PerplexityBotAllow: /
    • Perplexity-UserAllow: /
  • Apple
    • ApplebotAllow: /
  • DuckDuckGo
    • DuckDuckBotAllow: /
Abb.: Die robots.txt: Jeder genannte Crawler erhält Allow: /.

Zugänglich

Wir achten auf Kontrast und Tastaturbedienung und messen beides nach WCAG 2.2.

Automatische Prüfung

Lighthouse bewertet die Startseite mit 100 von 100. Solche Tests finden nur einen Teil der Hürden; zwei weitere Prüfungen decken alle 48 Seiten ab.

100von 100

Abb.: Barrierefreiheit in Lighthouse

Kontrast

Am 10. Nov. 2026 haben wir 6'098 Texte auf allen 48 Seiten gemessen. Jede Messung erfüllt das Minimum von WCAG 2.2; der tiefste Wert liegt bei 5.37 zu 1, verlangt sind 4.5 zu 1.

5.37 : 1

Beispieltext in #2B3FF5 auf #E4E6EA: ein Kontrast von 5.37 zu 1. WCAG verlangt 4.5 zu 1 für Text, 3 zu 1 für grossen Text und 7 zu 1 für die strengere Stufe AAA.

Abb.: Tiefster Kontrast, verlangt 4.5 zu 1

Tastatur

Ein Skript ist in beiden Breiten durch jede Seite getabbt: 96 Durchgänge mit 2'762 Stopps. Jedes Bedienelement war erreichbar, zeigte einen sichtbaren Fokusrahmen und gab den Fokus wieder frei.

Skizze einer Seite. Ein Fokusrahmen springt mit der Tab-Taste vom Logo durch das Menü und den Link zum Knopf.

2'762

Abb.: Tab-Stopps

Bewegung und Struktur

Ist ein Gerät auf reduzierte Bewegung gestellt, bleibt das Logo stehen, und nichts gleitet oder blendet ein. Jede Seite hat genau einen h1, ein ScreenreaderSoftware, die den Inhalt des Bildschirms vorliest oder auf einer Braillezeile ausgibt. Sie ist auf Überschriften, Beschriftungen und Textalternativen im Code angewiesen.Im Glossar kann so ihre Gliederung ansagen.

Zwei Quadrate. Bei normalen Einstellungen gleitet das erste von der Seite herein. Bei reduzierter Bewegung blendet das zweite ein und bewegt sich nicht.

Abb.: Dasselbe Element, mit und ohne reduzierte Bewegung

Gebaut mit

Die Werkzeuge hinter dieser Website und ihrer Logo-Animation.

Logo-Animation

Beim Scrollen faltet sich die Wortmarke zu ihrem Punkt zusammen, ganz oben entfaltet sie sich wieder. Sie läuft mit GSAP, das 37 KB JavaScript kostet.

Bewegung
Abb.: Die Logo-Animation, wie auf dieser Website

Messmethoden

Jede Zahl dieser Seite: was gemessen wurde, wann und mit welchem Werkzeug.

  • Seitengewicht

    9. Nov. 2026, Lighthouse 13.6.0

  • Lighthouse-Werte

    9. Nov. 2026, Lighthouse 13.6.0

  • Vergleichswerte

    9. Nov. 2026, HTTP Archive, Web Almanac 2025, chapter Page Weight

  • Bildformate

    10. Nov. 2026, sharp, mozjpeg, libwebp, libheif, cjxl, SSIMULACRA2

  • Bilder dieser Website

    10. Nov. 2026, eigenes Skript, sharp

  • Kompression

    10. Nov. 2026, gzip -9, brotli -q 11

  • Schriftdateien

    9. Nov. 2026, fontTools 4.60.2

  • Kontrast

    10. Nov. 2026, Playwright, Chromium 158.0.8127.18

  • Tastatur

    10. Nov. 2026, Playwright, Chromium 158.0.8127.18

  • Build

    10. Nov. 2026, bun 1.4.4, node:zlib gzip level 6, tools/measure/measure-build.ts

Diese Messungen für deine Website.

Dasselbe können wir an deiner heutigen Website messen. Schick uns die Adresse, dann siehst du, wo sie steht.

Projekt starten