Hochperformante Websites erstellen Web-Beschleuniger Ein alter Hut? Peter Rossbach (pr@objektpark.de) Mein Rucksack · Peter Roßbach · Freiberuflicher IT-Systemarchitekt, Berater, Trainer und Autor · · · · Committer im Apache Tomcat- Projekt Web Expert Autor der TomC@Kolumne im Java Magazin Autor · · · · · http://tomcat.objektpark.org/ Tomcat 4x http://www.tom4.de Java Server und Servlets E-Mail : pr@objektpark.de Fachautor und Speaker auf deutschen Java Konferenzen © 2009 Peter Roßbach (pr@objektpark.de) 2 Agenda · · · · · Ernte der ,,Low hanging Fruits..." für jede WebSites Regeln Analyse der Websites einiger Unternehmen Werkzeuge Schlussfolgerung © 2009 Peter Roßbach (pr@objektpark.de) 3 Optimierung · · · · Search engine optimization Adressiert die besten oder schlechten Ideen zur Suchestrategien. Pay-per-click optimization Enthält Copyright guidelines, Profitziele, Campaign Management usw. Conversion rate optimization Verbessert die Nutzung von bestimmten Seiten die einen Profit versprechen. Web performance tuning Wege zur Optimierung von (X)HTML,CSS und AJAX Verwendung. Steigerung der Antwortgeschwindigkeit Reduktion des Download FootPrints Erhöhung der Nutzbarkeit Advanced Web tuning On-demand Content, Inline images zur Reduktion von HTTP Anfragen Server-side Tipps: Cache control, browser sniffing, HTTP compression, URL rewriting. Web metrics Erstellung von Nutzerprofiles bzw. die Nutzung der Site Sammeln von Marketing Informationen 4 · · © 2009 Peter Roßbach (pr@objektpark.de) Web Tuning 80/20 Regel http://developer.yahoo.com/performance/rules.html http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ · · · · · · Reduziere die Anzahl der Anfragen Reduziere die Grösse der Dokumente einer Seite Verwende Kompression Nutze den Browser Cache Nutze JS/CSS Minifizierung Nutze die Parallelität verschiedener Domains! © 2009 Peter Roßbach (pr@objektpark.de) 5 Web Tuning Rules 1 2 3 4 5 6 7 Weniger HTTP Anfrage 8 9 10 11 12 13 14 Nutze JS und CSS als externe Dateien Nutze ein Content Delivery Network Reduziere die DNS Lookups Nutze Expire und Cache-Control Minifizierung von JS und CSS Kompression aller Daten Vermeide Redirects CSS am Beginn der Seite Lösche duplizierte Scripte Scripts am Ende der Seite Konfiguriere ETag Vermeidung von CSS Ausdrücken Mache AJAX Cachable 6 © 2009 Peter Roßbach (pr@objektpark.de) RULE 1 Sparsame # Requests · Weniger Anfragen sind mehr! · · Browser darf nur zwei parallele Verbindung pro Host nutzen! Viele Seiten transportieren zwischen 500-1,5 Mb Daten auf Ihrer ,,Home Page". · · · · · · oftmals zwischen 50 und 100 HTTP Anfragen pro Seite · Medizin: Browser nutzten eigene Verbindungen für Images! - Glück... dauert zwischen 3,5-10 Sekunden bei einem DSL Anschluss Inline Images data:[]:[;base64], Nutze Images Maps und vermeide Multimedia-Inhalte Zusammenfassung von JS und CSS in wenige Dateien © 2009 Peter Roßbach (pr@objektpark.de) 7 RULE 1 Load... © 2009 Peter Roßbach (pr@objektpark.de) 8 RULE 2 Nutzung eines CDN · · Auslagerung der eigenen Inhalte an eine weltweit verteilte Replikationsfarm statische Inhalte werden von der nächsten gelegenen Server-Farm geliefert · · · Content Delivery Networks: Akamai, Mirror Image, SAVVIS od. Limelight Test mit www.gomez.com od. www.keynote.com s. http://de.wikipedia.org/wiki/Akamai 20.000 Server in 71 Ländern für mehr als 1100 Kunden © 2009 Peter Roßbach (pr@objektpark.de) 9 RULE 3 Expire Header · Nutzung des Browser Caches · · · · · · · Exipre oder Cache-Control (HTTP/1.1) Proxies müssen neben Last-Modified auch noch Age Header setzen. Cache-Control:max-age=31536000 ( 10 Jahre) ExpiresDefault "access plus 10 years" => Expires: Thu, 15 Apr 2010 20:00:00 GMT mod_expire im Apache nutzen.. Vorladen eines Caches © 2009 Peter Roßbach (pr@objektpark.de) 10 RULE 3 Yahoo Experiment Nutzer mit leerem Cache Anzahl eindeutige Nutzer mit einem 200 Antwort Anzahl der eindeutigen Nutzer Seiten mit leerem Cache Anzahl 200 Antwort Anzahl 200 Antworten + Anzahl 304 Antworten © 2009 Peter Roßbach (pr@objektpark.de) 11 RULE 3 Yahoo Experiment Ergebnis nach dem setzen der Cache Header http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ © 2009 Peter Roßbach (pr@objektpark.de) 12 RULE 3 Cache Probleme · · Änderung einer Seite die sich in einem Browser Cache befindet. Der Browser/Nutzer kann die Änderung nicht bemerken, wenn das Cache Datum nicht abläuft. Lösung: ,,Bei jeder Änderung des Dokuments bekommt es einen neuen Namen. Die Strafe ist das alle Links geändert werden müssen!" · · Verwendung von Platzhaltern myscript_2.0.7_1.js, myimage_2.0.5_i Generator für die Produktion nutzen © 2009 Peter Roßbach (pr@objektpark.de) 13 RULE 3 Apache Cache ### activate mod_expires ExpiresActive On ### Expire .gif's 1 month from when they're accessed ExpiresByType image/gif A2592000 ### Expire everything else 1 day from when it's last modified ### (this uses the Alternative syntax) ExpiresDefault "modification plus 1 day" ### Apply a Cache-Control header to index.html Header append Cache-Control "public, must-revalidate" © 2009 Peter Roßbach (pr@objektpark.de) 14 RULE 3 Apache Cache # year 2020 Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT" # 480 weeks Header set Cache-Control "max-age=290304000, public" # 2 DAYS Header set Cache-Control "max-age=172800, public, mustrevalidate" # 2 HOURS Header set Cache-Control "max-age=7200, must-revalidate" © 2009 Peter Roßbach (pr@objektpark.de) 15 RULE 3 mod_cache Nutzung von Proxy Caches CacheRoot /var/cacheroot CacheSize 256 CacheEnable disk / CacheDirLevels 5 CacheDirLength 3 CacheEnable mem / MCacheSize 4096 MCacheMaxObjectCount 100 MCacheMinObjectSize 1 MCacheMaxObjectSize 2048 CacheDisable / © 2009 Peter Roßbach (pr@objektpark.de) 16 RULE 3 Java - OSCache · http://www.opensymphony.com/oscache/ · · · · · · Speicherung von Anfrage, Fragmenten und beliebigen Java Objekten Programmatische Invalidierung/Refresh (Zeit, Kriterium, ID) Verteiler Cache (JGroups, JMS) Speicherung im Speicher, Festplatte, DB, Cluster Browser Cache Header + Kompression JMX Support © 2009 Peter Roßbach (pr@objektpark.de) 17 RULE 3 Tipps zum Cache · · · Kein HTTP POST nutzen Keine Nutzer spezifischen Information im URL (Keine Parameter) Das Zählen einzelner Zugriffe auf eine Seite dürfen nicht gezählt werden · · · · Page Views müssen erfasst werden! HTML Rahmen Seite sollten also evtl. nicht in den Cache des Nutzers. Besser mit ,,0" Bytes Zähl Images arbeiten! Erzeugen eines gültigen ,,Content-Lenght" HTTP Header © 2009 Peter Roßbach (pr@objektpark.de) 18 RULE 4 Kompression · · · · Alle Browser unterstützen GZIP/Deflate. · Nur wenige Ausnahme heute noch in Betrieb (ca. 1-2%) Sparen von Bandbreite und weniger Datenvolumen Geht bei Text-Inhalten bzw. nicht schon anderweitig komprimierten Inhalten Probleme · · · Nicht alle Clients die vorgeben GZIP/Deflat zu unterstützen können das auch wirklich! Verbindung von GZIP und Caches (Proxy oder Lokale) nicht immer einfach. Transformation bedeutet zusätzliche CPU-Belastung © 2009 Peter Roßbach (pr@objektpark.de) 19 RULE 4 mod_deflate Location /> # Insert filter SetOutputFilter DEFLATE # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 # the above regex won't work. You can use the following # workaround to get the desired effect: BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \ \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary DeflateFilterNote ratio DeflateCompressionLevel 6 © 2009 Peter Roßbach (pr@objektpark.de) 20 RULE 4 GZIP--· Apache mod_cache und mod_gzip harmonisieren nicht perfekt. · · · · Es werden keine gzip Inhalte gecached. Kompression erfolgt bei jeder Anfrage Lösungen: Alternative Proxies verwendet: · · · · · http://www.squid-cache.org/ http://www.lighttpd.net/ http://varnish.projects.linpro.no/ Verwendung von OSCache Verwendung einfacher ServletFilter (s. Tomcat Example) © 2009 Peter Roßbach (pr@objektpark.de) 21 RULE 5-8 JS/CSS Tipps · · · · CSS sollten am Anfang des Dokuments bereitstehen. · Spätere Rückgriffe können die Ausführung behindern JavaScript am Schluss laden da dann auf alle Elemente und Formatierung zugegriffen werden kann. Vermeidung von CSS Expression · background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); JavaScript und CSS nur aus externen Dateien laden © 2009 Peter Roßbach (pr@objektpark.de) 22 RULE 5-8 Paralleles Laden · · · · · Browser nutzen ein ,,Progressives Rendering" · Browser rendert die Seite bevor sie ganz geladen ist. HTML und Scripts werden aber exklusive geladen. Bilder können parallel geladen werden. Browser nutzen einen eigenen Connection Pools für das Laden von Bilder, Multimedia Dokumenten, ... Pro Host gibt meist zwei Verbindungspools · Der KeepAlive Pool ist auf zwei gleichzeitige Verbindung beschränkt (s. HTTP/1.1 Spec (RFC2628)) © 2009 Peter Roßbach (pr@objektpark.de) 23 RULE 5-8 Auswirkung Sichtbarkeit HTML Script Image Host1 Image Host 2 Image Host 3 Image Host 4 HTML Image Host1 Image Host 2 Image Host 3 Image Host 4 Script © 2009 Peter Roßbach (pr@objektpark.de) Sichtbarkeit 24 RULE 9 DNS Lockup · Wenn die Auflösung der DNS Adresse dauert, hängt alles weitere! · · · · Anzahl der Anfragen reduzieren Nutze Keep-Alive DNS Caching und TTL Meisten Sites haben eine TTL zwischen 1 -10 Minuten © 2009 Peter Roßbach (pr@objektpark.de) 25 RULE 9 DNS Auflösung · IE · · · · · · DnsCacheTimeout: 30 Minuten KeepAliveTimeout: 1 Minute ServerInfoTimeout: 2 Minute DNS Resolver DNS-DB ISP Windows ifconfig /displaydns ifconfig /flushdns Browser DNS Client service DNS-DB DNS-DB User System © 2009 Peter Roßbach (pr@objektpark.de) 26 RULE 9 Firefox · Firefox (about:config) · · · network.dnsCacheExpiration: 1 Minute network.dnsCacheEntries: 20 network.http.keep-alive.timeout: 5 Minuten © 2009 Peter Roßbach (pr@objektpark.de) 27 RULE 9 Java · Voreinstellung DNS Cache Java => Cache forever · # Secs · · · · · -Dsun.net.inetaddr.ttl=300 -Dsun.net.inetaddr.negative.ttl=10 #Msecs -Dsun.net.client.defaultConnectTimeout=180000 -Dsun.net.client.defaultReadTimeout=180000 © 2009 Peter Roßbach (pr@objektpark.de) 28 RULE 10 Minify JS · · · · · · Löschen der White Spaces und Comments Dojo SkrinkSafe · · http://dojotoolkit.org/docs/shrinksafe Yahoo Minify http://developer.yahoo.com/yui/compressor/ java -jar yuicompressor-2.3.6.jar -v -o styles-min.css styles.css http://www.jslint.com/lint.html JAWR: https://jawr.dev.java.net/ (GRAILS Facelets) © 2009 Peter Roßbach (pr@objektpark.de) 29 RULE 9 SkrinkSafe function MyClass(){ this.foo = function(argument1, argument2){ var addedArgs = parseInt(argument1)+parseInt(argument2); return addedArgs; } var anonymousInnerFunction = function(){ // do stuff here! } } function MyFunc(){ // this is a top-level function } // we've got multiple lines of whitespace here 321 bytes java -jar shrinksafe.jar infile.js > outfile.js function MyClass(){ this.foo=function(_1,_2){ var _3=parseInt(_1)+parseInt(_2); return _3; }; var _4=function(){ }; } function MyFunc(){ 140 bytes 56% Reduktion © 2009 Peter Roßbach (pr@objektpark.de) 30 RULE 9 JAWR https://jawr.dev.java.net/ JavascriptServlet net.jawr.web.servlet.JawrServlet configLocation /jawr.properties 1 CSSServlet net.jawr.web.servlet.JawrServlet configLocation /jawr.properties type css 1 JavascriptServlet *.js CSSServlet *.css © 2009 Peter Roßbach (pr@objektpark.de) 31 RULE 9 Jwar.properties # Common properties jawr.debug.on=false jawr.gzip.on=true jawr.gzip.ie6.on=false jawr.charset.name=UTF-8 # Javascript properties and mappings jawr.js.bundle.basedir=/js # Javascript properties and mappings jawr.js.bundle.names=lib # All files within /js/lib will be together in a bundle. # The remaining scripts will be served sepparately. jawr.js.bundle.lib.id=/bundles/lib.js jawr.js.bundle.lib.mappings=/js/lib/** # The /bundles/lib.js bundle is global # (always imported before other scripts to pages using the taglib) jawr.js.bundle.lib.global=true # CSS properties and mappings jawr.css.bundle.basedir=/css # CSS files will be all bundled together automatically jawr.css.factory.use.singlebundle=true jawr.css.factory.singlebundle.bundlename=/bundles/all.css http://developer.yahoo.com/yui/compressor/ © 2009 Peter Roßbach (pr@objektpark.de) 32 RULE 9 JAWR <%@ taglib uri="http://jawr.net/tags" prefix="jwr" %> <%@ page contentType="text/html;charset=UTF-8" %> ... © 2009 Peter Roßbach (pr@objektpark.de) 33 RULE 11 Redirect · Vermeide Redirect · Jeder Redirect kostet Response Zeit. · · · · · · Beliebt für Werbung Zählen der externe Zugriffe (Marketing) Images einblenden (Zählen von Page Impressions) Fehlende Slashes in URL`s => Redirect... URL Rewrite Orgie.. 30-200 Rewrite Regeln.... Aber: Einfache URLs sind oft besser zu merken... · http://toolbar.google.com statt http://www.google.com/tools/firefox/ toolbar/FT3/intl/de/index.html © 2009 Peter Roßbach (pr@objektpark.de) 34 RULE 11 Tracking Redirect... Performance -Wikipedia