Wie man unnötigen CSS- und JavaScript-Code erkennt und bereinigt.

Wie man unnötigen CSS- und JavaScript-Code erkennt und bereinigt

In der modernen Webentwicklungswelt gewinnt die Bedeutung von Performance und geschwindigkeitsorientierter Entwicklung zunehmend an Bedeutung. Insbesondere das schnellere Laden von Webseiten ist ein entscheidender Schritt, um den SEO-Erfolg zu steigern und ein besseres Benutzererlebnis zu bieten. Daher ist die Bereinigung von unnötigem CSS- und JavaScript-Code von entscheidender Bedeutung. In diesem Artikel werden wir detailliert und anhand von Beispielen erläutern, wie Sie unnötige Ressourcen in verschiedenen Strukturen, von PHP-basierten Seiten bis hin zu WordPress-basierten Systemen, erkennen und bereinigen können.

1. Was ist unnötiger CSS- und JS-Code?

Mit "unnötigem" Code sind Ressourcen gemeint, die im Seiteninhalt nicht aktiv verwendet werden, aber vom Browser geladen und gerendert werden. Dieser Code umfasst:

Stildefinitionen aus Designdateien, die keine Auswirkungen auf Elemente haben
JS-Funktionen, die nicht an Seitenelemente gebunden sind
Nicht verwendete Bibliotheken und aufgerufene, aber nicht funktionierende Plugin-Dateien

2. Tools zur Erkennung

Wichtige Tools, die Sie zum Auffinden von unnötigem Code verwenden können:

Google Chrome DevTools (Coverage Tab)
UnCSS (CLI- oder Node-basiert)
PurgeCSS (sehr nützlich für Tailwind-Projekte)
PageSpeed Insights- oder Lighthouse-Berichte

Beispiel (Coverage mit DevTools):

Öffnen Sie Ihre Seite in Chrome.
Öffnen Sie die Entwicklertools mit F12.
Command + Shift + P > Geben Sie "Coverage" ein und öffnen Sie das Panel.
Klicken Sie auf die Schaltfläche "Start recording", um die Raten von nicht geladenem CSS und JS anzuzeigen, während Sie die Seite scrollen.

3. Empfehlungen zur Bereinigung in PHP-basierten Seiten

Insbesondere bei eigenen Schreibprojekten sollten vor der Erstellung der HTML-Ausgabe nur minimale JS- und CSS-Aufrufe erfolgen. Beispiel:

<?php if($sayfa == 'iletisim') { ?>
  <link rel="stylesheet" href="iletisim.css">
  <script src="harita.js"></script>
<?php } ?>

Auf diese Weise lädt jede Seite nur die Ressourcen, die sie benötigt.

Darüber hinaus können die folgenden Tools für Minify- und Combine-Operationen verwendet werden:

Minify HTML Output für ob_start() + Regex-Bereinigung
Gulp oder Grunt mit automatischen Build-Skripten

4. Entfernen von unnötigem CSS und JS in WordPress-Seiten

WordPress-Themes und -Plugins laden in der Regel unnötig viele Ressourcen. Sie können diese mit den folgenden Methoden entfernen:

A) Entfernen von Skripten und Stilen mit functions.php:

function wp_daha_az_yukleme() {
  if (!is_page('iletisim')) {
    wp_dequeue_style('harita-stili');
    wp_dequeue_script('harita-js');
  }
}
add_action('wp_enqueue_scripts', 'wp_daha_az_yukleme', 100);

B) Plugins wie Asset Cleanup oder Perfmatters: Ermöglichen es Ihnen, Stile und Skripte seitenweise zu blockieren.

C) CSS/JS-Kombination und -Minifizierung mit Autoptimize: Mit diesem Plugin können Sie die Seitengröße um bis zu 40 % reduzieren.

5. Verwendung von PurgeCSS in TailwindCSS-Projekten

In mit Tailwind entwickelten Projekten werden standardmäßig alle Utility-Klassen kompiliert. Viele davon werden jedoch nicht verwendet. Um dies zu bereinigen, wird die Funktion PurgeCSS oder Tailwind v3 built-in purge verwendet:

tailwind.config.js
module.exports = {
  content: ['./*.html', './src/**/*.js'],
  theme: { extend: {} },
  plugins: [],
}

Mit dieser Einstellung werden nur die im Seiteninhalt verwendeten Klassen in die Build-Datei aufgenommen.

6. Caching und Lazy Load-Unterstützung

Nach Abschluss der CSS- und JS-Optimierung sollte die Seitengeschwindigkeit unbedingt durch Caching-Systeme unterstützt werden:

WP Super Cache / LiteSpeed Cache (WordPress)
Cloudflare CDN und JS Delay (Alle Strukturen)
Reduzierung der anfänglichen Ladezeit der Seite durch Lazy Load-Bilder

7. Messergebnisse mit Performance-Tests

Beobachten Sie Ihre Website nach den Bereinigungsoperationen mit den folgenden Tests:

Fazit

Das Bereinigen von unnötigem CSS- und JavaScript-Code in Webprojekten führt nicht nur zu einer Geschwindigkeitssteigerung, sondern erhöht auch die SEO-Punktzahl erheblich. Es ist möglich und vorteilhaft, diese Bereinigung für alle Strukturen durchzuführen, von mit PHP entwickelten benutzerdefinierten Websites bis hin zu WordPress-Projekten.

Wenn Sie auch eine mobilfreundliche Website mit responsiven Grid- und Flex-Strukturen und leistungsstarken UI-Komponenten anbieten möchten, müssen die Quellcodes sauber, leistungsorientiert und optimiert sein.