Technik

Captcha und Ladezeit: Wie ein kleines Widget Ihre Seite schnell hält

Aktualisiert am · 5 Min. Lesezeit

Ladezeit ist Umsatz: Schnelle Seiten halten Besucher, und Google bewertet sie über die Core Web Vitals auch im Ranking. Ein Captcha ist Teil dieser Rechnung — mit seiner Dateigröße, mit der Rechenarbeit im Browser und mit der Frage, auf welchen Seiten es überhaupt geladen wird.

16 KB, ohne Framework

Das CaptchaCore-Widget ist rund 16 KB groß (komprimiert) und kommt ohne Framework und ohne weitere Bibliotheken aus. Es ist in reinem JavaScript geschrieben und bringt sein Aussehen selbst mit. Für den Browser heißt das: eine einzige kleine Datei, kein Nachladen weiterer Skripte, keine Verbindungen zu weiteren Hosts.

Die Datei wird mit defer geladen und blockiert damit das Rendern der Seite nicht. Über das EU- oder das weltweite CDN kommt sie aus dem nächstgelegenen Rechenzentrum und wird vom Browser zwischengespeichert — beim zweiten Formular kostet sie keine Übertragung mehr.

Nur dort, wo ein Formular ist

Der größte Hebel ist, das Captcha nur auf den Seiten zu laden, die es brauchen. Ihre Startseite, Ihre Produktseiten und Ihr Blog haben meist kein Formular — dort hat ein Captcha-Skript nichts zu suchen.

  • WordPress: Das Plugin bindet das Widget nur auf Seiten ein, die ein geschütztes Formular zeigen — die Anmeldeseite, Beiträge mit Kommentarformular, „Mein Konto“ und Kasse im Shop.
  • Laravel: Die Blade-Komponente <x-captchacore::widget /> bringt das Skript mit — es lädt nur in Views, die die Komponente verwenden.
  • Symfony: Der FormType und die Twig-Funktion captchacore_widget() geben das Skript nur dort aus, wo das Formular gerendert wird.
  • Eigene Einbindung: Setzen Sie das Script-Tag nur in die Templates Ihrer Formulare — nicht in das allgemeine Layout.

Was das für die Core Web Vitals bedeutet

  • Largest Contentful Paint (LCP): Seiten ohne Formular laden das Captcha gar nicht; auf Formularseiten lädt es nach dem Inhalt, weil es verzögert eingebunden wird.
  • Interaction to Next Paint (INP): Die Rechenaufgabe des Proof of Work läuft in einem Web Worker, einem Hintergrund-Thread. Die Seite bleibt bedienbar, während der Browser rechnet — Klicks und Eingaben reagieren sofort.
  • Cumulative Layout Shift (CLS): Im unsichtbaren Modus gibt es gar keine Oberfläche, die sich nachträglich in die Seite schieben könnte. Im sichtbaren Modus hilft ein fester Platz für das Widget im Formular.

So prüfen Sie es selbst

  1. Öffnen Sie die Entwicklertools Ihres Browsers, Reiter Netzwerk, und laden Sie eine Seite ohne Formular: Dort sollte kein Captcha-Skript auftauchen.
  2. Laden Sie eine Seite mit Formular: Das Widget erscheint als eine einzelne Datei.
  3. Messen Sie beide Seiten mit Lighthouse oder PageSpeed Insights und vergleichen Sie die Werte mit und ohne aktiviertes Captcha.

Probieren Sie es in der Live-Demo aus — dort sehen Sie auch, welche Einstellungen das Widget kennt.

Häufige Fragen

Wie groß ist das CaptchaCore-Widget?

Rund 16 KB komprimiert, ohne Framework und ohne weitere Abhängigkeiten.

Bremst das Captcha meine Seite?

Seiten ohne Formular laden es gar nicht. Auf Formularseiten wird es verzögert geladen, und die Rechenarbeit läuft in einem Hintergrund-Thread — die Seite bleibt bedienbar.

Kann ich das Widget selbst hosten?

Das Widget liegt zusätzlich unter https://captchacore.eu/widget/ als Rückfallquelle. Für beste Ladezeiten empfehlen wir das CDN mit dem EU- oder dem weltweiten Endpunkt.