1

SITE SPEED EXTREME WEB-PERFORMANCE OPTIMIERUNG AM LIMIT

Bastian Grimm, VP Organic Search, Peak Ace AG | @basgr

2

Site Speed als offizieller Rankingfaktor

Full Story: http://pa.ag/1t4xVs6

Und das sogar schon seit 2010…

3

Google wird nicht müde…

Full Story: http://pa.ag/1t4xVs6

… das Gesagte zu Wiederholen: Jüngst Ende Oktober 2014:

4

Im Grunde geht es primär um den User

Full Story: http://pa.ag/1t4xVs6

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

5

#1 Einige Zahlen zum Start Let’s do this!

6

Offenbar hat man Google zugehört…

Source: Searchmetrics Ranking Factors 2014 (US) - http://pa.ag/10cZuU2

Die Top-4 ist deutlich schneller als der Rest

7

Durchschnittliche Ladezeit <1 Sekunde

Source: Searchmetrics Ranking Factors 2014 (US) - http://pa.ag/10cZuU2

Erst ab Platz #6 liegen die Antwortzeiten bei > 1,1 Sekunden…

8

100ms können DEN Unterschied machen!

Quelle: http://pa.ag/1w8IYwq

Amazon: 1%+ Revenue pro 100ms, Yahoo: 9%+ Traffic pro 400 ms, …

9

Und auch für Google ist Speed wichtig

Quellen: http://pa.ag/1oBipmg & http://pa.ag/1EufbF1

Studie #1: 400ms langsamere Ergebnisse bedeuten -0,6% weniger Suchen pro User

Studie #2: 500ms beuteten sogar -15% Traffic auf den Suchergebnisseiten

10

Start mit Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

Kostenloses, web-basiertes Scoring von Domains gegen ein Set von Best Practices

11

Start mit Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?url=www.omx.at&tab=desktop

Priorisierung (Wirkungsgrad) sowie thematische Aufteilung (JS, Bilder, etc.)

12

YSlow: Die Mutter der Auditing Tools

http://yslow.org/

Kostenlos, für fast alle Browser – Achtung: Ergebnisse ggf. verbindungsabhängig

13

Vergleiche & vieles mehr mit GTmetrix

http://gtmetrix.com/

PageSpeed & YSlow in einem Tool, Report Download, API & mehr…

14

Perfmap für Chrome

Download: http://pa.ag/10MgGPy

Site Performance Heatmaps für geladene Ressourcen einer URL

15

Perfmap für www.omx.at Ladezeiten (cached vs. non-cached) in Form von Heatmaps

16

#2 Konzepte der Optimierung Critical Path Rendering in a Nutshell

17

Critical Path Rendering

Quelle & Bilder: http://pa.ag/1txGANU

“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.”

18

Google selbst empfiehlt dabei:

Den ganzen Beitrag lesen: http://pa.ag/1ypomT2

Ohne Scrollen sichtbare Inhalte immer zuerst, der Rest kann warten!

1. HTML so strukturieren, dass kritische (above-the-fold)

Inhalte zuerst geladen werden

2. Für alle anderen Ressourcen: Anzahl & Größe minimieren,

ggf. on-demand / deferred (nach-) laden

19

Was braucht Ihre Website wirklich?

http://www.phpied.com/css-and-the-critical-path/

Keine Fonts, kein JS & Videos; aber dafür ganz sicher HTML, CSS & ggf. ein Logo

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

Automatisiertes Erstellen des CP-CSS

Ausprobieren: http://pa.ag/ccpcssgen

Vorher: 192.204 Zeichen; nachher: 11.433 Zeichen

22

#3 Site Speed Regelwerk Die wichtigsten Regeln für schnelle Websites

23

(Fast) alles was Sie wissen müssen…!

24

(Fast) alles was Sie wissen müssen…!

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!

27

HeadJS enables parallelizing JS file downloads; Super-awesome!

http://headjs.com/

Und wenn das Kombinieren nicht klappt…

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

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

csscss: Eine CSS Redundanz Analyse Auffinden von Mehrfachdeklarationen in CSS

http://zmoazeni.github.io/csscss/

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

Und bei allen anderen Bildern:

https://tinypng.com/ & http://www.jpegmini.com/

TinyPNG & JPEGmini zum Entfernen von Meta Daten und Co.

33

GZIP Kompression aktivieren

http://www.gzip.org/ & http://pa.ag/1t4DGpH

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

34

Caching für statische Ressourcen Firebug, Live HTTP Headers oder Web Sniffer zeigen entsprechende Header

EINFACH MAL DIE IT FRAGEN… DIE WISSEN GANZ SICHER WIE CACHING GEHT!

Image Source: podbean.com

36

Und wenn das doch nicht der Fall ist: Good luck finding someone who does the job properly!

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

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

Eure Social Media Buttons…! Ich weiß, Social Signals und so… aber BITTE unbedingt ASYNCHRON laden!

40

#4 WordPress Performance Tipps & Tricks für die einfache Umsetzung in WP

41

Auf geht‘s… Die Ausgangsbasis: PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen

42

WP Super Cache WordPress Caching Engine, >6 Mio. Downloads, kostenlos

https://wordpress.org/plugins/wp-super-cache/

43

Das Ergebnis: Nix...! Standard-Caching reicht nicht für „gute Scores“ (bzw. schnelle Seiten)

44

Better WordPress Minify JavaScript und CSS-Dateien kombinieren + minify‘en

https://wordpress.org/plugins/bwp-minify/

45

Besser: Alle „Minify-Issues“ erledigt „Leverage Browser-Caching“: Verursacht durch externes jQuery!

46

Use Google Libraries Ausliefern von jQuery, Dojo, Prototype, uvm. über das Google CDN

https://wordpress.org/plugins/use-google-libraries/

47

Fast perfekt… 91/100 Rest: Manuelles anpassen von Sourcecode bzw. der .htaccess

48

Alles zurück auf Start: Neue Runde! PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen

49

W3 Total Cache Das wohl umfangreichste und bekannteste Caching Plug-in

https://wordpress.org/plugins/w3-total-cache/

50

W3 Total Cache Das wohl umfangreichste und bekannteste Caching Plug-in

https://wordpress.org/plugins/w3-total-cache/

51

Out of the Box: 92/100 PageSpeed Insights, WP 4.0 Standard Installation, Theme Twenty Fourteen

52

The new Kid in Town: WP Rocket Kostenpflichtiges Premium Plug-in, ab 29€ pro Domain

http://wp-rocket.me/de/

53

The new Kid in Town: WP Rocket Kostenpflichtiges Premium Plug-in, ab 29€ pro Domain

http://wp-rocket.me/de/funktionen/

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

EWWW: Same Game, aber lokal… Installation der notwendigen Libraries auf dem Server (mitgeliefert)

https://wordpress.org/plugins/ewww-image-optimizer/

56

Wer hat‘s bemerkt?! ALLE vorgenannten Tests komplett ohne Verwendung eines CDN!

http://www.cdnplanet.com/cdns/

57

#5 Server, DB & Hosting Serverseitige Optimierungen für noch mehr Speed

58

mod_pagespeed für Apache

https://code.google.com/p/modpagespeed/

Automatisierte Implementation von Regeln aus PageSpeed Insights

59

mod_spdy: SPDY für Apache (& nginx)

https://code.google.com/p/mod-spdy/

59% Marktanteil für Apache und zus. 22% für nginx = gute Ausgangsbasis

60

Und dann kam in 08/2014 das:

Quelle: http://pa.ag/11dz05w

Google kündigt HTTPS (TLS over HTTP) als „Rankingsignal“ an…

61

SPDY Usage-Statistiken

Quelle: http://w3techs.com/technologies/details/ce-spdy/all/all

Bereits 2,6% aller Webseiten nutzen das SPDY-Protokoll

62

Einfach mal in Ruhe ausprobieren…!

63

SPDY Kompatibilität prüfen

http://caniuse.com/spdy & http://spdycheck.org/

Alle modernen Browser (außer kleinere Probleme im IE) können SPDY!

64

Drei Tipps für PHP Session im RAM, APC als PHP-Cache & PHP-FPM ausprobieren

session.save_handler = memcached

session.save_path = "localhost:11211"

#1 Mit memcached Sessions direkt im RAM speichern: (Vorteil: Keine Festplattenzugriffe mehr!)

#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

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

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

Vielen Dank! Fragen?

bg@peakace.de

twitter.com/peakaceag

facebook.com/peakaceag

www.peakace.de

http://pa.ag/seokomm-speed