N3rd 4 Speed
CPU [||||| ]Mem [||||||||||||||||| ]Conversion [|||||||||||||||||||||||||||||||||||||||]
Geschwindigkeit ist keine Hexerei. (Johann Nestroy)
René Penner@papst23
Agenda
1. Warum |||||||||||||||||||||||||||||||||||2. Messen ||||||||||||||||||||||||||||||||||3. Frontend ||||||||||||||||||||||||||||||||4. Backend |||||||||||||||||||||||||||||||||5. ReverseProxy ||||||||||||||||||||||||||||
Slides [||||||||||||||||||||||||||||||||||||||||||||||||||||||]
Warum
- Gewinn- Google: 500ms langsamer => -20% Traffic- Amazon: 100ms langsamer => -1% Conversion- Mozilla: 2200ms schneller => +15% Downloads
- Kosten- Traffic & Bandbreite => weniger- Hardwarebedarf => weniger
Slides [|| ]
Warum
- User Intends- Bounce Rate => weniger- Seitenaufrufe => mehr
- Crawlability*- Inhalte => schneller- Inhalte => mehr
Slides [|||| ]
• Die Performance … hat auf jeden Fall darauf einen Einfluß, mit welcher Frequenz Google crawled. (Johannes Beus aka. Sistrix - http://bit.ly/z7Zjfr)
Messen
- Page Load Time- Response Size- Response Time (first Bit)- Rendergeschwindigkeit- Gleichzeitige Requests (Lasttest)
Slides [|||||| ]
Messen
- Loads.in- Pingdom- webpagetest.org
- Firebug- Yslow- Google Page Speed
- ab (Apache Benchmark)
Slides [|||||||| ]
Frontend
Slides [|||||||||| ]
Frontend
Slides [|||||||||||| ]
Frontend
Slides [|||||||||||||| ]
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 [|||||||||||||||| ]
Frontend
Slides [|||||||||||||||||| ]
Frontend
Slides [|||||||||||||||||||| ]
Frontend
- Cache Headers
mod_expires.c (a2enmod expires)ExpiresActive OnExpiresByType 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 [|||||||||||||||||||||| ]
Frontend
Slides [|||||||||||||||||||||||| ]
Aus dem Cache - E-Tag match - Mod. since match
Frontend
Slides [|||||||||||||||||||||||||| ]
Nicht aus dem Cache - E-Tag no match - mod since no match
Frontend
- gzip
# console# a2enmod deflate# service apache2 restart
#.htaccessAddOutputFilterByType DEFLATE text/css
Slides [|||||||||||||||||||||||||||| ]
Frontend
Slides [|||||||||||||||||||||||||||||| ]
GZIP aus - 10 KB - 105ms
Frontend
Slides [|||||||||||||||||||||||||||||||| ]
GZIP an - 2.5 KB - 79ms
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 [|||||||||||||||||||||||||||||||||| ]
Frontend
- CSS Selectoren
DIV => schnell.myclass => schnell#myid => schnellUL LI A.myclass => langsamUL li A => sehr langsam* A => pain
UL LI A {color:red} 3 2 1
Slides [|||||||||||||||||||||||||||||||||||| ]
* http://stevesouders.com/efws/css-selectors/universal.php
Backend
Slides [|||||||||||||||||||||||||||||||||||||| ]
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 [|||||||||||||||||||||||||||||||||||||||| ]
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 [|||||||||||||||||||||||||||||||||||||||||| ]
ReverseProxy
Slides [|||||||||||||||||||||||||||||||||||||||||||| ]
http://www.phpgangsta.de/bessere-performance-mit-einem-reverse-proxy
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 [|||||||||||||||||||||||||||||||||||||||||||||| ]
ReverseProxy
- 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 [|||||||||||||||||||||||||||||||||||||||||||||||| ]
-Varnish-
ReverseProxy
- VCL- Backends definieren- Load Balancing einstellen- Cache einstellen
- Welche URLs sollen gecached werden?- Wie lange soll der Cache valid sein?
- HTTP Header modifizieren
Slides [|||||||||||||||||||||||||||||||||||||||||||||||||| ]
-Varnish-
ReverseProxy
- VMODs- Authentication (HTTP Basic authentication)- DeviceAtlas (Mobile Detection)- Digest (Hashes MD5, SHA1 ...)- Redirect- Redis (DB)- Shield (DDoS Protection)
Slides [|||||||||||||||||||||||||||||||||||||||||||||||||||| ]
-Varnish-
ReverseProxy
- ESI (Edge Side Includes)
Slides [||||||||||||||||||||||||||||||||||||||||||||||||||||||]
-Varnish-
<esi:include src="/header.html" />
<esi:include src="/sitebar.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 kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur