N3rd 4 speed

1,175 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,175
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

N3rd 4 speed

  1. 1. N3rd 4 Speed Geschwindigkeit ist keine Hexerei. (Johann Nestroy) René Penner @papst23CPU [||||| ]Mem [||||||||||||||||| ]Conversion [|||||||||||||||||||||||||||||||||||||||]
  2. 2. Agenda 1. Warum ||||||||||||||||||||||||||||||||||| 2. Messen |||||||||||||||||||||||||||||||||| 3. Frontend |||||||||||||||||||||||||||||||| 4. Backend ||||||||||||||||||||||||||||||||| 5. ReverseProxy ||||||||||||||||||||||||||||Slides [||||||||||||||||||||||||||||||||||||||||||||||||||||||]
  3. 3. Warum - Gewinn - Google: 500ms langsamer => -20% Traffic - Amazon: 100ms langsamer => -1% Conversion - Mozilla: 2200ms schneller => +15% Downloads - Kosten - Traffic & Bandbreite => weniger - Hardwarebedarf => wenigerSlides [|| ]
  4. 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. 5. Messen - Page Load Time - Response Size - Response Time (first Bit) - Rendergeschwindigkeit - Gleichzeitige Requests (Lasttest)Slides [|||||| ]
  6. 6. Messen - Loads.in - Pingdom - webpagetest.org - Firebug - Yslow - Google Page Speed - ab (Apache Benchmark)Slides [|||||||| ]
  7. 7. FrontendSlides [|||||||||| ]
  8. 8. FrontendSlides [|||||||||||| ]
  9. 9. FrontendSlides [|||||||||||||| ]
  10. 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. 11. FrontendSlides [|||||||||||||||||| ]
  12. 12. FrontendSlides [|||||||||||||||||||| ]
  13. 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. 14. Frontend Aus dem Cache - E-Tag match - Mod. since matchSlides [|||||||||||||||||||||||| ]
  15. 15. Frontend Nicht aus dem Cache - E-Tag no match - mod since no matchSlides [|||||||||||||||||||||||||| ]
  16. 16. Frontend - gzip # console # a2enmod deflate # service apache2 restart #.htaccess AddOutputFilterByType DEFLATE text/cssSlides [|||||||||||||||||||||||||||| ]
  17. 17. Frontend GZIP aus - 10 KB - 105msSlides [|||||||||||||||||||||||||||||| ]
  18. 18. Frontend GZIP an - 2.5 KB - 79msSlides [|||||||||||||||||||||||||||||||| ]
  19. 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. 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.phpSlides [|||||||||||||||||||||||||||||||||||| ]
  21. 21. BackendSlides [|||||||||||||||||||||||||||||||||||||| ]
  22. 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-indexesSlides [|||||||||||||||||||||||||||||||||||||||| ]
  23. 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 nginxSlides [|||||||||||||||||||||||||||||||||||||||||| ]
  24. 24. ReverseProxy http://www.phpgangsta.de/bessere-performance-mit-einem-reverse-proxySlides [|||||||||||||||||||||||||||||||||||||||||||| ]
  25. 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. 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. 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 modifizierenSlides [|||||||||||||||||||||||||||||||||||||||||||||||||| ]
  28. 28. ReverseProxy -Varnish- - VMODs - Authentication (HTTP Basic authentication) - DeviceAtlas (Mobile Detection) - Digest (Hashes MD5, SHA1 ...) - Redirect - Redis (DB) - Shield (DDoS Protection)Slides [|||||||||||||||||||||||||||||||||||||||||||||||||||| ]
  29. 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 [||||||||||||||||||||||||||||||||||||||||||||||||||||||]

×