Kapitel 11: Theme-Optimierung

11.1 CSS-Optimierung

CSS minimieren

Entfernen Sie alle unnötigen Leerzeichen, Kommentare und Zeilenumbrüche.

Vorher:

/* Navigation Styles */
.main-navigation {
    background-color: #1a73e8;
    padding: 20px;
}

Nachher (minimiert):

.main-navigation{background-color:#1a73e8;padding:20px}

Tools:

• Autoptimize (WordPress-Plugin)
• WP Rocket (Premium-Plugin)
• CSSNano (Online-Tool)

CSS zusammenfassen

Vermeiden Sie doppelten Code:

Schlecht:

.header-title { font-size: 2rem; color: #333; }
.footer-title { font-size: 2rem; color: #333; }

Gut:

.header-title,
.footer-title {
    font-size: 2rem;
    color: #333;
}

Unbenutztes CSS entfernen

Verwenden Sie Tools wie PurgeCSS, um unbenutztes CSS zu entfernen.

11.2 JavaScript-Optimierung

JavaScript deferred oder async laden

defer: Skript wird parallel geladen, erst ausgeführt nachdem HTML geparst ist.

<script src="script.js" defer></script>

async: Skript wird parallel geladen und sofort ausgeführt.

<script src="script.js" async></script>

In WordPress (functions.php)

// JS mit 'defer' laden
function modern_blog_scripts() {
    wp_enqueue_script('modern-blog-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
    
    // Defer hinzufügen
    add_filter('script_loader_tag', function($tag, $handle) {
        if ('modern-blog-script' !== $handle) {
            return $tag;
        }
        return str_replace(' src', ' defer src', $tag);
    }, 10, 2);
}
add_action('wp_enqueue_scripts', 'modern_blog_scripts');

JavaScript minimieren

Tools:

• UglifyJS (Online-Tool)
• JSCompress (Online-Tool)
• WP Rocket (Plugin)

11.3 Bild-Optimierung

Bilder komprimieren

Vor der Upload:

• TinyPNG (https://tinypng.com)
• ImageOptim (Mac)
• RIOT (Windows)

Nach der Upload (Plugins):

• Smush
• ShortPixel
• Imagify

Lazy Loading für Bilder

WordPress 5.5+ hat natives Lazy Loading:

// In functions.php
add_theme_support('lazy-loading-images');

Oder im Template:

<img src="bild.jpg" loading="lazy" alt="Beschreibung">

WebP-Format verwenden

WebP ist kleiner als JPEG/PNG.

Mit Plugin:

• WebP Express
• Imagify

11.4 Browser-Kompatibilität

CSS-Vendor-Prefixe

Verwenden Sie Autoprefixer, um Vendor-Prefixe automatisch hinzuzufügen.

Beispiel (ohne):

.box {
    display: flex;
}

Beispiel (mit):

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Flexbox und Grid für Layouts verwenden

Flexbox:

.container {
    display: flex;
    justify-content: space-between;
}

Grid:

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

Fallbacks für alte Browser

Beispiel:

.box {
    display: block; /* Fallback für alte Browser */
    display: flex; /* Moderne Browser */
}

11.5 Caching

Browser-Caching

Fügen Sie in .htaccess (Apache) hinzu:

# Browser Caching
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 7 days"
</IfModule>

Caching-Plugins

• WP Rocket (Premium)
• W3 Total Cache (Kostenlos)
• WP Super Cache (Kostenlos)

11.6 Datenbank-Optimierung

wp_options bereinigen

Verwenden Sie WP-Optimize, um die Datenbank zu bereinigen.

Post-Revisionen begrenzen

In wp-config.php:

define('WP_POST_REVISIONS', 5); // Max. 5 Revisionen

Oder deaktivieren:

define('WP_POST_REVISIONS', false);

11.7 CDN verwenden

Was ist ein CDN?

Ein Content Delivery Network (CDN) speichert Ihre Static-Dateien (CSS, JS, Bilder) auf Servern weltweit, um die Ladezeit zu verkürzen.

Beliebte CDNs

• Cloudflare (Kostenlos/Premium)
• StackPath
• KeyCDN

WordPress mit CDN verbinden

Verwenden Sie CDN Enabler oder konfigurieren Sie Cloudflare direkt.

📝 Übung 11: Theme optimieren

Ziel: Optimieren Sie Ihr Theme für bessere Performance.

Schritte:

1. Minimize CSS und JS
2. Komprimieren Sie Bilder
3. Aktivieren Sie Lazy Loading
4. Installieren Sie ein Caching-Plugin
5. Testen Sie die Website mit Google PageSpeed Insights

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ CSS zu minimieren und zusammenzufassen
• ✅ JavaScript zu optimieren (defer, async)
• ✅ Bilder zu komprimieren und Lazy Loading zu verwenden
• ✅ Browser-Kompatibilität zu gewährleisten
• ✅ Caching und CDN zu verwenden

Nächstes Kapitel: Wir lernen Customizer API kennen.

➡️ Zu Kapitel 12: Customizer API →