Wiki



Datei-Merger - CSS & JS optimieren

Der SEOFUXX Datei-Merger kombiniert mehrere CSS- und JavaScript-Dateien deiner Website zu je einer Datei. Das reduziert HTTP-Anfragen und verbessert die Ladezeit deutlich.

Was macht der Datei-Merger?

Der Datei-Merger analysiert deine Website und findet alle eingebundenen CSS- und JavaScript-Dateien. Anschließend kombiniert er diese zu optimierten, zusammengefassten Dateien.

Vorteile:

  • Besserer PageSpeed Score: Weniger Dateien = schnellere Ladezeit
  • Reduzierte HTTP-Anfragen: Statt 10 einzelnen Dateien nur noch 2 (eine CSS, eine JS)
  • Optimierte Performance: Deine Website lädt merklich schneller
  • Verbesserte User Experience: Besucher müssen nicht so lange warten

Website analysieren

  1. Gehe zum Datei-Merger in der Navigation
  2. Gib die URL deiner Website ein (z.B. https://deine-website.de)
  3. Klicke auf "Website analysieren"
  4. Der Merger scannt deine Seite und listet alle gefundenen CSS- und JS-Dateien auf

Dateien zusammenführen

Nach der Analyse siehst du zwei Tabellen:

JavaScript-Dateien

Alle gefundenen .js Dateien werden aufgelistet. Standardmäßig sind alle zum Zusammenführen ausgewählt.

Wichtig: Achte darauf, dass du nur Dateien zusammenführst, die in der richtigen Reihenfolge geladen werden können. Manche Scripts haben Abhängigkeiten zueinander.

CSS-Dateien

Alle gefundenen .css Dateien werden aufgelistet. Auch hier sind standardmäßig alle ausgewählt.

Tipp: CSS-Dateien lassen sich meist problemlos zusammenführen, da die Reihenfolge weniger kritisch ist.

Dateien auswählen und downloaden

  1. Checkboxen prüfen: Entferne Häkchen bei Dateien, die du nicht zusammenführen möchtest
  2. Zusammenführen klicken: Klicke auf "Dateien zusammenführen"
  3. Download: Du erhältst zwei optimierte Dateien:
    • merged-scripts.js - Alle JavaScript-Dateien kombiniert
    • merged-styles.css - Alle CSS-Dateien kombiniert

Optimierte Dateien implementieren

1. Dateien hochladen

Lade die zusammengeführten Dateien per FTP in ein Verzeichnis deiner Website hoch, z.B.:

/assets/optimized/merged-scripts.js
/assets/optimized/merged-styles.css

2. HTML-Code anpassen

Ersetze im <head> deiner Website alle einzelnen CSS-Einbindungen durch:

<link rel="stylesheet" href="/assets/optimized/merged-styles.css" />

Ersetze vor dem schließenden </body> alle JavaScript-Einbindungen durch:

<script src="/assets/optimized/merged-scripts.js"></script>

3. Alte Einbindungen entfernen

Entferne alle alten <link> und <script> Tags der einzelnen Dateien, die du zusammengeführt hast.

Was du beachten solltest

Script-Reihenfolge

Wenn deine Scripts voneinander abhängig sind (z.B. jQuery muss vor jQuery-Plugins geladen werden), achte darauf, dass die Reihenfolge in der Tabelle korrekt ist. Der Merger kombiniert die Dateien in der angezeigten Reihenfolge.

Critical CSS

Überlege, ob du kritisches CSS (Above-the-Fold) inline im <head> belassen und nur unkritisches CSS zusammenführen möchtest.

Browser-Caching

Nach dem Upload der neuen Dateien solltest du den Browser-Cache leeren oder Versionsparameter verwenden:

<link rel="stylesheet" href="/assets/optimized/merged-styles.css?v=1.0" />

Backup erstellen

Erstelle vor Änderungen immer ein Backup deiner originalen Dateien und HTML-Templates.

Performance-Messung

Nach der Implementierung solltest du die Verbesserung messen:

  1. Google PageSpeed Insights: Prüfe deinen PageSpeed Score vor und nach der Optimierung
  2. Browser DevTools: Checke in den Network-Tools, wie viele HTTP-Anfragen reduziert wurden
  3. Ladezeit: Miss die tatsächliche Ladezeit mit Tools wie GTmetrix oder Pingdom

Häufige Fragen

Kann ich einzelne Dateien ausschließen?

Ja! Entferne einfach das Häkchen bei Dateien, die du nicht zusammenführen möchtest.

Was passiert mit externen Dateien (CDNs)?

Der Merger verarbeitet nur lokale Dateien. CDN-Ressourcen wie jQuery von Google CDN werden nicht zusammengeführt.

Muss ich das bei jedem Update wiederholen?

Ja, wenn sich deine CSS- oder JS-Dateien ändern, solltest du den Merge-Prozess wiederholen und die neuen Dateien hochladen.

Funktioniert das mit jedem CMS?

Ja, grundsätzlich funktioniert der Datei-Merger mit jeder Website. Du musst nur in der Lage sein, die HTML-Templates deines CMS anzupassen.

Tipps zur Optimierung

  • Minify: Die zusammengeführten Dateien sind nicht minifiziert. Nutze zusätzlich Tools wie UglifyJS (für JS) oder CSSNano (für CSS) zur Komprimierung
  • Gzip-Kompression: Aktiviere Gzip auf deinem Server für noch bessere Kompression
  • Defer & Async: Nutze defer oder async Attribute für JavaScript, wenn möglich
  • Kritisches CSS inline: Für optimale Ladezeiten solltest du kritisches CSS inline im <head> einbinden

Support

Bei Fragen oder Problemen kannst du dich jederzeit an den SEOFUXX-Support wenden oder im Forum nachfragen.