.NET Core Tipp: Static Files im Browser Cache zwischenspeichern (Cache-Header)

.NET Core, C#, dnugbeEdu, Tipps und Tricks
Rene Leupold

Problem

Bei der Analyse der Seite .NET User Group Bern zur Page Speed und YSlow – Optimierung zeigte die Auswertung die Meldung «Leverage browser caching for the following cacheable resources».

Zur Optimierung der Performance lassen sich statische Ressourcen, die sich selten ändern im Browser Cache zwischenspeichern.

Abbildung zeigt eine Liste statischer Dateien, die im Browsercache zwischengespeichert werden können

Die Kennzahlen zeigten vor der Korrektur folgende Werte:

Abbildung zeigt die Gesamtkennzahlen PageSpeed mit 83% und YSlow mit 71%.

Aktion

Um in .NET Core für statische Dateien einen Cache-Header einzufügen ist in der Startup.cs eine Anpassung nötig.

In der Methode Configure muss der Aufruf app.UseStaticFiles() erweitert werden.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            const int durationInSeconds = 60 * 60 * 24 * 7;
            ctx.Context.Response.Headers[HeaderNames.CacheControl] =
                        $"public,max-age={durationInSeconds}";
        }
    });
...
}

Resultat

Nach dieser Anpassung werden die statischen Dateien im Browser-Cache zwischengespeichert. Die Kennzahl Leverage Browser Caching hat neu statt F (25) die Bewertung A (96)

Abbildung zeigt die Liste der statischen Files nach der Anpassung. Eine Datei mit 5 Stunden Cache-Dauer wird noch angezeigt.

Die Kennzahlen für Page Speed und YSlow haben neu folgende Werte:

Abbildung zeigt Werte nach der Korrektur. Page-Speed mit 91% und YSlow mit 82%.

Eine kleine Anpassung mit grosser Wirkung.

 

Softwareentwicklung

Datenaufbereitung

Beratung und Unterstützung

Hier gehts direkt zu den Dienstleistungen

1 Kommentar.

  • Tom Faller
    7. Januar 2020 09:29

    Hi René,
    Erstmal es Guets Nöis und herzliche Gratulation zur Selbständigkeit! Coole Sache.

    Was ich bei Caching noch empfehlen kann: Während der Entwicklung kann es nervig sein, deshalb würde ich noch sowas ähnliches einbauen:

    
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.EnvironmentName.Equals("development", StringComparison.OrdinalIgnoreCase))
    {
        app.UseStaticFiles();
    }
    else
    {
        app.UseStaticFiles(new StaticFileOptions
        {
            OnPrepareResponse = ctx =>
            {
                const int durationInSeconds = 60 * 60 * 24; // one day caching for all static content. css and js are still refreshed on changes because of ?v= query string (but only after host restart -> not nice on dev)
                ctx.Context.Response.Headers[Microsoft.Net.Http.Headers.HeaderNames.CacheControl] =
                    "public,max-age=" + durationInSeconds;
            }
        });
    }
}

Kommentare sind geschlossen.