{"id":1905,"date":"2026-04-08T09:12:55","date_gmt":"2026-04-08T06:12:55","guid":{"rendered":"https:\/\/allinonewpsettings.com\/blog\/?p=1905"},"modified":"2026-08-02T12:08:44","modified_gmt":"2026-08-02T12:08:44","slug":"javascript-in-wordpress-defer-oder-delay","status":"publish","type":"post","link":"https:\/\/allinonewpsettings.com\/blog\/de\/javascript-in-wordpress-defer-oder-delay\/","title":{"rendered":"JavaScript in WordPress: Defer oder Delay?"},"content":{"rendered":"

Ein Navigationsskript funktioniert mit defer<\/code> weiterhin, wird es jedoch bis zur ersten Interaktion verz\u00f6gert, ist das Men\u00fc f\u00fcr Tastaturnutzer zun\u00e4chst unbrauchbar. Ein Chat-Widget darf warten; Code f\u00fcr die erste Bedienung meist nicht.<\/p>\n

Die Entscheidung zwischen Defer und Delay richtet sich nach Abh\u00e4ngigkeiten und dem fr\u00fchesten Zeitpunkt, zu dem eine Funktion ben\u00f6tigt wird \u2013 nicht allein nach der Dateigr\u00f6\u00dfe.<\/p>\n

\nInhaltsverzeichnis<\/strong><\/p>\n
    \n
  1. Was darunter zu verstehen ist<\/a><\/li>\n
  2. Praxisbeispiel<\/a><\/li>\n
  3. Warum die Unterscheidung wichtig ist<\/a><\/li>\n
  4. Ein einfacher und sicherer Einstieg<\/a><\/li>\n
  5. Technische Pr\u00fcfung<\/a><\/li>\n
  6. Risiken, h\u00e4ufige Fehler, Backup und Rollback<\/a><\/li>\n
  7. So unterst\u00fctzt AIOWS: AIOWS Cache Manager<\/a><\/li>\n
  8. Passende AIOWS-Artikel<\/a><\/li>\n
  9. Fazit und Empfehlung<\/a><\/li>\n
  10. Offizielle Quellen<\/a><\/li>\n<\/ol>\n<\/div>\n

    Was darunter zu verstehen ist<\/h2>\n

    Bei klassischen externen Skripten l\u00e4dt defer<\/code> die Datei parallel zum HTML-Parsing und f\u00fchrt sie anschlie\u00dfend in Dokumentreihenfolge aus. \u201eDelay\u201c ist kein einheitliches HTML-Attribut: Optimierungswerkzeuge verschieben Laden oder Ausf\u00fchrung bis zu einer Interaktion, einer Zeitgrenze oder einer anderen Bedingung.<\/p>\n

    async<\/code> und JavaScript-Module folgen wiederum eigenen Regeln. Diese Modi sind nicht beliebig austauschbar.<\/p>\n

    Praxisbeispiel<\/h2>\n

    Das Theme ben\u00f6tigt sein Skript direkt nach dem Parsen, um Navigation und Suche zu initialisieren. Mit defer<\/code> bleibt die Reihenfolge erhalten. Eine Verz\u00f6gerung bis zum ersten Klick f\u00fchrt dagegen dazu, dass genau dieser Klick verloren geht. Ein sp\u00e4ter eingeblendeter Support-Chat kann hingegen bis zur Zustimmung oder Interaktion warten.<\/p>\n

    Die beiden Dateien erhalten deshalb unterschiedliche Strategien, obwohl beide nicht render-blockierend geladen werden sollen.<\/p>\n

    Warum die Unterscheidung wichtig ist<\/h2>\n

    Falsch verz\u00f6gerter Code verschlechtert Bedienbarkeit, Barrierefreiheit und Messbarkeit. Besonders kritisch sind Consent, Formulare, Navigation, Warenkorb und alles, was auf die erste Interaktion reagieren muss.<\/p>\n

    Delay eignet sich f\u00fcr wirklich optionale Arbeit. Defer ist meist die verl\u00e4sslichere Wahl, wenn ein Skript nach dem Parsen, aber ohne Blockade des Dokuments gebraucht wird.<\/p>\n

    Ein einfacher und sicherer Einstieg<\/h2>\n
      \n
    1. Ordnen Sie jedes Skript einer Funktion und einer verantwortlichen Komponente zu.<\/li>\n
    2. Notieren Sie Abh\u00e4ngigkeiten und die erste Benutzeraktion, f\u00fcr die es bereit sein muss.<\/li>\n
    3. Testen Sie zun\u00e4chst defer<\/code> bei geeigneten klassischen Skripten.<\/li>\n
    4. Verz\u00f6gern Sie nur optionale Dienste mit einem klaren Ausl\u00f6ser und Fallback.<\/li>\n
    5. Pr\u00fcfen Sie ersten Klick, Tastatur, Consent, Formulare und Transaktionen auch ohne vorherige Interaktion.<\/li>\n<\/ol>\n

      Technische Pr\u00fcfung<\/h2>\n

      Inline-Initialisierung kann vor einer verz\u00f6gerten Abh\u00e4ngigkeit laufen. Pr\u00fcfen Sie deshalb die tats\u00e4chliche Reihenfolge im Browser, einschlie\u00dflich dynamisch eingef\u00fcgter Skripte, Tag Manager, Consent-Plattformen, Module und async<\/code>.<\/p>\n

      Dokumentieren Sie pro Datei Modus, Abh\u00e4ngigkeiten, Ausl\u00f6ser, maximale Wartezeit und R\u00fcckfallverhalten. Messen Sie nicht nur Main-Thread-Zeit, sondern auch, ob Funktionen im erwarteten Moment bereitstehen.<\/p>\n

      Risiken, h\u00e4ufige Fehler, Backup und Rollback<\/h2>\n

      Eine gute Lighthouse-Zahl kann einen verlorenen ersten Klick nicht rechtfertigen. Das pauschale Verz\u00f6gern aller Drittanbieterdateien ist ebenfalls riskant, wenn darunter Consent oder Zahlungsfunktionen fallen.<\/p>\n