PageSpeed für Einsteiger SEO Day 2014

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

description

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

Transcript of PageSpeed für Einsteiger SEO Day 2014

Page 1: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

PAGE SPEED OPTIMIERUNGFÜR EINSTEIGER

Franz Hernschier

Murat Özdemir

FAIRRANK GmbH

Page 2: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

WER WIR SIND

Murat ÖzdemirSEO-Projektleiter

Franz HernschierSEO-Manager

Page 3: PageSpeed für Einsteiger SEO Day 2014

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

Page 4: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

PageSpeed

Page 5: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

EINFLÜSSE DES PAGESPEEDSWarum der PageSpeed wichtig ist

Benutzerfreundlichkeit

Google Ranking Faktor

Kosten reduzieren

Umsatzsteigerung

Besseres Nutzererlebnis, längereVerweildauer

Einsparen von Speicherplatz und Bandbreite

Mehr Kaufabschlüsse

1

2

3

4

Bessere Auffindbarkeit und Crawlbarkeit

Page 6: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

STATS & FACTS - SHOPZILLALadezeit von 6s auf 1,2s verringert

12 % mehr Umsatz

1,2

s

12 %

25 % mehr Page Impressions

25 %

6 s

Quelle: http://www.strangeloopnetworks.com

Page 7: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

STATS & FACTS - AMAZONSteigerung des Umsatzes um 1% je 100ms

100 ms

1 %

Quelle: http://www.strangeloopnetworks.com

Page 8: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

STATS & FACTS - YAHOO9% mehr Traffic je 400ms Verbesserung der Ladezeit

400 ms

9

%

Quelle: http://www.strangeloopnetworks.com

Page 9: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

STATS & FACTS - MOZILLALadezeit um 2,2 Sekunden reduziert, 60 Millionen Downloads im Jahr mehr

60 Mio /

Jahr

2,2s

Quelle: http://www.strangeloopnetworks.com

Page 10: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

INFRASTRUKTURSolide Basis als Voraussetzung

Der Server sollte in einem Rechenzentrum des Landes eurer Besucher stehen um hohe Latenzenzu vermeiden

Im Vorfeld ausreichend dimensionierte Hardware um auch kurzfristige Leistungs-Peaks abzufangen

Nicht genutze Software/Module auf OS- oder Webserverbasis deaktivieren.Auf CMS/Shop Ebene nicht genutzte Plugins oder Module deaktivieren und aktuelle Versionen nutzen.

SOFTWARE

ANBINDUNG

HARDWARE

Page 11: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

TOP 5

Page 12: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

WEITERLEITUNGENWeiterleitungen vermeiden

5

m.deineseite.de/startseitem.deineseite.dewww.deineseite.dedeineseite.de

SCHLECHT

deineseite.de/startseitedeineseite.de

AKZEPTABEL

deineseite.de

GUT

ZU LANGE WEITERLEITUNGSKETTEN UNBEDINGT VERMEIDEN!

Page 13: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

BROWSER CACHINGImages, CSS, JS, PDF usw.

4

STEUERUNG

Über Apache Modulmod_headers oder

mod_expires. Alternativhttpd.conf / PHP

CACHING

Ressourcen dauerhaftbzw. mit Verfallsdatum

im Browser-Cache speichern

MANAGEMENT

NachträglicheÄnderungen durchVersionierung oder

geänderteDateibezeichnung

Page 14: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

REQUESTS REDUZIEREN

Zusammenführung von statischen Dateien

3

2-8 Anfragenparallel, je nach

Browser

Anzahl Anfragen

CSS Dateien

JS-Dateien

Page 15: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

REQUESTS REDUZIEREN

Zusammenführung von statischen Dateien

3

Massiv reduziert

Anzahl Anfragen

Jeweils zusammengeführt

CSS & JS Dateien

Dateigröße & Ladezeit

Massiv reduziert

Page 16: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

REQUESTS REDUZIEREN

CSS- & JS-Dateien

3

datei1-2-3.css

datei3.css

datei1.css

datei2.css Aus…

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

Page 17: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

REQUESTS REDUZIEREN

CSS-Sprites

3

16 Requests => 1 Request 23 kB => 19 kB

Quelle: http://designyourweb.info/

Page 18: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

REQUESTS REDUZIEREN

CSS-Sprites

3

Quelle: http://designyourweb.info/

Page 19: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

KOMPRIMIERUNG AKTIVIERENAktivierung über .htaccess oder httpd.conf

mod_gzip mod_deflate

Apache HTTP Server 1.3.x und 2.0.x

Gzip-Komprimierung

Kompressionslevel zwischen 1 und 9 (Standard ist 6) einstellbar

Apache HTTP Server 2.0.x

Komprimiert nach LZ77 Algorithmus und Huffmancoding

Dateien kleiner als ~120 bytes können größer ausfallen

2

Page 20: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

KOMPRIMIERUNG AKTIVIERENKeyfacts

Mod_deflate ist einfacher zu konfigurieren und performanter (keine temporären Dateien)

Mod_gzip ist leistungsstärker (z.B. kann man content vorkomprimieren)

Komprimierung 30% - 40%

2

Page 21: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

BILDER KOMPRIMIEREN

BILDAUSWAHL

Keine BMP oder TIFF DateienPNG besser geeignet als GIFGIF nur für sehr kleine Bilder JPG für Bilder in Fotoqualität

GRUNDLEGENDE OPTIMIERUNG

(VERLUSTFREIE) KOMPRIMIERUNG

PhotoshopJPegMiniPNGGauntlet

1

3

2

1

Wegschneiden unnötiger BildteileFarbtiefe verringern Entfernen von Bildkommentaren / Metadaten / Chunks

Page 22: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

UND NOCH

MEHR…

Page 23: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

SPARPOTENTIAL ANALYSEAm Beispiel von Koeln.de

Sparpotenzial für Startseite / Aufruf

423,6 KB (27 %)

Online-Reichweite im August 2014Seitenabrufe / Monat: 19.561.033

Besuche / Monat: 1.972.620

Quelle: IVW, Stand: 20.10.2014

pro Tag

pro Monat

pro Jahr

0 200 GB … 600 GB100 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)

Page 24: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

WEITERE OPTIMIERUNGEN

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

Page 25: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

AUSBLICK

Page 26: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

AUSBLICK

Neue Standards

(z.B. SPDY / HTTP/2.0)

Prerendering / PrefetchingBigPipe

Iconfonts

Vorabrufen und Vorabrendern von Inhalten

Mehr Performance durch Multiplexing und Pipelining

Fonts ersetzen Images

Partielle Auslieferung der Seiten und parallelisierte Ladevorgänge

Neue und erweiterte

Techniken

Und was es sonst so gibt…

Page 27: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

WIR HOFFEN, DASS ES

EUCH GEFALLEN HAT!

Murat Özdemirm.oezdemir@fairrank,de

Franz [email protected]

Page 28: PageSpeed für Einsteiger SEO Day 2014

www.fairrank.de

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