Cover

Inhalt

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

Die Autoren:

Gregor Meier, Feldkirch (Österreich)

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 Markenschutz­Gesetzgebung 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.

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.

1Einleitung