Pagespeed Optimierung E-Book

Gregor Meier

• Herausgeber: Hanser, Carl
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2016

Seitenzahl: 179

Beschreibung

Geschwindigkeit ist ein wichtiger Faktor für den Erfolg Ihrer Website oder Ihres Blogs. Sowohl für den Besucher, der auf den Seitenaufbau nicht lange warten will, als auch für das Ranking bei Google spielt Geschwindigkeit eine Rolle.Praktisch und verständlich zeigt Ihnen dieses Buch, mit welchen Techniken Sie die Performance Ihrer Site selbst optimieren können, und zwar ohne Programmierkenntnisse. Beispiele und Expertentipps helfen Ihnen bei der Umsetzung.Aus dem Inhalt: Wie funktioniert eine Webseite // Werkzeuge für die Pagespeed-Optimierung // VorbereitungBilder optimieren // CSS optimieren // JavaScript optimieren // HTML optimieren // Schriftarten optimieren // Komprimieren // Rendering (Aufbau der Seite im Browser) // Zwischenspeichern (Cache) // Webserver optimieren // HTTPS-Seiten Ladezeit optimieren // Responsive Design

Leseprobe

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.

© 2016 Carl Hanser Verlag Münchenwww.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

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.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

1Einleitung

Ein guter Tag beginnt mit einer schnellen Webseite. Warum eigentlich? Sie haben vermutlich eine Webseite, auf der Sie Ihr wunderbares Unternehmen, Ihre hochwertige Dienstleistung oder Ihre innovativen Produkte vorstellen. Ich möchte Ihre Produkte gerne kaufen oder Ihre Dienstleistung in Anspruch nehmen. Aber ich warte nicht gerne ‒ und da bin ich nicht der Einzige.

Je langsamer eine Seite lädt, desto mehr Benutzer springen ab. Ab einer Sekunde Ladezeit verlieren die Besucher den Fokus. Die Gedanken schweifen ab und das ist ein Conversion-Killer.

1.1 Machen Sie aus Ihrer Website einen Ferrari