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