klaus_b@.NET

In Abhängigkeit wovon, werden sich jetzt die meisten fragen. Na in Abhängigkeit zur gerade geladenen Seite einer Web-Anwendung.

Diesen Gedanken verfolge ich schon länger, habe ihn aber immer wieder verworfen. Vor ein paar Tagen bin ich auf dem Internet Explorer Weblog über ein interessantes kleines Tool Namens CSS Crunch gestolpert. Es handelt sich dabei um eine IE Erweiterung für Entwickler. Eigentlich ist es nur ein Javascript, welches zur Laufzeit in die aktuelle Seite injiziert wird und das Vorkommen einer jeden CSS-Klasse zählt. Einfach, aber es erledigt seine Aufgabe.

Nach den ersten Analysen, war ich erst einmal erstaunt, wie viele ungenutzte CSS-Klassen, außer den momentan nicht genutzten, meine CSS-Datei enthielt. Alles Leichen, die im Laufe der Zeit übrig geblieben waren.
Dabei griff ich auch die alte Idee des abhängigen Ladens der CSS-Dateien wieder auf und begann ihn umzusetzen.

Bei der Aufteilung der zentralen CSS-Datei, galt es ein paar Grundregeln zu beherzigen.
In den Google Webmaster Tools wird immer empfohlen, CSS-Dateien in einer Datei zusammen zu fassen. Wie also verfahren?
Ich entschied mich, die CSS-Klassen der weniger verwendeten Seiten wie etwa das Archiv, die Suche und die Artikelserien in eigene Dateien auszulagern und bei Bedarf zu laden.
Normalerweise würde ich das im ContentPlaceHolderhead der jeweiligen Seite erledigen. In BlogEngine.NET ist dies so jedoch nicht vorgesehen, da die MasterPage des jeweiligen Theme nur jeweils einen ContentPlaceHolder für den Inhalt bereit stellt. Also wird das setzen der benötigten Verknüpfung von einer Hilfsmethode erledigt. Dieser Methode muss lediglich der Name der zu verwendenden CSS-Datei und ein Verweis zur aktuellen Page Instanz übergeben werden.

public static void AddCssLink(string cssName, AspPage page)
{
    if (cssName.EndsWith(".css", StringComparison.OrdinalIgnoreCase))
    {
        cssName = cssName.Substring(0, cssName.IndexOf(".css", StringComparison.OrdinalIgnoreCase));
    }

    var name = cssName + BlogSettings.Instance.Version() + ".css";

    foreach (Control control in page.Header.Controls)
    {
        if (control is HtmlLink
			&& ((HtmlLink)control).Href.EndsWith(name, StringComparison.OrdinalIgnoreCase))
        {
            return;
        }
    }

        var cssLink = new HtmlLink();
        cssLink.Attributes.Add("rel", "stylesheet");
        cssLink.Href = page.Master.TemplateSourceDirectory + "/css.axd?name=" + name;

        page.Header.Controls.Add(cssLink);
}

Die Methode prüft, ob die angegebenen CSS-Datei bereits im Header referenziert ist. Wird keine Referenz gefunden, wird die Verknüpfung dem Header hinzugefügt und somit die CSS-Datei geladen.
In der Seite search.aspx.cs würde das Page_Load Ereignis also so aussehen:

protected void Page_Load(object sender, EventArgs e)
{
    rep.ItemDataBound += new RepeaterItemEventHandler(rep_ItemDataBound);
    BlogUtils.AddCssLink("search.css", this.Page);

    if (!string.IsNullOrEmpty(Request.QueryString["q"]))
    {
		// hier mehr Code
    }
    else
    {
        Page.Title = Resources.labels.search;
        h1Headline.InnerHtml = Resources.labels.search;
    }
}

In Zeile 30 wird die CSS-Datei search.css eingebunden.

Mit dieser Hilfsmethode muss die Struktur der Masterpages in BlogEngine.NET nicht geändert werden, was bei folgenden Updates immer zu sehr viel Arbeit führt. Sollten Änderungen in den betroffenen Seiten, wie etwa der Suche, erfolgen, ist die Anpassung mit einer Zeile Code wieder hergestellt.

Fazit:

Da allem Anschein nach in naher Zukunft die Ladezeit von Webseiten sowie die benötigte Zeit zum Rendern im Browser immer mehr an Relevanz gewinnt, sollte man sich schon frühzeitig mit diesen Kriterien auseinander setzen. Vor allem wenn diese Kenngrößen einer Webseite als Bewertungskriterium für das Suchmaschinenranking herangezogen werden.

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitte "kicken" sie ihn.