1. N3rd 4 Speed
Geschwindigkeit ist keine Hexerei. (Johann Nestroy)
René Penner
@papst23
CPU [||||| ]
Mem [||||||||||||||||| ]
Conversion [|||||||||||||||||||||||||||||||||||||||]

2. Agenda
1. Warum |||||||||||||||||||||||||||||||||||
2. Messen ||||||||||||||||||||||||||||||||||
3. Frontend ||||||||||||||||||||||||||||||||
4. Backend |||||||||||||||||||||||||||||||||
5. ReverseProxy ||||||||||||||||||||||||||||
Slides [||||||||||||||||||||||||||||||||||||||||||||||||||||||]

3. Warum
- Gewinn
- Google: 500ms langsamer => -20% Traffic
- Amazon: 100ms langsamer => -1% Conversion
- Mozilla: 2200ms schneller => +15% Downloads
- Kosten
- Traffic & Bandbreite => weniger
- Hardwarebedarf => weniger
Slides [|| ]

4. Warum
- User Intends
- Bounce Rate => weniger
- Seitenaufrufe => mehr
- Crawlability*
- Inhalte => schneller
- Inhalte => mehr
• Die Performance … hat auf jeden Fall darauf einen Einfluß, mit welcher Frequenz Google crawled.
(Johannes Beus aka. Sistrix - http://bit.ly/z7Zjfr)
Slides [|||| ]

5. Messen
- Page Load Time
- Response Size
- Response Time (first Bit)
- Rendergeschwindigkeit
- Gleichzeitige Requests (Lasttest)
Slides [|||||| ]

6. Messen
- Loads.in
- Pingdom
- webpagetest.org
- Firebug
- Yslow
- Google Page Speed
- ab (Apache Benchmark)
Slides [|||||||| ]

7. Frontend
Slides [|||||||||| ]

8. Frontend
Slides [|||||||||||| ]

9. Frontend
Slides [|||||||||||||| ]

10. Frontend
- Request minimieren
- CSS & JS zusammenfassen
- Inline Images (data:base64)
- CSS Sprites
- Requestsize optimieren
- Bilder komprimieren (Smush.it)
- JS/CSS Minifier (JSMin, YUI Compressor)
Slides [|||||||||||||||| ]

11. Frontend
Slides [|||||||||||||||||| ]

12. Frontend
Slides [|||||||||||||||||||| ]

13. Frontend
- Cache Headers
mod_expires.c (a2enmod expires)
ExpiresActive On
ExpiresByType text/css "access plus 5184000 seconds"
mod_headers.c (a2enmod headers)
<filesmatch ".(css)$">
Header set Cache-Control "max-age=5184000, public"
</filesmatch>
E-Tags nicht vergessen ;)
Slides [|||||||||||||||||||||| ]

14. Frontend
Aus dem Cache
- E-Tag match
- Mod. since match
Slides [|||||||||||||||||||||||| ]

15. Frontend
Nicht aus dem Cache
- E-Tag no match
- mod since no match
Slides [|||||||||||||||||||||||||| ]

16. Frontend
- gzip
# console
# a2enmod deflate
# service apache2 restart
#.htaccess
AddOutputFilterByType DEFLATE text/css
Slides [|||||||||||||||||||||||||||| ]

17. Frontend
GZIP aus
- 10 KB
- 105ms
Slides [|||||||||||||||||||||||||||||| ]

18. Frontend
GZIP an
- 2.5 KB
- 79ms
Slides [|||||||||||||||||||||||||||||||| ]

19. Frontend
- DOM Elemente – weniger ist mehr
#naja
<div id="content">
<h1><strong><em>Headline</em></strong></h1>
</div>
<div id="content">
<div class="innercontent">
<p>lorem ipsum ...</p>
</div>
</div>
#besser
<h1>Headline</h1>
<p>lorem ipsum ...</p>
Slides [|||||||||||||||||||||||||||||||||| ]

20. Frontend
- CSS Selectoren
DIV => schnell
.myclass => schnell
#myid => schnell
UL LI A.myclass => langsam
UL li A => sehr langsam
* A => pain
UL LI A {color:red}
3 2 1
* http://stevesouders.com/efws/css-selectors/universal.php
Slides [|||||||||||||||||||||||||||||||||||| ]

21. Backend
Slides [|||||||||||||||||||||||||||||||||||||| ]

22. Backend
- MySQL
- RAM, RAM, mehr RAM
- Indexe prüfen
- MySQL Version checken
- Dedicated DB Server
- mysqltuner.pl (Perl Script)
- SLOW QUERYS:
/etc/mysql/my.cnf
#log_slow_queries = /var/log/mysql/mysql-slow.log
#long_query_time = 1
#log-queries-not-using-indexes
Slides [|||||||||||||||||||||||||||||||||||||||| ]

23. Backend
- Apache & PHP
- RAM, RAM, mehr RAM
- ACHTUNG: SWAP
- .htaccess -> vhosts
- Nicht gebrauchte Mods ausschalten
- OP-Code Caches: APC / XCache / eAccelerator
- mod_pagespeed von Google
- Redirects reduzieren!
- Alternative Webserver Lighty oder nginx
Slides [|||||||||||||||||||||||||||||||||||||||||| ]

24. ReverseProxy
http://www.phpgangsta.de/bessere-performance-mit-einem-reverse-proxy
Slides [|||||||||||||||||||||||||||||||||||||||||||| ]

25. ReverseProxy
- Apache vs. Varnish
- Requests: 1.000 - Concurrency: 1
- Apache: 9.97 Requests per Second (RAM: 50% CPU: 100%)
- Varnish: 3003.98 Requests per Second (RAM: 50% CPU: 5%)
- Requests: 1.000 - Concurrency: 10
- Apache: 10.60 Requests per Second (RAM: 95% CPU: 100%)
- Varnish: 6391.29 Requests per Second (RAM: 50% CPU: 10%)
- Requests: 10.000 - Concurrency: 100
- Apache: Absturz
- Varnish: 6179.76 Requests per Second (RAM: 55% CPU: 15%)
Slides [|||||||||||||||||||||||||||||||||||||||||||||| ]

26. ReverseProxy
-Varnish-
- Extrem schnell (asynchron)
- Ressourcensparend
- Einfache Installation (Ubuntu: 5min)
- Caching (in memory)
- Load balancing (round robin, random)
- Health checking (backend down)
- VCL (Varnish configuration language)
- ESI (Edge Side Includes)
- VMODs (Varnish Modules)
Slides [|||||||||||||||||||||||||||||||||||||||||||||||| ]

27. ReverseProxy
-Varnish-
- VCL
- Backends definieren
- Load Balancing einstellen
- Cache einstellen
- Welche URLs sollen gecached werden?
- Wie lange soll der Cache valid sein?
- HTTP Header modifizieren
Slides [|||||||||||||||||||||||||||||||||||||||||||||||||| ]

28. ReverseProxy
-Varnish-
- VMODs
- Authentication (HTTP Basic authentication)
- DeviceAtlas (Mobile Detection)
- Digest (Hashes MD5, SHA1 ...)
- Redirect
- Redis (DB)
- Shield (DDoS Protection)
Slides [|||||||||||||||||||||||||||||||||||||||||||||||||||| ]

29. ReverseProxy
-Varnish-
- ESI (Edge Side Includes)
<esi:include src="/header.html" />
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita <esi:include
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
src="/sitebar.html
Lorem ipsum dolor sit amet, consetetur
" />
Slides [||||||||||||||||||||||||||||||||||||||||||||||||||||||]