PageSpeed Optimierung für Einsteiger - SEO Day 2014 von Murat Özdemir und Franz Hernschier. In 5 Schritten zu einer schneller Website. http://www.fairrank.de http://francoseville.com

1. FAIRRANK GmbH
PAGE SPEED OPTIMIERUNG
FÜR EINSTEIGER
Franz Hernschier
Murat Özdemir
www.fairrank.de

2. WER WIR SIND
www.fairrank.de
Murat Özdemir
SEO-Projektleiter
Franz Hernschier
SEO-Manager

3. www.fairrank.de
AGENDA
Warum Sie mehr Speed brauchen
5 steps to speed up your site
Und es geht noch schneller…
01
02
03
04 Ausblick

4. PageSpeed
www.fairrank.de

5. EINFLÜSSE DES PAGESPEEDS
Warum der PageSpeed wichtig ist
Benutzerfreundlichkeit
Google Ranking Faktor
Kosten reduzieren
Umsatzsteigerung
www.fairrank.de
Besseres Nutzererlebnis, längere
Verweildauer
Einsparen von Speicherplatz und
Bandbreite
Mehr Kaufabschlüsse
1
2
3
4
Bessere Auffindbarkeit und
Crawlbarkeit

6. STATS & FACTS - SHOPZILLA
Ladezeit von 6s auf 1,2s verringert
www.fairrank.de
12 % mehr Umsatz
1,2
s
12 %
25 % mehr Page
Impressions
25 %
6 s
Quelle: http://www.strangeloopnetworks.com

7. STATS & FACTS - AMAZON
Steigerung des Umsatzes um 1% je 100ms
www.fairrank.de
100 ms
1 %
Quelle: http://www.strangeloopnetworks.com

8. STATS & FACTS - YAHOO
9% mehr Traffic je 400ms Verbesserung der Ladezeit
www.fairrank.de
400 ms
9
%
Quelle: http://www.strangeloopnetworks.com

9. STATS & FACTS - MOZILLA
Ladezeit um 2,2 Sekunden reduziert, 60 Millionen Downloads im Jahr mehr
60 Mio /
www.fairrank.de
Jahr
2,2s
Quelle: http://www.strangeloopnetworks.com

10. INFRASTRUKTUR
Solide Basis als Voraussetzung
Der Server sollte in einem
Rechenzentrum des Landes eurer
Besucher stehen um hohe Latenzen
zu vermeiden
www.fairrank.de
Im Vorfeld ausreichend
dimensionierte Hardware um auch
kurzfristige Leistungs-Peaks
abzufangen
SOFTWARE
Nicht genutze Software/Module auf
OS- oder Webserverbasis
deaktivieren.
Auf CMS/Shop Ebene nicht genutzte
Plugins oder Module deaktivieren und
aktuelle Versionen nutzen.
ANBINDUNG
HARDWARE

11. TOP 5
www.fairrank.de

12. WEITERLEITUNGEN
Weiterleitungen vermeiden
ZU LANGE WEITERLEITUNGSKETTEN UNBEDINGT VERMEIDEN!
GUT
deineseite.de
AKZEPTABEL
deineseite.de deineseite.de/startseite
www.fairrank.de
5
SCHLECHT
deineseite.de www.deineseite.de m.deineseite.de m.deineseite.de/startseite

13. BROWSER CACHING
Images, CSS, JS, PDF usw.
www.fairrank.de
4
STEUERUNG
ÜberApache Modul
mod_headers oder
mod_expires. Alternativ
httpd.conf / PHP
CACHING
Ressourcen dauerhaft
bzw. mitVerfallsdatum
im Browser-Cache
speichern
MANAGEMENT
Nachträgliche
Änderungen durch
Versionierung oder
geänderte
Dateibezeichnung

14. REQUESTS REDUZIEREN
Zusammenführung von statischen Dateien
www.fairrank.de
3
Anzahl Anfragen
2-8 Anfragen
parallel, je nach
Browser
CSS Dateien
JS-Dateien

15. REQUESTS REDUZIEREN
Zusammenführung von statischen Dateien
www.fairrank.de
3
Anzahl Anfragen
Massiv reduziert
CSS & JS
Dateien
Jeweils zusammengeführt
Dateigröße & Ladezeit
Massiv reduziert

16. REQUESTS REDUZIEREN
CSS- & JS-Dateien
datei2.css Aus…
www.fairrank.de
3
datei3.css
datei1.css
datei1-2-3.css
<link rel="stylesheet" href=datei1.css">
<link rel="stylesheet" href=„datei2.css">
<link rel="stylesheet" href=„datei3.css">
Wird…
<link rel="stylesheet" href=„datei1-2-3.css">

17. REQUESTS REDUZIEREN
CSS-Sprites
www.fairrank.de
3
Quelle: http://designyourweb.info/
16 Requests => 1 Request 23 kB => 19 kB

18. REQUESTS REDUZIEREN
CSS-Sprites
www.fairrank.de
3
Quelle: http://designyourweb.info/

19. KOMPRIMIERUNG AKTIVIEREN
Aktivierung über .htaccess oder httpd.conf
mod_gzip mod_deflate
Komprimiert nach LZ77 Algorithmus und Huffman
www.fairrank.de
Apache HTTP Server 1.3.x und 2.0.x
Gzip-Komprimierung
Apache HTTP Server 2.0.x
coding
Kompressionslevel zwischen 1 und 9 (Standard ist 6)
einstellbar
Dateien kleiner als ~120 bytes können größer ausfallen
2

20. KOMPRIMIERUNG AKTIVIEREN
Keyfacts
www.fairrank.de
Komprimierung 30% - 40%
Mod_deflate ist einfacher zu konfigurieren und
performanter (keine temporären Dateien)
Mod_gzip ist leistungsstärker (z.B. kann man
content vorkomprimieren)
2

21. BILDER KOMPRIMIEREN
www.fairrank.de
BILDAUSWAHL
Keine BMP oder TIFF Dateien
PNG besser geeignet als GIF
GIF nur für sehr kleine Bilder
JPG für Bilder in Fotoqualität
GRUNDLEGENDE
OPTIMIERUNG
(VERLUSTFREIE)
KOMPRIMIERUNG
Photoshop
JPegMini
PNGGauntlet
1
3
2
1
Wegschneiden unnötiger Bildteile
Farbtiefe verringern
Entfernen von Bildkommentaren /
Metadaten / Chunks

22. UND NOCH
MEHR…
www.fairrank.de

23. SPARPOTENTIAL ANALYSE
Am Beispiel von Koeln.de
Sparpotenzial für Startseite / Aufruf
423,6 KB (27 %)
www.fairrank.de
Online-Reichweite im August 2014
Seitenabrufe / Monat: 19.561.033
Besuche / Monat: 1.972.620
Quelle: IVW, Stand: 20.10.2014
pro Tag
pro Monat
pro Jahr
0 100 GB 200 GB … 600 GB 700 GB … 6 TB 7 TB 8 TB
~ 20 GB
~ 605 GB
~ 7,2 TB
Rechnung
Sparpotenzial * Geschätzte Unique Visitors = Gesparte Datenmenge
(Geschätzte Unique Visitors = 50.000)

24. WEITERE OPTIMIERUNGEN
www.fairrank.de
Keep-alive aktivieren
Skalierte Bilder bereitstellen
CDN oder Subdomain
verwenden
width und height
verwenden
kein inline-Style sowie JS
Inhalte per AJAX nachladen
Datenbanken optimieren
JS & CSS Minify

25. AUSBLICK
www.fairrank.de

26. AUSBLICK
Und was es sonst so gibt…
Neue Standards
(z.B. SPDY / HTTP/2.0)
Mehr Performance durch Multiplexing
und Pipelining
PartielleAuslieferung der Seiten und
parallelisierte Ladevorgänge
Neue und erweiterte
BigPipe Prerendering / Prefetching
Iconfonts
www.fairrank.de
Vorabrufen und Vorabrendern von
Inhalten
Fonts ersetzen Images
Techniken

27. WIR HOFFEN, DASS ES
EUCH GEFALLEN HAT!
www.fairrank.de
Murat Özdemir
m.oezdemir@fairrank,de
Franz Hernschier
f.hernschier@fairrank.de

28. Bildnachweise
Bild in Slide 3 - nicholasjon @ flickr.com
https://www.flickr.com/photos/nicholasjon/4498088305
Bild in Slide 4 – KNLphotos2010 @ flickr.com
https://www.flickr.com/photos/knlphotos/4876774117
Bild in Slide 11 - Michaelroper @ flickr.com
https://www.flickr.com/photos/michaelroper/2611673
Bild in Slide 22 - Shreyans Bansali @ flickr.com
https://www.flickr.com/photos/thebigdurian/118602801
Bild in Slide 25 - aurelio.aisain @ flickr.com
https://www.flickr.com/photos/ionushi/2051249439
Bilder in Slide 17, 18 - designyourweb.info
http://designyourweb.info/mit-css-sprites-die-website-performance-steigern/801
www.fairrank.de