Site Speed EXTREME - SEOkomm 2014

11.556 Aufrufe

Veröffentlicht am

Meine Präsentation der #SEOkomm2014 in Salzburg zum Thema Performance Optimierung. Neben diversen Zahlen sprechen wir über das Critical Path Rendering, Strategien zur Web-Request Optimierung, (WordPress-) Caching und vieles mehr!

Veröffentlicht in: Technologie
2 Kommentare
26 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
11.556
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.554
Aktionen
Geteilt
0
Downloads
246
Kommentare
2
Gefällt mir
26
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Site Speed EXTREME - SEOkomm 2014

  1. 1. 1 SITE SPEED EXTREME WEB-PERFORMANCE OPTIMIERUNG AM LIMIT Bastian Grimm, VP Organic Search, Peak Ace AG | @basgr
  2. 2. 2 Site Speed als offizieller Rankingfaktor Und das sogar schon seit 2010… Full Story: http://pa.ag/1t4xVs6
  3. 3. 3 Google wird nicht müde… … das Gesagte zu Wiederholen: Jüngst Ende Oktober 2014: Full Story: http://pa.ag/1t4xVs6
  4. 4. 4 Im Grunde geht es primär um den User Aber dennoch: Auch Crawling wird mit schnelleren Seiten deutlich effizienter “We encourage you to start looking at your site's speed - not only to improve your ranking in search engines, but also to improve everyone's experience on the internet.” - Amit Singhal & Matt Cutts, Google Search Quality Team Full Story: http://pa.ag/1t4xVs6
  5. 5. 5 #1 Einige Zahlen zum Start Let’s do this!
  6. 6. 6 Offenbar hat man Google zugehört… Die Top-4 ist deutlich schneller als der Rest Source: Searchmetrics Ranking Factors 2014 (US) - http://pa.ag/10cZuU2
  7. 7. 7 Durchschnittliche Ladezeit <1 Sekunde Erst ab Platz #6 liegen die Antwortzeiten bei > 1,1 Sekunden… Source: Searchmetrics Ranking Factors 2014 (US) - http://pa.ag/10cZuU2
  8. 8. 8 100ms können DEN Unterschied machen! Amazon: 1%+ Revenue pro 100ms, Yahoo: 9%+ Traffic pro 400 ms, … Quelle: http://pa.ag/1w8IYwq
  9. 9. 9 Und auch für Google ist Speed wichtig Studie #1: 400ms langsamere Ergebnisse bedeuten -0,6% weniger Suchen pro User Studie #2: 500ms beuteten sogar -15% Traffic auf den Suchergebnisseiten Quellen: http://pa.ag/1oBipmg & http://pa.ag/1EufbF1
  10. 10. 10 Start mit Google PageSpeed Insights Kostenloses, web-basiertes Scoring von Domains gegen ein Set von Best Practices https://developers.google.com/speed/pagespeed/insights/
  11. 11. 11 Start mit Google PageSpeed Insights Priorisierung (Wirkungsgrad) sowie thematische Aufteilung (JS, Bilder, etc.) https://developers.google.com/speed/pagespeed/insights/?url=www.omx.at&tab=desktop
  12. 12. 12 YSlow: Die Mutter der Auditing Tools Kostenlos, für fast alle Browser – Achtung: Ergebnisse ggf. verbindungsabhängig http://yslow.org/
  13. 13. 13 Vergleiche & vieles mehr mit GTmetrix PageSpeed & YSlow in einem Tool, Report Download, API & mehr… http://gtmetrix.com/
  14. 14. 14 Perfmap für Chrome Site Performance Heatmaps für geladene Ressourcen einer URL Download: http://pa.ag/10MgGPy
  15. 15. 15 Perfmap für www.omx.at Ladezeiten (cached vs. non-cached) in Form von Heatmaps
  16. 16. #2 Konzepte der Optimierung 16 Critical Path Rendering in a Nutshell
  17. 17. 17 Critical Path Rendering “The code and resources required to render the initial view of a web page" The Path The Render The Critical (initial view) “They [Google] are not talking about the overall time it takes to download a webpage. What they care about is how quickly does a user start seeing content on that page.” Quelle & Bilder: http://pa.ag/1txGANU
  18. 18. 2. Für alle anderen Ressourcen: Anzahl & Größe minimieren, 18 Google selbst empfiehlt dabei: Ohne Scrollen sichtbare Inhalte immer zuerst, der Rest kann warten! 1. HTML so strukturieren, dass kritische (above-the-fold) Inhalte zuerst geladen werden ggf. on-demand / deferred (nach-) laden Den ganzen Beitrag lesen: http://pa.ag/1ypomT2
  19. 19. 19 Was braucht Ihre Website wirklich? Keine Fonts, kein JS & Videos; aber dafür ganz sicher HTML, CSS & ggf. ein Logo http://www.phpied.com/css-and-the-critical-path/
  20. 20. 20 Was braucht Ihre Website wirklich? Keine Fonts, kein JS & Videos; aber dafür ganz sicher HTML, CSS & ggf. ein Logo “If you worry about performance, you should get the CSS out of the way asap. Make CSS small, minify, compress, load (same host, no DNS) and inline (if small enough).”
  21. 21. 21 Automatisiertes Erstellen des CP-CSS Vorher: 192.204 Zeichen; nachher: 11.433 Zeichen Ausprobieren: http://pa.ag/ccpcssgen
  22. 22. 22 #3 Site Speed Regelwerk Die wichtigsten Regeln für schnelle Websites
  23. 23. 23 (Fast) alles was Sie wissen müssen…!
  24. 24. 24 (Fast) alles was Sie wissen müssen…!
  25. 25. 25 Anzahl der HTTP Anfragen reduzieren Multiple CSS (JavaScripts) kombinieren; je CSS wird ein HTTP Request ausgeführt
  26. 26. CSS oben, JavaScript unten! JS im HEAD muss erst komplett(!) geladen werden, bevor die Seite ausgegeben wird! 26
  27. 27. Und wenn das Kombinieren nicht klappt… 27 HeadJS enables parallelizing JS file downloads; Super-awesome! http://headjs.com/
  28. 28. 28 Minify für CSS & JavaScript Dateien Entfernen von überflüssigen Leerzeilen, Umbrüchen & Kommentaren For CSS, try: http://www.phpied.com/cssmin-js/ http://developer.yahoo.com/yui/compressor/ http://www.minifycss.com/css-compressor/ For JS, go with: http://jscompress.com/ https://github.com/mishoo/UglifyJS http://www.crockford.com/javascript/jsmin.html https://developers.google.com/closure/compiler
  29. 29. 29 Warum man Zip + Minify nutzen sollte: ~88% Ersparnis durch kombinierte Verwendung Normal 271 KB Minified 90 KB GZIP‘ed 78 KB Min. + GZIP‘ed 32 KB
  30. 30. 30 csscss: Eine CSS Redundanz Analyse Auffinden von Mehrfachdeklarationen in CSS http://zmoazeni.github.io/csscss/
  31. 31. 31 Für Icons & Layout: CSS Sprites Ein „großes“ Bild und CSS-Eigenschaften, um entsprechende Abschnitte zu zeigen http://www.spritecow.com/ & http://spriteme.org/
  32. 32. 32 Und bei allen anderen Bildern: TinyPNG & JPEGmini zum Entfernen von Meta Daten und Co. https://tinypng.com/ & http://www.jpegmini.com/
  33. 33. 33 GZIP Kompression aktivieren Starkes Verkleinern der Dateien verkürzt die Transfergeschwindigkeit (pro Datei) On Apache, try “mod_deflate” which is straight forward: AddOutputFilterByType DEFLATE text/html text/plain text/xml http://www.gzip.org/ & http://pa.ag/1t4DGpH
  34. 34. 34 Caching für statische Ressourcen Firebug, Live HTTP Headers oder Web Sniffer zeigen entsprechende Header
  35. 35. EINFACH MAL DIE IT FRAGEN… DIE WISSEN GANZ SICHER WIE CACHING GEHT! Image Source: podbean.com
  36. 36. 36 Und wenn das doch nicht der Fall ist: Good luck finding someone who does the job properly!
  37. 37. 37 Cookie-less Domains für Static Assetts Werden Cookies verwenden, so werden diese für JEDE Ressource mitgeschickt… Keine Cookies… … auf gstatic.com 1. „Einfach keine Cookies setzen“ 2. RequestHeader unset Cookie (Apache mod_headers) 3. Header unset Set-Cookie (Cookie Header entfernen)
  38. 38. 38 Diverse Optimierungen im Mark-Up Auch direkt im HTML kann man viele Dinge falsch machen… ein Auszug:  Niemand braucht HTML Kommentare (in einem Live System) – spätestens beim Build entfernen (z.B. mit Apache ANT)  Verschieben von inline CSS / JS in externe Dateien (Ausnahme Critical Path Rendering) – den HTML Code so kompakt wie möglich halten.  Auf @import in CSS verzichten – Browser können dann Dateien nicht mehr parallel herunterladen  Bilder niemals mit width / height skalieren – kleinere Bilder bedeutet geringere Dateigröße, also immer gleich die richtige Größe anliefern (besser noch: klein laden, mit großen ersetzen)
  39. 39. 39 Eure Social Media Buttons…! Ich weiß, Social Signals und so… aber BITTE unbedingt ASYNCHRON laden!
  40. 40. 40 #4 WordPress Performance Tipps & Tricks für die einfache Umsetzung in WP
  41. 41. 41 Auf geht‘s… Die Ausgangsbasis: PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen
  42. 42. 42 WP Super Cache WordPress Caching Engine, >6 Mio. Downloads, kostenlos https://wordpress.org/plugins/wp-super-cache/
  43. 43. 43 Das Ergebnis: Nix...! Standard-Caching reicht nicht für „gute Scores“ (bzw. schnelle Seiten)
  44. 44. 44 Better WordPress Minify JavaScript und CSS-Dateien kombinieren + minify‘en https://wordpress.org/plugins/bwp-minify/
  45. 45. 45 Besser: Alle „Minify-Issues“ erledigt „Leverage Browser-Caching“: Verursacht durch externes jQuery!
  46. 46. 46 Use Google Libraries Ausliefern von jQuery, Dojo, Prototype, uvm. über das Google CDN https://wordpress.org/plugins/use-google-libraries/
  47. 47. 47 Fast perfekt… 91/100 Rest: Manuelles anpassen von Sourcecode bzw. der .htaccess
  48. 48. 48 Alles zurück auf Start: Neue Runde! PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen
  49. 49. 49 W3 Total Cache Das wohl umfangreichste und bekannteste Caching Plug-in https://wordpress.org/plugins/w3-total-cache/
  50. 50. 50 W3 Total Cache Das wohl umfangreichste und bekannteste Caching Plug-in https://wordpress.org/plugins/w3-total-cache/
  51. 51. 51 Out of the Box: 92/100 PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen
  52. 52. 52 The new Kid in Town: WP Rocket Kostenpflichtiges Premium Plug-in, ab 29€ pro Domain http://wp-rocket.me/de/
  53. 53. 53 The new Kid in Town: WP Rocket Kostenpflichtiges Premium Plug-in, ab 29€ pro Domain http://wp-rocket.me/de/funktionen/
  54. 54. 54 Kraken: Automatisierte Bildoptimierung Lossless & Lossy Optimization für PNG, JPG und GIF, z.B. für alle User-Uploads https://wordpress.org/plugins/kraken-image-optimizer/
  55. 55. 55 EWWW: Same Game, aber lokal… Installation der notwendigen Libraries auf dem Server (mitgeliefert) https://wordpress.org/plugins/ewww-image-optimizer/
  56. 56. 56 Wer hat‘s bemerkt?! ALLE vorgenannten Tests komplett ohne Verwendung eines CDN! http://www.cdnplanet.com/cdns/
  57. 57. 57 #5 Server, DB & Hosting Serverseitige Optimierungen für noch mehr Speed
  58. 58. 58 mod_pagespeed für Apache Automatisierte Implementation von Regeln aus PageSpeed Insights https://code.google.com/p/modpagespeed/
  59. 59. 59 mod_spdy: SPDY für Apache (& nginx) 59% Marktanteil für Apache und zus. 22% für nginx = gute Ausgangsbasis https://code.google.com/p/mod-spdy/
  60. 60. 60 Und dann kam in 08/2014 das: Google kündigt HTTPS (TLS over HTTP) als „Rankingsignal“ an… Quelle: http://pa.ag/11dz05w
  61. 61. 61 SPDY Usage-Statistiken Bereits 2,6% aller Webseiten nutzen das SPDY-Protokoll Quelle: http://w3techs.com/technologies/details/ce-spdy/all/all
  62. 62. 62 Einfach mal in Ruhe ausprobieren…!
  63. 63. 63 SPDY Kompatibilität prüfen Alle modernen Browser (außer kleinere Probleme im IE) können SPDY! http://caniuse.com/spdy & http://spdycheck.org/
  64. 64. 64 Drei Tipps für PHP Session im RAM, APC als PHP-Cache & PHP-FPM ausprobieren #1 Mit memcached Sessions direkt im RAM speichern: (Vorteil: Keine Festplattenzugriffe mehr!) session.save_handler = memcached session.save_path = "localhost:11211" #2 Mit APC Funktionen, Objekte & Co im RAM halten: (Sowie: Bereits kompilierten Bytecode cachen vs. immer zur Laufzeit neu-kompilieren) #3 PHP-FPM (FastCGI Process Manager) ausprobieren! (Insbesondere für Seiten mit viel Traffic… http://php-fpm.org/)
  65. 65. 65 Drei Tipps für mysql Suchen nie direkt in mysql, einfache Strukturen verwenden #1 Suchen in MySQL ist tödlich (Besser: eine „echte“ Suche verwenden, denn „MATCH AGAINST“ oder auch „LIKE“ in mysql sind extrem langsam!) #2 Sinnvolle, einfache Tabellenstrukturen verwenden (Muss es VARCHAR(255) sein oder reicht VARCHAR(20)? Niemals textbasierte Primary Keys verwenden!) #3 Konfigurieren mit MySQLTuner, Debug / Monitoring mit innotop
  66. 66. 66 WE ARE HIRING: pa.ag/ace-jobs 10+ Openings in PPC, SEO as well as Content & Online PR in Berlin, Germany! http://pa.ag/ace-jobs
  67. 67. 67 Vielen Dank! Fragen?  bg@peakace.de  twitter.com/peakaceag  facebook.com/peakaceag  www.peakace.de http://pa.ag/seokomm-speed

×