1 E inleitung Rate)... ר Mehr Pagespeed = mehr besuchte Seiten Mehr Pagespeed = mehr Umsatz

Transkript

1 Inhalt 1 E inleitung Machen Sie aus Ihrer Website einen F errari Zielgruppe Beispiele Warum Sie aus Ihrer Webseite einen Ferrari machen sollten ר Mehr Pagespeed = mehr Besucher... ר Mehr Pagespeed = weniger Abspriinge (Bounce Rate) ר Mehr Pagespeed = mehr besuchte Seiten Mehr Pagespeed = mehr Umsatz Vorgehen 11 2 Wie kommt eine Webseite auf unseren Computer? Anrrage des Browsers an den Webserver Behandlung des Requests auf dem Server Übertragung Anzeigen der Seite im Browser R 10 3 Werkzeuge für die Pagespeed-Optimlerung Google PageSpeed In sig h ts WebPageTest Test der Internetanbindung eines W fe Welche Ladezeit ist gut? M it FTP e in Webseite bearbeiten M it SSH auf einen Webserver zugreifen Vorbereitung Bilder optim ieren Die richtige Bildgröße Unterschiedliche Bildgrößen für unterschiedliche Gerate Welches Bildformat ist das schnellste?... 34

2 4.4 WebP: das richtige Dateiformat Wie kann man WebP-Bilder erstellen? Fallback im CSS... 3Ó Fallback in HTML Per.htacces unterschiedliches Bild ausliefern Bilder kom prim ieren Bildgrößen angeben CSS siati einem B ild Image-Map Seiten m it sehr vielen und sehr großen B ildern Bilder verzögert la d e n Favicon optimieren Unicode statt G rafiken... 4Ó 5 HTML optim ieren Die aktuelle HTML-Version verwenden Auf Validität des HTML-Codes achten Ypinp pinhindpn Bilder ko piere n DNS-Prefetch Externe Elemente verzögert laden Frames verm eiden Weiterleitung verm eiden HTML reduzieren Sichtbare Inhalte priorisieren Fehlerhafte A n a g e n v e rm e d Schriftarten optim ieren... 5Ó 5.1 Websichere Schriften verwenden Cookies vermeiden Was sind Cookies? Ausgleich zwischen Pagespeed und Benutzerfreundlichkeit? CSS optimieren Was ist CSS? CSS-Dateien reduzieren (minify) CSS-Dateien zusammenfassen und/oder inline einbinden Wordpress - Deque CSS print.css,mobile.css usw. nicht auf allen Seiten mitladen Ó.Ó Ungenutzte CSS-Styles entfernen... Ó8 Ó.Ó.1 unused-css.com... Ó Dust-Me... Ó9 0.7 CSS-Import vermeiden CSS nicht immer inline einbinden - aber wenn es sinnvoll is t... 71

3 V inhalt 0.9 CSS nicht innerhalb von Style-Attributen verwenden CSS S p rites JavaScript optimieren Was ist JavaScript (JS)? JavaScript reduzieren Wie müssen Sie vorgehen?... 7Ó Externe Dateien Nicht benötigtes JavaScript entfernen Query optimieren JavaScript zusammenfassen JS-Optimierung automatisieren mit GruntJS JavaScript verzögert laden JavaScript VS. CSS Ladezeit von Benutzern ermita Komprimieren Was ist Datenkomprimierung? Wie können w ir m it Komprimierung unsere Webseite beschleunigen? gzip auf Apache Webservern Komprimierung mit mod_gzip Komprimierung m it mod deflate gzip funktioniert n ic h t Shared Hosting gzip und deflate installieren gzip auf Windows-Servern Critical In d erin g P ath Was ist der Critical Rendering P h WiP h u t drh pinp gphp ails? CSS in Kritisch und Nichtkritisch unterteilen PrefeGh und Prerender DNS-Prefetch Prefetch Prerender Zwischenspeichero {Cache) Was ist ein Cache? Browser-Cache Server-Cache Wie können w ir den Server-Cache nutzen? WP Super Cache W3 Total Cache Externer Server-Cache

4 VI Inhalt Cashing mit Varnish... I l l Statische Seite CDN 一 Content Deỉỉverỵ Networks Was ist ein CDN? WiP rishtpt тдп Ρ1 η s l M " Webserver optimieren ςίρ hraiishp^ крщрп tßurßn qprvpri Hardware Arbeitsspeicher (RAM ) Prozessoren und Prozessorkerne Festplatten Software Betriebssystem Webserver-Software Webserver-Performance steigern ء Shared-Hosting Ein e ig ner Server? Webserver auf Nginx wechseln Webserver auf Litespeed wechseln Keep Alive Unnötige Anfragen blockieren Wie kann man erkennen,dass eine Seite von vielen Crawlern besuch wird? Wie kann man unerwünschte Crawler und Spam-Bots fernhalten? Responsive Design Warum responsive Design? Webseite responsive machen Abhängigkeiten verm eiden Losungsansätze Elternelement ausblenden Wpitprlpitimg aììfpi^p mnhilp ςρτίρ M it JavaScript Bilder erkennen V ie w p o rt Bilder anpassen Ladezeit von HTTPS-Seiten optimieren Was ist HTTPS? Identifizierung Verschlüsselung SSL beschleunigen HTTPS nicht auf allen Seiten v e r w d HTTPS-Handshake auf einem anderen Server durchfahren

5 inhalt Server updaten False Start Weiterleitungen verm eiden HSTS Blick in die Zukunft BPG-Bildformat Google Transcode Accelerated Mobile Pages Fazit In d e x...165