##Überblick
WerbeNinja (werbeninja.de) ist eine statische, hochgradig performance-optimierte Website für eine Web- und Online-Marketing-Agentur. Sie dient der Präsentation des Dienstleistungsportfolios, dem Nachweis der Expertise durch Case Studies und der Leadgenerierung.
Bewusst ohne schwere Frontend-Frameworks gebaut — kein React, kein Vue. Stattdessen reines HTML5, CSS3 und Vanilla JS, ergänzt durch gezielte Performance-Maßnahmen wie Service Worker, Critical CSS und serverseitiges Caching.
##Kern-Features
PWA & Service Worker
- Cache-First-Strategie für CSS, JS und Fonts
- Offline-Funktionalität für Folgeaufrufe
- Installierbar auf Mobile & Desktop
- Cache-Invalidierung via CACHE_NAME-Versionierung
Performance-Optimierungen
- Critical CSS direkt im <head> inline — kein Layout Shift
- AOS (Animate on Scroll) nicht-blockierend geladen
- WebP-Bilder & Lazy Loading für alle Assets
- Apache .htaccess: serverseitiges Caching & Komprimierung
- 95+ Google PageSpeed Score Mobile & Desktop
Leadgenerierung
- Terminbuchungs-Integration direkt auf der Website
- WhatsApp-Kontakt-Button für schnellen Erstkontakt
- Kontaktformular mit PHP-Backend (/forms/)
- Case Studies als Social Proof auf eigenen Unterseiten
Styling & UI
- Bootstrap 5.x als CSS-Framework (Vendor-Asset)
- Bootstrap Icons für konsistente Iconographie
- Custom CSS in assets/css/main.css
- Mobile-First Responsive Design
- AOS-Animationen für scroll-basierte Einblendungen
##Architektur
Das Projekt ist bewusst schlank gehalten: kein Build-Tool, kein Node.js-Prozess für die Basisstruktur. Anpassungen erfolgen direkt im HTML/CSS/JS.
Frontend
Statisches HTML5. CSS via Bootstrap 5 + Custom Styles. Minimal JavaScript für Interaktionen.
Service Worker (sw.js)
Cache-First-Strategie. Bei Updates muss CACHE_NAME hochgezählt werden, damit wiederkehrende Nutzer sofort die neue Version erhalten.
Backend
Einfaches PHP-Script in /forms/ für die Kontaktformular-Verarbeitung — passend zum statischen Ansatz.
Deployment
FTP/SFTP direkt auf den Webserver. Kein Build-Schritt notwendig. Apache .htaccess steuert Caching und Komprimierung.
##Performance-Strategie
Jede Maßnahme hat ein klares Ziel: maximale Ladegeschwindigkeit beim ersten Besuch und nahezu sofortige Ladezeiten bei Folgebesuchen.
- Critical CSS inline im <head> — verhindert Layout Shifts und blockierendes CSS
- Service Worker Cache-First — Folgeaufrufe werden aus einem lokalen Cache bedient
- Apache .htaccess — serverseitige Cache-Header (max-age) für alle statischen Assets
- WebP-Format für alle Bilder — 30–50% kleinere Dateigröße als JPEG/PNG
- Lazy Loading für alle Bilder außerhalb des Viewports (loading="lazy")
- AOS asynchron geladen — blockiert den First Contentful Paint nicht