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!
International Site Speed Tweaks - ISS 2017 Barcelona
Site Speed EXTREME - SEOkomm 2014
1. 1
SITE SPEED EXTREME
WEB-PERFORMANCE OPTIMIERUNG AM LIMIT
Bastian Grimm, VP Organic Search, Peak Ace AG | @basgr
2. 2
Site Speed als offizieller Rankingfaktor
Und das sogar schon seit 2010…
Full Story: http://pa.ag/1t4xVs6
3. 3
Google wird nicht müde…
… das Gesagte zu Wiederholen: Jüngst Ende Oktober 2014:
Full Story: http://pa.ag/1t4xVs6
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
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
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
100ms können DEN Unterschied machen!
Amazon: 1%+ Revenue pro 100ms, Yahoo: 9%+ Traffic pro 400 ms, …
Quelle: http://pa.ag/1w8IYwq
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
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
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
YSlow: Die Mutter der Auditing Tools
Kostenlos, für fast alle Browser – Achtung: Ergebnisse ggf. verbindungsabhängig
http://yslow.org/
13. 13
Vergleiche & vieles mehr mit GTmetrix
PageSpeed & YSlow in einem Tool, Report Download, API & mehr…
http://gtmetrix.com/
14. 14
Perfmap für Chrome
Site Performance Heatmaps für geladene Ressourcen einer URL
Download: http://pa.ag/10MgGPy
15. 15
Perfmap für www.omx.at
Ladezeiten (cached vs. non-cached) in Form von Heatmaps
16. #2 Konzepte der Optimierung
16
Critical Path Rendering in a Nutshell
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. 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
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
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).”
25. 25
Anzahl der HTTP Anfragen reduzieren
Multiple CSS (JavaScripts) kombinieren; je CSS wird ein HTTP Request ausgeführt
26. CSS oben, JavaScript unten!
JS im HEAD muss erst komplett(!) geladen werden, bevor die Seite ausgegeben wird!
26
27. Und wenn das Kombinieren nicht klappt…
27
HeadJS enables parallelizing JS file downloads; Super-awesome!
http://headjs.com/
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
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
csscss: Eine CSS Redundanz Analyse
Auffinden von Mehrfachdeklarationen in CSS
http://zmoazeni.github.io/csscss/
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
Und bei allen anderen Bildern:
TinyPNG & JPEGmini zum Entfernen von Meta Daten und Co.
https://tinypng.com/ & http://www.jpegmini.com/
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
Caching für statische Ressourcen
Firebug, Live HTTP Headers oder Web Sniffer zeigen entsprechende Header
35. EINFACH MAL DIE IT FRAGEN…
DIE WISSEN GANZ SICHER WIE CACHING GEHT!
Image Source: podbean.com
36. 36
Und wenn das doch nicht der Fall ist:
Good luck finding someone who does the job properly!
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
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
Eure Social Media Buttons…!
Ich weiß, Social Signals und so… aber BITTE unbedingt ASYNCHRON laden!
40. 40
#4 WordPress Performance
Tipps & Tricks für die einfache Umsetzung in WP
41. 41
Auf geht‘s… Die Ausgangsbasis:
PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen
45. 45
Besser: Alle „Minify-Issues“ erledigt
„Leverage Browser-Caching“: Verursacht durch externes jQuery!
46. 46
Use Google Libraries
Ausliefern von jQuery, Dojo, Prototype, uvm. über das Google CDN
https://wordpress.org/plugins/use-google-libraries/
47. 47
Fast perfekt… 91/100
Rest: Manuelles anpassen von Sourcecode bzw. der .htaccess
48. 48
Alles zurück auf Start: Neue Runde!
PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen
49. 49
W3 Total Cache
Das wohl umfangreichste und bekannteste Caching Plug-in
https://wordpress.org/plugins/w3-total-cache/
50. 50
W3 Total Cache
Das wohl umfangreichste und bekannteste Caching Plug-in
https://wordpress.org/plugins/w3-total-cache/
51. 51
Out of the Box: 92/100
PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen
52. 52
The new Kid in Town: WP Rocket
Kostenpflichtiges Premium Plug-in, ab 29€ pro Domain
http://wp-rocket.me/de/
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
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
EWWW: Same Game, aber lokal…
Installation der notwendigen Libraries auf dem Server (mitgeliefert)
https://wordpress.org/plugins/ewww-image-optimizer/
56. 56
Wer hat‘s bemerkt?!
ALLE vorgenannten Tests komplett ohne Verwendung eines CDN!
http://www.cdnplanet.com/cdns/
57. 57
#5 Server, DB & Hosting
Serverseitige Optimierungen für noch mehr Speed
58. 58
mod_pagespeed für Apache
Automatisierte Implementation von Regeln aus PageSpeed Insights
https://code.google.com/p/modpagespeed/
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
Und dann kam in 08/2014 das:
Google kündigt HTTPS (TLS over HTTP) als „Rankingsignal“ an…
Quelle: http://pa.ag/11dz05w
61. 61
SPDY Usage-Statistiken
Bereits 2,6% aller Webseiten nutzen das SPDY-Protokoll
Quelle: http://w3techs.com/technologies/details/ce-spdy/all/all
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
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
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
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