WP Manifestindependent plugin directory
manifest / performance / imm-toolkit-for-breakdance

i-make.media Toolkit for Breakdance

Ladezeit und Barrierefreiheit für Breakdance-Seiten: Google Fonts und CDN-Skripte lokal, LCP-Bild, WebP, barrierefreie Einblendungen. WordPress-Plugin mit Auto-Updates aus GitHub.

by Magnus Brühl, i-make.media · github.com/mblmg/imm-toolkit-for-breakdance · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/mblmg/imm-toolkit-for-breakdance/archive/refs/heads/main.zip
Updates itself. It ships its own updater, so new versions appear under Dashboard → Updates.
Readme github.com/mblmg/imm-toolkit-for-breakdance ↗

WordPress-Plugin für Seiten, die mit Breakdance gebaut sind. Es behebt Ladezeit- und Barrierefreiheitsprobleme, die Breakdance mitbringt und die Cache-Plugins wie WP-Optimize, Autoptimize, WP Super Cache oder EWWW nicht abdecken.

Entwickelt von Magnus Brühl, i-make.media für die eigenen Kundenseiten.

Was es tut

Problem in Breakdance Was das Toolkit macht
Google Fonts kommen von fonts.googleapis.com und fonts.gstatic.com: zwei fremde Hosts, Render-Blocking, Datenschutzrisiko (LG München I, 20.01.2022, Az. 3 O 17493/20) lädt die Schriften einmal herunter, liefert sie von der eigenen Domain aus und lädt die zwei wichtigsten Dateien vor
GSAP und ScrollTrigger kommen von unpkg.com liefert sie lokal aus; nach Breakdance-Updates holt es neue Versionen sofort
Das Hero-Bild wird lazy geladen und ohne Priorität erkennt das LCP-Bild, nimmt es aus dem Lazy-Load, setzt fetchpriority="high", lädt es vor und liefert es als WebP aus
Bilder ohne width/height ergänzt die Maße aus der Datei, damit beim Laden nichts springt
Einblendanimationen setzen Inhalte bis zum Hinscrollen auf visibility:hidden: Screenreader finden keine Überschriften, ohne JavaScript bleibt die Seite leer blendet nur optisch aus; bei „Bewegung reduzieren“ und ohne JavaScript ist alles sofort sichtbar
Icon- und Logo-Links ohne Text; „Social Icons“ schreibt aria-label="custom" beschriftet sie, z. B. „LinkedIn (öffnet in neuem Tab)“ oder mit dem Seitentitel

Messung auf i-make.media (Lighthouse mobil, Median aus drei Läufen): Performance 85 → 98, Barrierefreiheit 93 → 100, CLS 0,068 → 0, keine Anfragen mehr an fremde Hosts. Ein Teil davon kam aus Änderungen an der Seite selbst (Button-Kontraste, Landmarks), die kein Plugin erledigen kann.

Installation

  1. Unter Releases die Datei imm-toolkit-for-breakdance.zip herunterladen.
  2. In WordPress unter Plugins → Installieren → Plugin hochladen installieren und aktivieren.
  3. Seiten-Cache leeren.

Oder per WP-CLI:

wp plugin install https://github.com/mblmg/imm-toolkit-for-breakdance/releases/latest/download/imm-toolkit-for-breakdance.zip --activate

Voraussetzungen: WordPress 6.2, PHP 8.0.

Updates

Das Plugin fragt GitHub nach neuen Releases und installiert sie automatisch. Abschalten lässt sich das unter Einstellungen → i-make.media Toolkit. Für ein privates Repo oder bei Rate-Limits einen Token in der wp-config.php hinterlegen:

define( 'IMM_TOOLKIT_GITHUB_TOKEN', '…' );

Einstellungen und Werkzeuge

Einstellungen → i-make.media Toolkit: Module an- und abschalten, Auto-Updates, Übersicht der lokalen Schriften und CDN-Dateien. Eine Seite ohne Optimierung zum Vergleich: URL mit ?imm_perf_aus=1 aufrufen.

wp imm-toolkit status       Version, Module, lokale Dateien
wp imm-toolkit vorladen     CDN-Dateien sofort holen
wp imm-toolkit aufraeumen   Ungenutztes löschen (läuft auch täglich)
wp imm-toolkit update-check GitHub sofort fragen

Ein anderes Bild als LCP-Bild festlegen: CSS-Klasse imm-lcp am Bild setzen.

Filter: imm_toolkit_<modul>, imm_perf_<option>, imm_perf_process, imm_perf_cdn_hosts, imm_perf_known_sites, imm_perf_webp_quality, imm_local_fonts_preload, imm_local_fonts_max_preload.

Neue Version veröffentlichen

  1. Version in imm-toolkit-for-breakdance.php an zwei Stellen erhöhen (Header Version: und const VERSION).
  2. Abschnitt in CHANGELOG.md ergänzen.
  3. Commit, dann git tag v1.2.0 && git push --tags.

Die GitHub Action prüft PHP-Syntax und Versionsnummern, baut das ZIP und legt das Release an.

Lizenz

GPL-2.0-or-later, siehe LICENSE.