Includere inline un file CSS in una pagina MVC
Per velocizzare il caricamento delle pagine web può tornare utile inserire i CSS direttamente nell'head delle pagine anziché fare un link al file stesso.
Questo perché solitamente i tempi di apertura della connessione a un file sono notevolemente più lunghi rispetto al tempo di download. Inserendo direttamente il CSS nella pagina si va ridurre il tempo di download totale a scapito di un piccolo aumento della dimensione (byte) della pagina.
Un altro interessante esempio, che gestisce anche il bundle dei file, si può trovare a questo link Inlining CSS and JavaScript Bundles with ASP.NET MVC
Questo perché solitamente i tempi di apertura della connessione a un file sono notevolemente più lunghi rispetto al tempo di download. Inserendo direttamente il CSS nella pagina si va ridurre il tempo di download totale a scapito di un piccolo aumento della dimensione (byte) della pagina.
Questa tecnica è richiesta per le nuove pagine AMP
Per far questo in una view MVC può tornare utile questo html helper (Html.InlineContent) che legge un file e lo ritorna in formato stringa:C#
using System.Web;
using System.Web.Mvc;
namespace SgartItExample // se da errore rimuovere il name space
{
public static class SgartHtmlHelperExtensions
{
public static IHtmlString InlineContent(this HtmlHelper htmlHelper, string bundleVirtualPath)
{
string content = System.IO.File.ReadAllText(htmlHelper.ViewContext.HttpContext.Server.MapPath(bundleVirtualPath));
return new HtmlString(content);
}
}
}
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
...
@* commentato: solo come esempio dell'approccio classico <link href="~/content/css/site.min.css" rel="stylesheet">*@
<style type="text/css">@Html.InlineContent("~/content/css/site.min.css")</style>
</head>
...
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
...
<style type="text/css">/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-
...
</style>
</head>
...
Per una migliore ottimizzazione, il file CSS da include, deve essere già minified. A questo scopo si può usare l'estensione per visual studio Web Compiler unita ad uno o più file less (vedi Web Essentials).
Un altro interessante esempio, che gestisce anche il bundle dei file, si può trovare a questo link Inlining CSS and JavaScript Bundles with ASP.NET MVC