Tipps zur PageSpeed Optimierung
Wer das google-Tool zur PageSpeed Optimierung gestartet hat, der bekommt eine Übersicht mit teilweise grünen, gelben oder roten Icons davor. Hier werden alle diese Analyse-Punkte, bzw. Hinweise aufgeführt um das grüne Icon zu sehen. Natürlich werden nicht alle Webmaster ihre Webseiten auf einen PageSpeed-Score von 100 (optimaler PageSpeed Wert) bringen können, denn vieles ist von den Servereinstellungen abhängig und nicht jedes Projekt liegt auf einem eigenen Server mit vollen Einstellungsmöglichkeiten.
Wer die Punkte zur PageSpeed Optimierung nach und nach durchgeht, der kann somit nicht nur seine Webseite verbessern, sondern auch Traffic sparen, sowie die Ladezeit für den Besucher verringern.
Page Speed Punkte
- CSS kombinieren
- Javascript kombinieren
- Browser-Caching nutzen
- CSS minimieren
- ungenutzten CSS-Code vermeiden
- Bilder in CSS-Sprites kombinieren
- GZIP Komprimierung aktivieren
- HTML (Quellcode) reduzieren
- Bilder optimieren
- Umleitungen/redirects minimieren
- Parallele Downloads – Ressourcen von Subdomain laden
- Zeichensatz angeben
- Bildabmessungen festlegen
- Anforderungsgröße minimieren
- Reihenfolge der Formate und Skripts optimieren
- Fehlerhafte Anforderungen vermeiden
- JavaScript später parsen
- Asynchrones Laden (CSS und JS Scripte)
- Sichtbare Inhalte priorisieren
- Webfonts optimieren
Die folgenden PageSpeed Punkt werden aktuell noch nicht in den Analysen mit berücktsichtig, bieten jedoch ebenfalls Potential um die Ladezeit/Performance einer Webseite zu verbessern:
Page Speed Tipps
Die Tipps zum Thema Page Speed (Ladezeit und Performance) Optimierung lassen sich auf wenige Stichpunkte zusammenfassen:
- verwende Content Delivery Network's (wenn möglich für CSS und JS-Dateien)
- verringere die Anzahl an http Request's
- füge Expires Header hinzu
- nutze GZIP Komprimierung (am besten für alle Dateien)
- optimiere und komprimiere verwendete Dateien (JS, CSS, Bilder, HTML)
- lagere CSS und JS in eigene Dateien aus, füge sie nicht in den Quelltext ein
- vermeide Weiterleitungen
- verwende ETags
- entferne ungenutzten, doppelten und nicht verwendeten Code (Kommentare, etc.)
- aktiviere den Cache (für Templates, Dateien, etc.), z.B. mittels .htaccess
- verlinke CSS-Style-Dateien im HEAD-Bereich und JavaScript-Dateien von dem schließenden BODY-Tag
- minimiere alle HTML-Befehle, reduziere so Zeilenumbrüche
- verwende async und defer für Javascripit-Einbindungen
- kurzer Ordnernamen sind besser als lange, z.B. verwende js anstelle von javascript
- kombiniere mehrere CSS- und Javascript-Dateien jeweils zu einer Datei(z.B. mittels PHP)
- verzichte auf @import-Befehle für CSS-Dateien
- nutze CSS-Sprites für viele kleine Bilder
- verzichte auf data: Angaben in CSS-Dateien
- binde im Quellcode immer Bilder mit der richtigen Größe ein
- optimiere die eingebundenen Bilder (achte auf deren Größe)
