pagespeed für einsteiger seo day 2014
Post on 08-Jul-2015
810 Views
Preview:
DESCRIPTION
TRANSCRIPT
www.fairrank.de
PAGE SPEED OPTIMIERUNGFÜR EINSTEIGER
Franz Hernschier
Murat Özdemir
FAIRRANK GmbH
www.fairrank.de
WER WIR SIND
Murat ÖzdemirSEO-Projektleiter
Franz HernschierSEO-Manager
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
www.fairrank.de
PageSpeed
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
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
www.fairrank.de
STATS & FACTS - AMAZONSteigerung des Umsatzes um 1% je 100ms
100 ms
1 %
Quelle: http://www.strangeloopnetworks.com
www.fairrank.de
STATS & FACTS - YAHOO9% mehr Traffic je 400ms Verbesserung der Ladezeit
400 ms
9
%
Quelle: http://www.strangeloopnetworks.com
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
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
www.fairrank.de
TOP 5
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!
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
www.fairrank.de
REQUESTS REDUZIEREN
Zusammenführung von statischen Dateien
3
2-8 Anfragenparallel, je nach
Browser
Anzahl Anfragen
CSS Dateien
JS-Dateien
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
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">
www.fairrank.de
REQUESTS REDUZIEREN
CSS-Sprites
3
16 Requests => 1 Request 23 kB => 19 kB
Quelle: http://designyourweb.info/
www.fairrank.de
REQUESTS REDUZIEREN
CSS-Sprites
3
Quelle: http://designyourweb.info/
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
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
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
www.fairrank.de
UND NOCH
MEHR…
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)
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
www.fairrank.de
AUSBLICK
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…
www.fairrank.de
WIR HOFFEN, DASS ES
EUCH GEFALLEN HAT!
Murat Özdemirm.oezdemir@fairrank,de
Franz Hernschierf.hernschier@fairrank.de
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
top related