FAIRRANK GmbH 
PAGE SPEED OPTIMIERUNG 
FÜR EINSTEIGER 
Franz Hernschier 
Murat Özdemir 
www.fairrank.de
WER WIR SIND 
www.fairrank.de 
Murat Özdemir 
SEO-Projektleiter 
Franz Hernschier 
SEO-Manager
www.fairrank.de 
AGENDA 
Warum Sie mehr Speed brauchen 
5 steps to speed up your site 
Und es geht noch schneller… 
01 
02...
PageSpeed 
www.fairrank.de
EINFLÜSSE DES PAGESPEEDS 
Warum der PageSpeed wichtig ist 
Benutzerfreundlichkeit 
Google Ranking Faktor 
Kosten reduziere...
STATS & FACTS - SHOPZILLA 
Ladezeit von 6s auf 1,2s verringert 
www.fairrank.de 
12 % mehr Umsatz 
1,2 
s 
12 % 
25 % mehr...
STATS & FACTS - AMAZON 
Steigerung des Umsatzes um 1% je 100ms 
www.fairrank.de 
100 ms 
1 % 
Quelle: http://www.strangelo...
STATS & FACTS - YAHOO 
9% mehr Traffic je 400ms Verbesserung der Ladezeit 
www.fairrank.de 
400 ms 
9 
% 
Quelle: http://w...
STATS & FACTS - MOZILLA 
Ladezeit um 2,2 Sekunden reduziert, 60 Millionen Downloads im Jahr mehr 
60 Mio / 
www.fairrank.d...
INFRASTRUKTUR 
Solide Basis als Voraussetzung 
Der Server sollte in einem 
Rechenzentrum des Landes eurer 
Besucher stehen...
TOP 5 
www.fairrank.de
WEITERLEITUNGEN 
Weiterleitungen vermeiden 
ZU LANGE WEITERLEITUNGSKETTEN UNBEDINGT VERMEIDEN! 
GUT 
deineseite.de 
AKZEPT...
BROWSER CACHING 
Images, CSS, JS, PDF usw. 
www.fairrank.de 
4 
STEUERUNG 
ÜberApache Modul 
mod_headers oder 
mod_expires...
REQUESTS REDUZIEREN 
Zusammenführung von statischen Dateien 
www.fairrank.de 
3 
Anzahl Anfragen 
2-8 Anfragen 
parallel, ...
REQUESTS REDUZIEREN 
Zusammenführung von statischen Dateien 
www.fairrank.de 
3 
Anzahl Anfragen 
Massiv reduziert 
CSS & ...
REQUESTS REDUZIEREN 
CSS- & JS-Dateien 
datei2.css Aus… 
www.fairrank.de 
3 
datei3.css 
datei1.css 
datei1-2-3.css 
<link...
REQUESTS REDUZIEREN 
CSS-Sprites 
www.fairrank.de 
3 
Quelle: http://designyourweb.info/ 
16 Requests => 1 Request 23 kB =...
REQUESTS REDUZIEREN 
CSS-Sprites 
www.fairrank.de 
3 
Quelle: http://designyourweb.info/
KOMPRIMIERUNG AKTIVIEREN 
Aktivierung über .htaccess oder httpd.conf 
mod_gzip mod_deflate 
Komprimiert nach LZ77 Algorith...
KOMPRIMIERUNG AKTIVIEREN 
Keyfacts 
www.fairrank.de 
Komprimierung 30% - 40% 
Mod_deflate ist einfacher zu konfigurieren u...
BILDER KOMPRIMIEREN 
www.fairrank.de 
BILDAUSWAHL 
Keine BMP oder TIFF Dateien 
PNG besser geeignet als GIF 
GIF nur für s...
UND NOCH 
MEHR… 
www.fairrank.de
SPARPOTENTIAL ANALYSE 
Am Beispiel von Koeln.de 
Sparpotenzial für Startseite / Aufruf 
423,6 KB (27 %) 
www.fairrank.de 
...
WEITERE OPTIMIERUNGEN 
www.fairrank.de 
Keep-alive aktivieren 
Skalierte Bilder bereitstellen 
CDN oder Subdomain 
verwend...
AUSBLICK 
www.fairrank.de
AUSBLICK 
Und was es sonst so gibt… 
Neue Standards 
(z.B. SPDY / HTTP/2.0) 
Mehr Performance durch Multiplexing 
und Pipe...
WIR HOFFEN, DASS ES 
EUCH GEFALLEN HAT! 
www.fairrank.de 
Murat Özdemir 
m.oezdemir@fairrank,de 
Franz Hernschier 
f.herns...
Bildnachweise 
Bild in Slide 3 - nicholasjon @ flickr.com 
https://www.flickr.com/photos/nicholasjon/4498088305 
Bild in S...
Nächste SlideShare
Wird geladen in …5
×

PageSpeed für Einsteiger SEO Day 2014

1.754 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.754
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
490
Aktionen
Geteilt
0
Downloads
37
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

  • Beispiel:
    <IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 1 month"
    ExpiresByType text/html "access plus 0 seconds"
    ExpiresByType text/xml "access plus 0 seconds"
    ExpiresByType application/xml "access plus 0 seconds"
    ExpiresByType application/json "access plus 0 seconds"
    ExpiresByType text/cache-manifest "access plus 0 seconds"
    </IfModule>

    Beispiel mod_headers:
    <IfModule mod_headers.c> Header set Vary Accept-Encoding <FilesMatch "\.(gif|jpe?g|png|ico|swf)$"> Header set Cache-Control "max-age=5184000, public" </FilesMatch> <FilesMatch "\.(css)$"> Header set Cache-Control "max-age=5184000, public" </FilesMatch> <FilesMatch "\.(js)$"> Header set Cache-Control "max-age=216000, public" </FilesMatch> <FilesMatch "\.(x?html?|php|xml)$"> Header set Cache-Control "max-age=604800, private, must-revalidate" </FilesMatch> </IfModule>
  • Händisch oder automatisiert per PHP Script oder Extension / Modul / Plugin.
    Beispiel:
    <?php
    header("Content-type: text/css");
    echo file_get_contents("reset.css")."\r\n";
    echo file_get_contents("page.css")."\r\n";
    echo file_get_contents("navi.css")."\r\n";
    echo file_get_contents("content.css")."\r\n";
    ?>

    Achtung bei JS Dateien
  • Tools: http://wearekiss.com/spritepad
  • Beispielkonfiguration mod_gzip:
    <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.( html|css|js|xml|php|txt)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>

    Kompressionslevel Option DeflateCompressionLevel (Standard ist 6)
    Beispielkonfiguration mod_deflate:
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain text/html text/xml
    AddOutputFilterByType DEFLATE text/css text/javascript
    AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript application/x-javascript
    </IfModule>


  • Rechnung:
    1.972.620 / Monat
    65.754 / Tag

    Geschätzte Unique Visitors: 50.000
    Sparpotenzial * Geschätzte UV = Gesparte Datenmenge
  • PageSpeed für Einsteiger SEO Day 2014

    1. 1. FAIRRANK GmbH PAGE SPEED OPTIMIERUNG FÜR EINSTEIGER Franz Hernschier Murat Özdemir www.fairrank.de
    2. 2. WER WIR SIND www.fairrank.de Murat Özdemir SEO-Projektleiter Franz Hernschier SEO-Manager
    3. 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. 4. PageSpeed www.fairrank.de
    5. 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. 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. 7. STATS & FACTS - AMAZON Steigerung des Umsatzes um 1% je 100ms www.fairrank.de 100 ms 1 % Quelle: http://www.strangeloopnetworks.com
    8. 8. STATS & FACTS - YAHOO 9% mehr Traffic je 400ms Verbesserung der Ladezeit www.fairrank.de 400 ms 9 % Quelle: http://www.strangeloopnetworks.com
    9. 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. 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. 11. TOP 5 www.fairrank.de
    12. 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. 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. 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. 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. 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. 17. REQUESTS REDUZIEREN CSS-Sprites www.fairrank.de 3 Quelle: http://designyourweb.info/ 16 Requests => 1 Request 23 kB => 19 kB
    18. 18. REQUESTS REDUZIEREN CSS-Sprites www.fairrank.de 3 Quelle: http://designyourweb.info/
    19. 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. 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. 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. 22. UND NOCH MEHR… www.fairrank.de
    23. 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. 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. 25. AUSBLICK www.fairrank.de
    26. 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. 27. WIR HOFFEN, DASS ES EUCH GEFALLEN HAT! www.fairrank.de Murat Özdemir m.oezdemir@fairrank,de Franz Hernschier f.hernschier@fairrank.de
    28. 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

    ×