Reputation: 57
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
Upvotes: 1
Views: 370
Reputation: 20692
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" />
Upvotes: 1