18.08.2025 18:30 Uhr
Vanilla
Barrierefreiheit und Performance
Bild KI-generiert mit Adobe Firefly
Ich hab hier im Blog und drumrum mal ein bisschen ausgemistet und umgemodelt. Bootstrap, jQuery und Chocolat rausgeworfen und dadurch allein ca. 500kb Pageload gespart. Baut jetzt alles auf reinem CSS und JS auf — man spricht auch von Vanilla Code. Hat jetzt nen Lighthouse-Score von zwischen 901 und 100 über alle Kategorien. Das Thema Barrierefreiheit bin ich direkt mit angegangen, hab Farbkontraste, Abstände optimiert und z.B. Aria-Labels hinzugefügt. Bilder werden jetzt responsiv ausgegeben und auf schmalen Displays ohne Anschnitt im Original-Seitenverhältnis. Ich hoffe im Feed klappt auch noch alles. Sagt gern bescheid, wenn ihr Fehler entdeckt.
1 Die Startseite ist aufgrund der externen Inhalte von Mastodon noch etwas lahm. Hierfür werde ich mir ein Caching überlegen. Edit: 20.08. done, siehe Kommentar.
Screenshot Lighthouse Score 100 Performance, 100 Accessibility, 100 Best Practices, 100 SEO
Screenshot Qualibooth results. "Great job! Your website meets WCAG 2.2 AA accessibility requirements."
Weiterführende Links:
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://bfsg-gesetz.de
- https://wave.webaim.org/
- https://pagespeed.web.dev/
- https://www.qualibooth.com/
- https://getkirby.com/docs/cookbook/performance/responsive-images
- https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
- https://www.checkmeister.com/tools/evaluation
Homepage jetzt auch optimiert. Letzter Mastodon-Post wird über einen Controller für 10 Minuten gecached und somit nicht jedesmal von extern geladen. Mit den Bildern von Mastodon unten auf der Startseite war es etwas komplexer. Diese werden lokal gespeichert und dann als assets angelegt, damit ich sie croppen und responsive ausgeben kann. Jetzt hat die Startseite auch einen Lighthouse-Score von 100/100.
antworten