PageSpeed für Einsteiger SEO Day 2014

1.921 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.921
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
494
Aktionen
Geteilt
0
Downloads
38
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

    ×