ASP.NET Ladezeitenoptimierung

Veröffentlicht am von

Die Problematik zu langer Ladezeiten bei Webseiten – besonders bei mobilen Endgeräten – kennt denke ich, nahezu jeder. Allerdings gibt es auch hier sehr simple Möglichkeiten dies ohne wirkliche Änderungen am Quellcode zu optimieren. Und zwar wird seit dem VS2012 in den ASP.NET-Projektvorlagen die Assembly „System.Web.Optimization.dll“ mit geliefert. Ebenfalls kann diese mit NuGET nachträglich ohne Anstrengungen hinzugefügt werden.

Aber was macht diese Assembly eigentlich? Das ist eigentlich gar nicht so schwer. Im Kern optimiert sie die Java Script sowie Cascading Style Sheet Dateien durch Zusammenfassung und Entfernung von Leerräumen. Hierbei hat dennoch der Entwickler die Freiheit zu entscheiden, was optimiert wird, zumindest was den Zusammenfassungsteil angeht. Denn, damit die Zusammenfassung aktiv wird, müssen nicht länger die CSS- und JS-Dateien einzeln referenziert werden, sondern über eine zentrale Referenzierung, dazu aber gleich mehr. Nun wäre ja noch die Frage offen, wie diese zu verwenden ist. Wie bereits gesagt erfordert dies kaum Anpassungen am Quellcode und würde wie folgt ablaufen.

Als erstes muss das Ganze aktiviert werden. Dies geschieht in der „Global.asax.cs“-Datei. Hier wird der Methode „Application_Start“ eine Zeile hinzugefügt. Und zwar Folgende:

System.Web.Optimization.BundleTable.Bundles.EnableDefaultBundles();

Anschließend müssen die Referenzen auf den CSS- sowie JS-Dateien noch angepasst werden (nur wenn die Zusammenfassung der Dateien gewünscht ist). Hierfür zunächst ein Vergleich. Aktuell sieht das Ganze vermutlich so aus:

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title>

    <link href="~/Styles/ErsteDatei.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/ZweiteDatei.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/DritteDatei.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/VierteDatei.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/FuenfteDatei.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/ErsteDatei.js" type="text/javascript" />
    <script src="~/Scripts/ZweiteDatei.js" type="text/javascript" />
    <script src="~/Scripts/DritteDatei.js" type="text/javascript" />
    <script src="~/Scripts/VierteDatei.js" type="text/javascript" />
    <script src="~/Scripts/FuenfteDatei.js" type="text/javascript" />
</head>
<body>
    @RednerBody()
    @RenderSection("scripts", required: false)
</body>

Um die Zusammenfassung nutzen zu können, müsste es in diesem Fall wie folgt aussehen:

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title>

    <link href="~/Styles/css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/js" type="text/javascript" />
</head>
<body>
    @RednerBody()
    @RenderSection("scripts", required: false)
</body>

Es wird also einfach darauf verzichtet jede Datei zu verlinken und anstelle dessen, der übergeordnete Order mit der nachfolge „/css“ für CSS-Dateien und „/js“ für JS-Dateien verwendet. Anschließend werden sämtliche Dateien in diesen Ordner zusammengefasst und als ein Ganzes dem Client gesandt anstatt jede einzeln. Nebenbei wird der Quellcode so doch auch viel übersichtlicher, oder etwa nicht?