Zu Hanser-Fachbuch.de
Warenkorb
Gregor Meier
Pagespeed Optimierung
Schritt für Schritt zur schnelleren Website
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
© 2009-2024 ciando GmbH