| 1 Einleitung | 12 |
| 1.1 Machen Sie aus Ihrer Website einen Ferrari | 12 |
| 1.2 Zielgruppe | 13 |
| 1.3 Beispiele | 15 |
| 1.4 Warum Sie aus Ihrer Webseite einen Ferrari machen sollten | 18 |
| 1.4.1 Mehr Pagespeed = mehr Besucher | 18 |
| 1.4.2 Mehr Pagespeed = weniger Absprünge (Bounce Rate) | 18 |
| 1.4.3 Mehr Pagespeed = mehr besuchte Seiten | 19 |
| 1.4.4 Mehr Pagespeed = mehr Umsatz | 20 |
| 1.5 Vorgehen | 22 |
| 2 Wie kommt eine Webseite auf unseren Computer? | 24 |
| 2.1 Anfrage des Browsers an den Webserver | 24 |
| 2.2 Behandlung des Requests auf dem Server | 25 |
| 2.3 Übertragung | 26 |
| 2.4 Anzeigen der Seite im Browser (Rendering) | 27 |
| 3 Werkzeuge für die Pagespeed-Optimierung | 30 |
| 3.1 Google PageSpeed Insights | 30 |
| 3.2 WebPageTest | 32 |
| 3.3 Test der Internetanbindung eines Webservers | 34 |
| 3.4 Welche Ladezeit ist gut? | 35 |
| 3.5 Mit FTP eine Webseite bearbeiten | 35 |
| 3.6 Mit SSH auf einen Webserver zugreifen | 36 |
| 3.7 Vorbereitung | 38 |
| 4 Bilder optimieren | 40 |
| 4.1 Die richtige Bildgröße | 40 |
| 4.2 Unterschiedliche Bildgrößen für unterschiedliche Geräte | 43 |
| 4.3 Welches Bildformat ist das schnellste? | 45 |
| 4.4 WebP: das richtige Dateiformat | 45 |
| 4.4.1 Wie kann man WebP-Bilder erstellen? | 45 |
| 4.4.2 Fallback im CSS | 47 |
| 4.4.3 Fallback in HTML 5 | 48 |
| 4.4.4 Per .htacces unterschiedliches Bild ausliefern | 48 |
| 4.5 Bilder komprimieren | 48 |
| 4.6 Bildgrößen angeben | 53 |
| 4.7 CSS statt einem Bild | 54 |
| 4.8 Image-Map | 55 |
| 4.9 Seiten mit sehr vielen und sehr großen Bildern | 55 |
| 4.10 Bilder verzögert laden | 55 |
| 4.11 Favicon optimieren | 56 |
| 4.12 Unicode statt Grafiken | 57 |
| 5 HTML optimieren | 60 |
| 5.1 Die aktuelle HTML-Version verwenden | 60 |
| 5.2 Auf Validität des HTML-Codes achten | 61 |
| 5.3 Keine externen Elemente einbinden | 62 |
| 5.3.1 Bilder kopieren | 62 |
| 5.3.2 DNS-Prefetch | 62 |
| 5.3.3 Externe Elemente verzögert laden | 63 |
| 5.4 Frames vermeiden | 63 |
| 5.5 Weiterleitung vermeiden | 63 |
| 5.6 HTML reduzieren | 64 |
| 5.7 Sichtbare Inhalte priorisieren | 65 |
| 5.8 Fehlerhafte Anfragen vermeiden | 66 |
| 5.9 Schriftarten optimieren | 67 |
| 5.10 Websichere Schriften verwenden | 68 |
| 5.11 Cookies vermeiden | 69 |
| 5.11.1 Was sind Cookies? | 69 |
| 5.11.2 Ausgleich zwischen Pagespeed und Benutzerfreundlichkeit? | 70 |
| 7 CSS optimieren | 72 |
| 6.1 Was ist CSS? | 72 |
| 6.2 CSS-Dateien reduzieren (minify) | 73 |
| 6.3 CSS-Dateien zusammenfassen und/oder inline einbinden | 75 |
| 6.4 Wordpress – Deque CSS | 77 |
| 6.5 print.css, mobile.css usw. nicht auf allen Seiten mitladen | 78 |
| 6.6 Ungenutzte CSS-Styles entfernen | 79 |
| 6.6.1 unused-css.com | 79 |
| 6.6.2 Dust-Me | 80 |
| 6.7 CSS-Import vermeiden | 82 |
| 6.8 CSS nicht immer inline einbinden – aber wenn es sinnvoll ist | 82 |
| 6.9 CSS nicht innerhalb von style-Attributen verwenden | 83 |
| 6.10 CSS Sprites | 84 |
| 7 JavaScript optimieren | 86 |
| 7.1 Was ist JavaScript (JS)? | 86 |
| 7.2 JavaScript reduzieren | 86 |
| 7.2.1 Wie müssen Sie vorgehen? | 87 |
| 7.2.2 Externe Dateien | 88 |
| 7.3 Nicht benötigtes JavaScript entfernen | 89 |
| 7.4 jQuery optimieren | 90 |
| 7.5 JavaScript zusammenfassen | 91 |
| 7.6 JS-Optimierung automatisieren mit GruntJS | 92 |
| 7.7 JavaScript verzögert laden | 94 |
| 7.8 JavaScript vs. CSS | 95 |
| 7.9 Ladezeit von Benutzern ermitteln | 96 |
| 8 Komprimieren | 98 |
| 8.1 Was ist Datenkomprimierung? | 98 |
| 8.2 Wie können wir mit Komprimierung unsere Webseite beschleunigen? | 99 |
| 8.3 gzip auf Apache Webservern | 99 |
| 8.3.1 Komprimierung mit mod_gzip | 100 |
| 8.3.2 Komprimierung mit mod_deflate | 100 |
| 8.4 gzip funktioniert nicht | 101 |
| 8.4.1 Shared Hosting | 101 |
| 8.4.2 gzip und deflate installieren | 101 |
| 8.5 gzip auf Windows-Servern | 103 |
| 9 Critical Rendering Path | 104 |
| 9.1 Was ist der Critical Rendering Path? | 104 |
| 9.2 Wie baut sich eine Seite auf? (Rendering) | 106 |
| 9.3 CSS in Kritisch und Nichtkritisch unterteilen | 106 |
| 9.4 Prefetch und Prerender | 108 |
| 9.4.1 DNS-Prefetch | 109 |
| 9.4.2 Prefetch | 109 |
| 9.4.3 Prerender | 110 |
| 10 Zwischenspeichern (Cache) | 112 |
| 10.1 Was ist ein Cache? | 112 |
| 10.2 Browser-Cache | 112 |
| 10.3 Server-Cache | 116 |
| 10.4 Wie können wir den Server-Cache nutzen? | 117 |
| 10.4.1 WP Super Cache | 117 |
| 10.4.2 W3 Total Cache | 120 |
| 10.4.3 Externer Server-Cache | 122 |
| 10.4.4 Cashing mit Varnish | 122 |
| 10.4.5 Statische Seite | 127 |
| 11 CDN – Content Delivery Networks | 132 |
| 11.1 Was ist ein CDN? | 132 |
| 11.2 Wie richtet man ein CDN ein? | 134 |
| 12 Webserver optimieren | 136 |
| 12.1 Sie brauchen keinen teuren Server! | 136 |
| 12.2 Hardware | 137 |
| 12.2.1 Arbeitsspeicher (RAM) | 137 |
| 12.2.2 Prozessoren und Prozessorkerne | 138 |
| 12.2.3 Festplatten | 138 |
| 12.3 Software | 139 |
| 12.3.1 Betriebssystem | 139 |
| 12.3.2 Webserver-Software | 139 |
| 12.4 Webserver-Performance steigern | 140 |
| 12.4.1 Shared-Hosting | 141 |
| 12.4.2 Ein eigener Server? | 142 |
| 12.4.3 Webserver auf Nginx wechseln | 144 |
| 12.4.4 Webserver auf Litespeed wechseln | 147 |
| 12.4.5 Keep Alive | 149 |
| 12.5 Unnötige Anfragen blockieren | 150 |
| 12.5.1 Wie kann man erkennen, dass eine Seite von vielen Crawlern besucht wird? | 150 |
| 12.5.2 Wie kann man unerwünschte Crawler und Spam-Bots fernhalten? | 152 |
| 13 Responsive Design | 154 |
| 13.1 Warum responsive Design? | 154 |
| 13.2 Webseite responsive machen | 155 |
| 13.3 Abhängigkeiten vermeiden | 155 |
| 13.4 Lösungsansätze | 156 |
| 13.4.1 Elternelement ausblenden | 156 |
| 13.4.2 Weiterleitung auf eine mobile Seite | 156 |
| 13.4.3 Mit JavaScript Bilder erkennen | 157 |
| 13.5 Viewport | 158 |
| 13.6 Bilder anpassen | 159 |
| 14 Ladezeit von HTTPS-Seiten optimieren | 160 |
| 14.1 Was ist HTTPS? | 160 |
| 14.1.1 Identifizierung | 161 |
| 14.1.2 Verschlüsselung | 162 |
| 14.2 SSL beschleunigen | 163 |
| 14.2.1 HTTPS nicht auf allen Seiten verwenden | 163 |
| 14.2.2 HTTPS-Handshake auf einem anderen Server durchführen | 164 |
| 14.2.3 Server updaten | 164 |
| 14.2.4 False Start | 166 |
| 14.2.5 Weiterleitungen vermeiden | 167 |
| 14.2.6 HSTS | 167 |
| 15 Blick in die Zukunft | 170 |
| 15.1 BPG-Bildformat | 170 |
| 15.2 Google Transcode | 171 |
| 15.3 Accelerated Mobile Pages | 172 |
| 16 Fazit | 174 |
| Index | 176 |
