Includere inline un file CSS in una pagina MVC / Sgart.it

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.

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:

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);
    }
  }
}

il suo utilizzo in una view è il seguente:

<!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>
...

la pagina html risultante sarà simile alla seguente:

<!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