Question

Hello,
I just started with ASP.NET MVC 4 and I’m an internship at a business who told me to create a basic webshop without a server and then validating the HTML and the speed of the website with YSlow.

I’ve been busy and when I finished the webshop, I started using YSlow to apply the speed to the website but there’s one thing it seems I cannot fix and that is misconfigured ETags:
“There are 5 components with misconfigured ETags” <- these are my CSS files and the pictures I have used.
I’ve been looking into what ETags are and still don’t exactly know what they do.

I know that in Apache you can turn them off by saying FileETag none, but in this case, I am not using a server and I would still like to turn them off, because they are not satisfied with a score of 99.

What I am looking for is an answer to what ETags exactly do and a fix to my problem.

Thanks

Answer 1

As per comments below that this is an exercise and obviously a PC is not going to be very performant. You could use a httpHandler. Here’s one I use for images that will help with your yslow (but note this is no guarantee of performance, and is meant for guidance to very busy sites)

public class ImageHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Cache.SetMaxAge(new TimeSpan(28, 0, 0, 0, 0));

            // Setting the last modified date to the creation data of the assembly
        Assembly thisAssembly = Assembly.GetExecutingAssembly();
        string thisPath = thisAssembly.CodeBase.Replace(@"file:///", "");
        string assemblyName = "yourAssembly";
        string assemblyPath = thisPath.Replace(thisAssembly.ManifestModule.ScopeName, assemblyName);

        var assemblyInfo = new FileInfo(assemblyPath);
        var creationDate = assemblyInfo.CreationTime;
        string eTag = GetFileETag(assemblyPath, creationDate);      
        // set cache info
        context.Response.Cache.SetCacheability(HttpCacheability.Private);
        context.Response.Cache.VaryByHeaders["If-Modified-Since"] = true;
        context.Response.Cache.VaryByHeaders["If-None-Match"] = true;
        context.Response.Cache.SetLastModified(creationDate);
        context.Response.Cache.SetETag(eTag);
if (IsFileModified(assemblyPath, creationDate, eTag, context.Request))
        {
            //context.Response.ContentType = <specify content type>;
            // Do resource processing here
            context.Response.TransmitFile(context.Request.PhysicalPath);
        }
        else
        {
            // File hasn't changed, so return HTTP 304 without retrieving the data 
            context.Response.StatusCode = 304;
            context.Response.StatusDescription = "Not Modified";

            // Explicitly set the Content-Length header so the client doesn't wait for
            //  content but keeps the connection open for other requests 
            context.Response.AddHeader("Content-Length", "0");         
        }


        context.Response.End();


        }


        public bool IsReusable
        {
            get { return false; }
        }


        /// <summary>
        /// Checks if the resource assembly has been modified based on creation date.
        /// </summary>
        /// <remarks>
        /// </remarks>
        /// <seealso cref="GetFileETag"/>
        private bool IsFileModified(string fileName, DateTime modifyDate, string eTag, HttpRequest request)
        {
            // Assume file has been modified unless we can determine otherwise 
            bool FileDateModified = true;
            DateTime ModifiedSince;
            TimeSpan ModifyDiff;
            bool ETagChanged;

            // Check If-Modified-Since request header, if it exists 
            string ifModifiedSince = request.Headers["If-Modified-Since"];
            if (!string.IsNullOrEmpty(ifModifiedSince) && ifModifiedSince.Length > 0 && DateTime.TryParse(ifModifiedSince, out ModifiedSince))
            {
                FileDateModified = false;
                if (modifyDate > ModifiedSince)
                {
                    ModifyDiff = modifyDate - ModifiedSince;
                    // Ignore time difference of up to one seconds to compensate for date encoding
                    FileDateModified = ModifyDiff > TimeSpan.FromSeconds(1);
                }
            }
            // Check the If-None-Match header, if it exists. This header is used by FireFox to validate entities based on the ETag response header 
            ETagChanged = false;
            string ifNoneMatch = request.Headers["If-None-Match"];
            if (!string.IsNullOrEmpty(ifNoneMatch) && ifNoneMatch.Length > 0)
            {
                ETagChanged = ifNoneMatch != eTag;
            }
            return ETagChanged || FileDateModified;
        }

        /// <summary>
        /// Generates a caching ETag based on file name and creation date.
        /// </summary>
        /// <remarks>
        /// </remarks>
        /// <seealso cref="GetFileETag"/>
        private string GetFileETag(string fileName, DateTime modifyDate)
        {
            string fileString;
            Encoder stringEncoder;
            int byteCount;
            Byte[] stringBytes;

            // Use file name and modify date as the unique identifier 
            fileString = fileName + modifyDate.ToString();

            // Get string bytes 
            stringEncoder = Encoding.UTF8.GetEncoder();
            byteCount = stringEncoder.GetByteCount(fileString.ToCharArray(), 0, fileString.Length, true);
            stringBytes = new Byte[byteCount];

            stringEncoder.GetBytes(fileString.ToCharArray(), 0, fileString.Length, stringBytes, 0, true);

            //{ Hash string using MD5 and return the hex-encoded hash }
            MD5 Enc = MD5CryptoServiceProvider.Create();
            return "\"" + BitConverter.ToString(Enc.ComputeHash(stringBytes)).Replace("-", string.Empty) + "\"";

        }
    }
}

and then specify the handler in your config (also do under httphandlers if not using iis7)

  <add name="pngs" verb="*" path="*.png" type="yourAssembly.HttpHandlers.ImageHandler, hcs.web" preCondition="managedHandler" />
  <add name="jpgs" verb="*" path="*.jpg" type="yourAssembly.HttpHandlers.ImageHandler, hcs.web" preCondition="managedHandler" />
  <add name="gif" verb="*" path="*.gif" type="yourAssembly.HttpHandlers.ImageHandler, hcs.web" preCondition="managedHandler" />