Tipps und Tricks 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 und dem verwendeten CMS abhängig und nicht jedes Projekt liegt auf einem eigenen Server mit vollen Konfigurationsmöglichkeiten.
Wer die Punkte zur PageSpeed Optimierung nach und nach durchgeht, der kann somit nicht nur seine Webseite verbessern, sondern auch Traffic sparen und die Ladezeit für den Besucher verringern.
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)