Titelei
Impressum
Inhalt
1 Einleitung
1.1 Machen Sie aus Ihrer Website einen Ferrari
1.2 Zielgruppe
1.3 Beispiele
1.4 Warum Sie aus Ihrer Webseite einen Ferrari machen sollten
1.4.1 Mehr Pagespeed = mehr Besucher
1.4.2 Mehr Pagespeed = weniger Absprünge (Bounce Rate)
1.4.3 Mehr Pagespeed = mehr besuchte Seiten
1.4.4 Mehr Pagespeed = mehr Umsatz
1.5 Vorgehen
2 Wie kommt eine Webseite auf unseren Computer?
2.1 Anfrage des Browsers an den Webserver
2.2 Behandlung des Requests auf dem Server
2.3 Übertragung
2.4 Anzeigen der Seite im Browser (Rendering)
3 Werkzeuge für die Pagespeed-Optimierung
3.1 Google PageSpeed Insights
3.2 WebPageTest
3.3 Test der Internetanbindung eines Webservers
3.4 Welche Ladezeit ist gut?
3.5 Mit FTP eine Webseite bearbeiten
3.6 Mit SSH auf einen Webserver zugreifen
3.7 Vorbereitung
4 Bilder optimieren
4.1 Die richtige Bildgröße
4.2 Unterschiedliche Bildgrößen für unterschiedliche Geräte
4.3 Welches Bildformat ist das schnellste?
4.4 WebP: das richtige Dateiformat
4.4.1 Wie kann man WebP-Bilder erstellen?
4.4.2 Fallback im CSS
4.4.3 Fallback in HTML 5
4.4.4 Per .htacces unterschiedliches Bild ausliefern
4.5 Bilder komprimieren
4.6 Bildgrößen angeben
4.7 CSS statt einem Bild
4.8 Image-Map
4.9 Seiten mit sehr vielen und sehr großen Bildern
4.10 Bilder verzögert laden
4.11 Favicon optimieren
4.12 Unicode statt Grafiken
5 HTML optimieren
5.1 Die aktuelle HTML-Version verwenden
5.2 Auf Validität des HTML-Codes achten
5.3 Keine externen Elemente einbinden
5.3.1 Bilder kopieren
5.3.2 DNS-Prefetch
5.3.3 Externe Elemente verzögert laden
5.4 Frames vermeiden
5.5 Weiterleitung vermeiden
5.6 HTML reduzieren
5.7 Sichtbare Inhalte priorisieren
5.8 Fehlerhafte Anfragen vermeiden
5.9 Schriftarten optimieren
5.10 Websichere Schriften verwenden
5.11 Cookies vermeiden
5.11.1 Was sind Cookies?
5.11.2 Ausgleich zwischen Pagespeed und Benutzerfreundlichkeit?
6 CSS optimieren
6.1 Was ist CSS?
6.2 CSS-Dateien reduzieren (minify)
6.3 CSS-Dateien zusammenfassen und/oder inline einbinden
6.4 Wordpress ‒ Deque CSS
6.5 print.css, mobile.css usw. nicht auf allen Seiten mitladen
6.6 Ungenutzte CSS-Styles entfernen
6.6.1 unused-css.com
6.6.2 Dust-Me
6.7 CSS-Import vermeiden
6.8 CSS nicht immer inline einbinden ‒ aber wenn es sinnvoll ist
6.9 CSS nicht innerhalb von style-Attributen verwenden
6.10 CSS Sprites
7 JavaScript optimieren
7.1 Was ist JavaScript (JS)?
7.2 JavaScript reduzieren
7.2.1 Wie müssen Sie vorgehen?
7.2.2 Externe Dateien
7.3 Nicht benötigtes JavaScript entfernen
7.4 jQuery optimieren
7.5 JavaScript zusammenfassen
7.6 JS-Optimierung automatisieren mit GruntJS
7.7 JavaScript verzögert laden
7.8 JavaScript vs. CSS
7.9 Ladezeit von Benutzern ermitteln
8 Komprimieren
8.1 Was ist Datenkomprimierung?
8.2 Wie können wir mit Komprimierung unsere Webseite beschleunigen?
8.3 gzip auf Apache Webservern
8.3.1 Komprimierung mit mod_gzip
8.3.2 Komprimierung mit mod_deflate
8.4 gzip funktioniert nicht
8.4.1 Shared Hosting
8.4.2 gzip und deflate installieren
8.5 gzip auf Windows-Servern
9 Critical Rendering Path
9.1 Was ist der Critical Rendering Path?
9.2 Wie baut sich eine Seite auf? (Rendering)
9.3 CSS in Kritisch und Nichtkritisch unterteilen
9.4 Prefetch und Prerender
9.4.1 DNS-Prefetch
9.4.2 Prefetch
9.4.3 Prerender
10 Zwischenspeichern (Cache)
10.1 Was ist ein Cache?
10.2 Browser-Cache
10.3 Server-Cache
10.4 Wie können wir den Server-Cache nutzen?
10.4.1 WP Super Cache
10.4.2 W3 Total Cache
10.4.3 Externer Server-Cache
10.4.4 Cashing mit Varnish
10.4.5 Statische Seite
11 CDN ‒ Content Delivery Networks
11.1 Was ist ein CDN?
11.2 Wie richtet man ein CDN ein?
12 Webserver optimieren
12.1 Sie brauchen keinen teuren Server!
12.2 Hardware
12.2.1 Arbeitsspeicher (RAM)
12.2.2 Prozessoren und Prozessorkerne
12.2.3 Festplatten
12.3 Software
12.3.1 Betriebssystem
12.3.2 Webserver-Software
12.4 Webserver-Performance steigern
12.4.1 Shared-Hosting
12.4.2 Ein eigener Server?
12.4.3 Webserver auf Nginx wechseln
12.4.4 Webserver auf Litespeed wechseln
12.4.5 Keep Alive
12.5 Unnötige Anfragen blockieren
12.5.1 Wie kann man erkennen, dass eine Seite von vielen Crawlern besucht wird?
12.5.2 Wie kann man unerwünschte Crawler und Spam-Bots fernhalten?
13 Responsive Design
13.1 Warum responsive Design?
13.2 Webseite responsive machen
13.3 Abhängigkeiten vermeiden
13.4 Lösungsansätze
13.4.1 Elternelement ausblenden
13.4.2 Weiterleitung auf eine mobile Seite
13.4.3 Mit JavaScript Bilder erkennen
13.5 Viewport
13.6 Bilder anpassen
14 Ladezeit von HTTPS-Seiten optimieren
14.1 Was ist HTTPS?
14.1.1 Identifizierung
14.1.2 Verschlüsselung
14.2 SSL beschleunigen
14.2.1 HTTPS nicht auf allen Seiten verwenden
14.2.2 HTTPS-Handshake auf einem anderen Server durchführen
14.2.3 Server updaten
14.2.4 False Start
14.2.5 Weiterleitungen vermeiden
14.2.6 HSTS
15 Blick in die Zukunft
15.1 BPG-Bildformat
15.2 Google Transcode
15.3 Accelerated Mobile Pages
16 Fazit
Gregor Meier
Pagespeed Optimierung
Schritt für Schritt zur schnelleren Website
Alle in diesem Buch enthaltenen Informationen, Verfahren und Darstellungen wurden nach bestem Wissen zusammengestellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund sind die im vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autor und Verlag übernehmen infolgedessen keine juristische Verantwortung und werden keine daraus folgende oder sonstige Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen – oder Teilen davon – entsteht.
Ebenso übernehmen Autor und Verlag keine Gewähr dafür, dass beschriebene Verfahren usw. frei von Schutzrechten Dritter sind. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Buch berechtigt deshalb auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen und MarkenschutzGesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften.
Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.
Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Fotokopie, Mikrofilm oder ein anderes Verfahren) – auch nicht für Zwecke der Unterrichtsgestaltung – reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden.
© 2016 Carl Hanser Verlag München
www.hanser-fachbuch.de
Lektorat: Sieglinde Schärl
Copyediting: Sandra Gottmann, Münster-Nienberge
Herstellung: Irene Weilhart
Umschlagdesign: Marc Müller-Bremer, München, www.rebranding.de
Umschlagrealisation: Stephan Rönigk
Print-ISBN 978-3-446-44822-3
Epub-ISBN 978-3-446-45089-9
Verwendete Schriften: SourceSansPro und SourceCodePro (Lizenz)
CSS-Version: 1.0
Font License | Zurück zum Impressum |
Copyright 2010, 2012, 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL ----------------------------------------------------------- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ----------------------------------------------------------- PREAMBLE The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. DEFINITIONS "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. "Reserved Font Name" refers to any names specified as such after the copyright statement(s). "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. PERMISSION & CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
1 | Einleitung |