Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH

Und im Hintergrund? 72 Sessions Bytes Sent: Bytes Received:

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

DNS Lookups verringern Minify JavaScript Redirects vermeiden Doppelt referenzierte Skripte entfernen Etags vermeiden Ajax cachbar machen

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

Verringern die Anzahl der HTTP Requests Praktisch allerdings nur einsetzbar für rechteckige Elemente Bilder müssen zusammenhängen

Verschiedene Bilder in einem Bild kombinieren Für Elemente die background-image unterstützen Weniger HTTP- Requests Kleinerer Download als einzelne Bilder Im Beispiel: Sprites Breite: 32px Höhe: 40px

<div style="background-image: url('a_lot_of_sprites.gif'); background-position: -65px -121px; width: 32px; height: 40px;">

Weiterer Trick: JavaScript- und CSS Dateien zusammenfassen # HTTP Requests zu verringern: Sehr wirksame Technik für first-time visitors

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

Vorteile von Caching Kleinere Latenzzeit zwischen Request und Response Geringere Netzwerklast Serverlast wird verringert Arten von Web-Caches Browser Cache Proxy Caches Gateway Caches

Expires Header die Datei bis zum … verwenden the date/time after which the response is considered stale Expires: Thu, 15 Apr :00:00 GMT Zeit zwischen Server und Client muss synchron sein

Cache-Control als Alternative zu Expires (HTTP/1.1) Verwendet max-age um die Cachedauer zu setzen Cache-Control: max-age=86400 Cache-Control und Expires setzen Cache-Control überschreibt Expires

Alle Komponenten cachen, die selten geändert werden Skripte, Stylesheets, … Wie kommen Änderungen von Komponenten zum Client wenn diese gecacht sind? Versions# in Dateinamen In Buildprozess integrieren Vereinfacht Wartung/Debugging

Classic ASP (VBScript) Response.CacheControl = "public, max-age=3600" ASP.NET (VB.NET) Dim ts = New TimeSpan(1, 0, 0) Response.Cache.SetMaxAge(ts) Response.Cache.SetCacheability( HttpCacheability.Public) Response.Cache.SetExpires(Now.AddDays(2))

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

Gzip gegenüber deflate vorziehen Alle Texte (HTLM, XML, JS, CSS, JSON, …) komprimieren Bereits komprimierte Inhalte NICHT erneut komprimieren (png, jpg, …) Erzeugt Last auf Server und Client HTTP Request Accept-Encoding: gzip, deflate HTTP Request Accept-Encoding: gzip, deflate HTTP Response Content-Encoding: gzip HTTP Response Content-Encoding: gzip

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

Stylesheets am Ende einer Seite verhindern progressives Rendern (browserabhängig) Flash of Unstyled Content (FOUC) LINK vorziehen Stylesheets mit einem Link Tag in den Document einfügen!

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

Reaktionszeit definiert sich durch die Anzahl der Komponenten pro Seite 1 Komponente = 1 HTTP Request HTTP/1.1 Empfehlung: Zwei parallele Downloads pro hostname Konfiguration IE: Registry FF: about:config

Komponenten auf zwei Hostnamen verteilen (CNAME(Alias auf DNS))

Leere HTML Datei mit 20 Bildern. Zeiten für gecachte Aliase und leerem Dateicache.

Skriptdownload verhindert einen weiteren, parallelen Download Skript könnte die Seite ändern ( document.write ) Ausführungsreihenfolge der Skripte High Performance Web Sites, 8.3. Scripts Block Downloads

Rendern von Inhalten unterhalb eines Skriptblocks wird blockiert Download von Komponenten unterhalb eines Skriptblocks wird blockiert High Performance Web Sites, 8.3. Scripts Block Downloads

Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

CSS Properties dynamisch setzen Werden bei Größenänderungen der Seite, Mausbewegungen, Scrollen, … ausgewertet Im Hintergrund wird Skript ausgeführt (Zugriff auf DOM Elemente) Mit Bedacht verwenden Alternative EventHandler One-Time Expressions

{ Ajax Performance} Sprite Maps Vorausschauend cachen, Feed the cache

LocalLocal GlobalGlobal DOMDOM ExpandoExpando

function WorkOnLocalVariable() { local_var = GetValueFromDOM(); return (local_var + 1); }

function WorkOnLocalVariable() { var local_var = GetValueFromDOM(); return (local_var + 1); }

function BuildUI() { var baseElement = document.getElementById('target'); baseElement.innerHTML = ''; //Clear out previous baseElement.innerHTML += BuildTitle(); baseElement.innerHTML += BuildBody(); baseElement.innerHTML += BuildFooter(); }

function BuildUI() { var elementText = BuildTitle() + BuildBody() + BuildFooter(); document.getElementById('target').innerHTML = elementText; }

function CalculateSum() { var lSide = document.body.all.lSide.value; var rSide = document.body.all.rSide.value; document.body.all.result.value = lSide + rSide; }

function CalculateSum() { // Cache document.body.all var elemCollection = document.body.all; var lSide = elemCollection.lSide.value; var rSide = elemCollection.rSide.value; elemCollection.result.value = lSide + rSide; }

function IterateWorkOverCollection() { var length = myCollection.getItemCount(); for(var index = 0; index < length; index++) { Work(myCollection[index]); } }

function IterateWorkOverCollection() { var funcWork = Work; var length = myCollection.getItemCount(); for(var index = 0; index<length; index++) { funcWork(myCollection[index]); } }

function IterateWorkOverCollection() { var parentElement = document.getElementById('target'); var length = myCollection.getItemCount(); for(var i = 0; i < length; i++) { parentElement.appendChild(myCollection[i]); } }

function IterateWorkOverCollection() { var funcAppendChild = document.getElementById('target').appendChild; var length = myCollection.getItemCount(); for(var i = 0; i < length; i++) { funcAppendChild(myCollection[i]); } }

var smallerStrings = new Array(); var myRatherLargeString = ''; var length = smallerStrings.length; for(var index = 0; index < length; index++) { myRatherLargeString += smallerStrings[index]; }

var smallerStrings = new Array(); smallerStrings.push(" "); smallerStrings.push("sampleText"); smallerStrings.push(" "); … var myRatherLargeString = smallerStrings.join('');

UpdatePanel?

{ Ajax Perfoemance } UpdatePanel Alternativen zum UpdatePanel

Erster Zugriff Request Count: 72 Bytes Sent: Bytes Received: html: Byte Nachfolgende Zugriffe Request Count: 3 Bytes Sent: Bytes Received: html: Byte

Performance issues with "String Concatenation" in JScript. 7/performance-issues-with-string- concatenation-in-jscript.aspx Eval is Evil, Part One 11/01/53329.aspx Using undefined variables in JScript 05/04/ aspx

IE + JavaScript Performance Recommendations aspx javascript-performance-recommendations-part- 2-javascript-code-inefficiencies.aspx -jscript-performance-recommendations-part-3- javascript-code-inefficiencies.aspx

ASP.NET AJAX Online Documentation efault.aspx Yahoo developer network: Best Practices for Speeding Up Your Web Site html 14 Rules for Faster-Loading Web Sites (Demos)

10 Tips for Writing High-Performance Web Applications 01/ASPNETPerformance/default.aspx CSS Sprites: Image Slicings Kiss of Death IIS 7.0: Optimize IIS Performance 08/en/library/d0de ec bcedacd15c71033.mspx?mfr=true

Caching in HTTP sec13.html Windows Script 5.7 released for Windows 2000, Windows XP and Windows 2003 Server 2/windows-script-5-7-released-for-windows windows-xp-and-windows server.aspx

How to Modify the Cache-Control HTTP Header When You Use IIS kb;en-us; How to cache in ASP.NET by using Visual C#.NET kb;en-us; How to configure Internet Explorer to have more than two download sessions

HTTP/1.1 Cache Control sec14.html#sec14.9 ASP.NET Caching us/library/xsbfdd8c.aspx Caching Portions of an ASP.NET Page us/library/h30h475z.aspx

High Performance Web Sites, Steve Souders, O'Reilly, ISBN-13: Building a Web 2.0 Portal with ASP.NET 3.5, Omar Al Zabir, O'Reilly, ISBN-13:

Fiddler Web Debugging Proxy Fiddler PowerToy - Part 2: HTTP Performance us/library/bb aspx Web Development Helper er.aspx Firebug

Internet Explorer Developer Toolbar px?familyid=E59C D-4511-BB3E- 2D5E1DB91038&displaylang=en YSlow JScript Performance Update for IE6 users (Windows Script 5.7) 9/jscript-performance-update-for-ie6- users.aspx

JSMin ShrinkSafe

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.