Performance & PageSpeed Optimierungs-Guide – PowerPlatformTip

Erstellt: 24. Oktober 2025
Zweck: Konkrete Massnahmen zur Verbesserung von Core Web Vitals und PageSpeed Score

Übersicht

Performance-Optimierung ist entscheidend für SEO (Google Ranking-Faktor) und Nutzererlebnis. Dieser Guide fokussiert auf:

1. Core Web Vitals – Zielwerte

Largest Contentful Paint (LCP)

Ziel: < 2.5 Sekunden
Was es misst: Zeit bis grösstes sichtbares Element geladen ist

Optimierungen:

Cumulative Layout Shift (CLS)

Ziel: < 0.1
Was es misst: Visuelle Stabilität (unerwartete Layout-Shifts)

Optimierungen:

Interaction to Next Paint (INP) / First Input Delay (FID)

Ziel: INP < 200ms, FID < 100ms
Was es misst: Interaktivität/Reaktionszeit

Optimierungen:

2. Jekyll-spezifische Optimierungen

Jekyll Build-Optimierung

Minimierung & Compression

# _config.yml (bereits vorhanden)
compress_html:
  clippings: all
  ignore:
    envs: development

Sass Compression

# _config.yml (bereits aktiviert)
sass:
  sass_dir: _sass
  style: compressed

Asset-Optimierung

CSS

Beispiel für async CSS:

<!-- _includes/head.html -->
<link rel="preload" href="/assets/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/css/main.css"></noscript>

JavaScript

Beispiel:

<!-- Defer non-critical JS -->
<script defer src="/assets/js/main.min.js"></script>

3. Bilder-Optimierung

Kompression & Format

WebP/AVIF

Vorteile:

Implementierung:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Lazy-Loading

<img src="image.jpg" alt="Description" loading="lazy" width="800" height="600">

Jekyll Plugin (optional):

# Gemfile
gem 'jekyll-imagemagick'  # Auto-Resize & Convert

Responsive Images (srcset)

<img 
  src="image-800.jpg" 
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
  width="800"
  height="600"
  loading="lazy">

Tools für Bildoptimierung

Batch-Kompression:

# Alle JPGs im Verzeichnis komprimieren
find assets/images -name "*.jpg" -exec mogrify -quality 85 -strip {} \;

# WebP-Konvertierung
for img in assets/images/*.jpg; do
  cwebp -q 85 "$img" -o "${img%.jpg}.webp"
done

4. Font-Optimierung

Font-Loading-Strategie

Aktuell (FontAwesome via CDN)

<!-- _includes/head.html -->
<link rel="preload" href="https://cdn.jsdelivr.net/.../fontawesome.min.css" as="style" onload="...">

Optimierungen

Beispiel:

@font-face {
  font-family: 'Custom Font';
  src: url('/assets/fonts/font.woff2') format('woff2');
  font-display: swap; /* Wichtig für CLS */
  font-weight: 400;
  font-style: normal;
}

Google Fonts-Optimierung (falls verwendet)

<!-- Preconnect für schnellere Verbindung -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Font mit display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

5. Caching & Server-Optimierung

Browser-Caching (via HTTP Headers)

GitHub Pages Limitation:

Alternative: Service Worker (PWA)

// sw.js - Service Worker für Offline-Caching
const CACHE_NAME = 'ppt-v1';
const urlsToCache = [
  '/',
  '/assets/css/main.css',
  '/assets/js/main.min.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

CDN (GitHub Pages nutzt bereits Fastly CDN)

Falls Custom Domain mit Cloudflare:

6. Third-Party-Scripts minimieren

Aktuell verwendete Scripts

Optimierungen

Lazy-load Giscus:

<!-- Nur laden wenn in Viewport -->
<div id="giscus-container"></div>
<script>
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      const script = document.createElement('script');
      script.src = 'https://giscus.app/client.js';
      script.async = true;
      document.getElementById('giscus-container').appendChild(script);
      observer.disconnect();
    }
  });
  observer.observe(document.getElementById('giscus-container'));
</script>

7. Monitoring & Baseline

PageSpeed Insights Baseline

Schritte:

  1. Öffne https://pagespeed.web.dev/
  2. URL eingeben: https://www.powerplatformtip.com
  3. Beide Tabs prüfen: Mobile & Desktop
  4. Metriken dokumentieren:
Metrik Desktop (Vorher) Desktop (Nachher) Mobile (Vorher) Mobile (Nachher)
Performance Score [Wert] [Ziel: > 90] [Wert] [Ziel: > 85]
LCP [Wert] [< 2.5s] [Wert] [< 2.5s]
CLS [Wert] [< 0.1] [Wert] [< 0.1]
INP/FID [Wert] [< 200ms] [Wert] [< 200ms]

Tools für kontinuierliches Monitoring

Lighthouse CI (GitHub Actions)

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push, pull_request]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: treosh/lighthouse-ci-action@v9
        with:
          urls: |
            https://www.powerplatformtip.com
            https://www.powerplatformtip.com/about/
          uploadArtifacts: true

WebPageTest (manuell)

Chrome DevTools

8. Quick Wins (sofort umsetzbar)

Priorität 1 (höchster Impact)

  1. Bilder komprimieren 
    # Batch-Optimierung
find assets/images -name "*.jpg" -exec mogrify -quality 80 {} \;
  2. Lazy-loading aktivieren 
    <!-- Alle Bilder im Content -->
<img src="..." alt="..." loading="lazy" width="..." height="...">
  3. Width/Height für alle Bilder
    • Verhindert CLS
    • Bereits in vielen Posts vorhanden, aber prüfen
  4. FontAwesome optimieren
    • Nur verwendete Icons laden (Custom Subset)
    • Oder: Self-host mit Subset

Priorität 2 (mittlerer Impact)

  1. JavaScript defer 
    <script defer src="..."></script>
  2. Kritisches CSS inline
    • Above-the-Fold CSS direkt in <head>
    • Rest async laden
  3. Preconnect für Third-Party-Domains 
    <link rel="preconnect" href="https://fonts.googleapis.com">

9. Langfristige Optimierungen

Progressive Web App (PWA)

Server-Upgrade (falls Custom Hosting)

Advanced Image-Optimierung

10. Testing-Checklist

Vor jeder grösseren Performance-Änderung:

Red Flags (sofort prüfen)

11. Performance-Budget

Definition: Maximale Grössen für Ressourcen, die nicht überschritten werden dürfen

Ressourcentyp Budget
HTML < 50 KB
CSS (total) < 100 KB
JavaScript (total) < 150 KB
Bilder (pro Seite) < 500 KB
Fonts < 100 KB
Total Page Weight < 1 MB

Enforcement:

# .github/workflows/performance-budget.yml (optional)
# Warnung bei Überschreitung des Budgets

12. Nächste Schritte

Sofort (diese Woche)

  1. PageSpeed Insights Baseline erstellen (Homepage, Top-Posts)
  2. Alle Bilder in assets/images/ komprimieren
  3. loading="lazy" für alle Content-Bilder
  4. Width/Height für Bilder in Top-10 Posts

Mittelfristig (nächste 2 Wochen)

  1. Kritisches CSS inline
  2. JavaScript defer für non-critical Scripts
  3. Font-display: swap für alle Fonts
  4. Lazy-load Giscus Comments

Langfristig (nächste 4 Wochen)

  1. WebP-Konvertierung für alle Bilder
  2. Service Worker für Offline-Caching
  3. Lighthouse CI in GitHub Actions
  4. Performance-Review nach 8 Wochen

Verantwortlich: Dev-Team / Marcel Lehmann
Review: Wöchentlich (PageSpeed Check)
Nächster Meilenstein: PageSpeed Score > 90 (Desktop), > 85 (Mobile)

📚 Training

Interested in training or personalized coaching to enhance your PowerPlatform skills? 🚀 Book a package with me at thepoweraddicts.ch and benefit from customized strategies for your success. 💡

📧 Stay Updated

Don't miss any PowerPlatform tips! Subscribe to my newsletter for exclusive insights and updates.