With the help of YSlow I'm trying to tune my pages a bit.
I thought it would be little effort for big gain to have my pages compressed.
After trying everything from here, here, here and here YSlow is still showing my pages are nog compressed.
I'm using asp.net mvc 1.0 on IIS6.
With the following rules in my global.asax I make sure that my static content is not handled by MVC.
routes.Clear();
// Turns off the unnecessary file exists check
routes.RouteExistingFiles = true;
// Ignore text, html, files.
routes.IgnoreRoute("{file}.txt");
routes.IgnoreRoute("{file}.htm");
routes.IgnoreRoute("{file}.html");
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
// Ignore the content directory which contains images, js, css & html
routes.IgnoreRoute("Content/{*pathInfo}");
//Exclude favicon (google toolbar request gif file as fav icon which is weird)
routes.IgnoreRoute("{*favicon}", new { favicon = #"(.*/)?favicon.([iI][cC][oO]|[gG][iI][fF])(/.*)?" });
This will make sure that my js and css files are statically accessible.
These are the relevant snips of my metabase.xml
<IIsCompressionScheme Location ="/LM/W3SVC/Filters/Compression/deflate"
HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
HcCreateFlags="0"
HcDoDynamicCompression="TRUE"
HcDoOnDemandCompression="TRUE"
HcDoStaticCompression="TRUE"
HcDynamicCompressionLevel="9"
HcFileExtensions="htm
html
txt
css
js
mvc"
HcOnDemandCompLevel="10"
HcPriority="1"
HcScriptFileExtensions="asp
dll
exe"
>
</IIsCompressionScheme>
<IIsCompressionScheme Location ="/LM/W3SVC/Filters/Compression/gzip"
HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
HcCreateFlags="1"
HcDoDynamicCompression="TRUE"
HcDoOnDemandCompression="TRUE"
HcDoStaticCompression="TRUE"
HcDynamicCompressionLevel="9"
HcFileExtensions="htm
html
txt
css
js
mvc"
HcOnDemandCompLevel="10"
HcPriority="1"
HcScriptFileExtensions="asp
dll
exe"
>
</IIsCompressionScheme>
(meta: not sure if I should be putting this on SO or on SF)
The problem is that compression is extension related, you need to specify all the extensions that should get either static or dynamic compression. You can probably see this by looking at the HcFileExtensions and HcScriptFileExtensions attributes respectively.
So with MVC shoe-horned into IIS6 where you don't necessarily have file extensions you will not be getting any compression for dynamic content. IIS7 does things differently since it uses a list of mimeTypes to trigger compression. IIS7 with integrated pipeline is where we're really expect to be placing MVC apps. In IIS6 its possible but its a kludge and compression is one of the casualties.
Edit
For static content on IIS6 bear in mind that compression happens on a separate thread and triggered after the first request to resource, the first request itself goes out uncompressed. Subsequent requests for the resource should then be supplied using the compressed version.
Related
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
In visual studio virtual server this works. But when I put site on IIS it doesn't display images from content folder.
var imgPath = '/Content/Images/Icons/' + icon + '.png';
var imageContent = '#Server.MapPath(Url.Content("-1"))';
image = imageContent.replace('-1', imgPath);
I get errors in browser foreach image
http://localhost/Content/Images/Icons/carwash.png Failed to load resource: the server responded with a status of 404 (Not Found)
First thing is first, are you sure that all of your 'icons' are part of the solution and are actually being deployed to your web server? I have had a few instances where I would add a file to the solution directory and VS does not automatically include in it the solution, thus it never actually gets deployed...
If that is ok and the images are actually there, my next question would be, have you tried just using the #Url.Content helper in your view to determine if that is working as it should?
<img src="#Url.Content("~/Content/Images/Icons/SomeIcon.png")"/>
EDIT
Since you are trying to accomplish this in Javascript and the above tag works in HTML, you should be able to condense that code up there to the following code:
var image = '#Url.Content("~/Content/Images/Icons/")' + icon + '.png';
Go ahead and let MVC get the path to the Icon folder and append your file and extension to that. This should eliminate the need for string replacement and still be able to process the icon paths in JS.
var image will now be the complete relative path to the icon file you have passed to this function. You can use this string to update and img src tag or create an image or whatever.
So I was reading this stackoverflow post about "autoversioning" in ASP.NET MVC for CSS/JS files and was wondering what the "best" strategy is to do this.
The solution provided inserts an assembly number - which means everytime you publish - it will change EVERY SINGLE file which is not ideal because if you make modifications to just 1 *.css or *.js then it will change each and every file.
1) How can it be done just for "single files" instead of using site wide assembly using modification date or something on IIS7 ?
2) Also if I have some sort of "static" asset like - http://static.domain.com/js/123.js - how can I use rewrite to send the latest file for a request if someone has integrated this static link onto their site ?
i.e. http://static.domain.com/js/123.js is the link and when a request comes for this - check and send latest file ?
ASP.NET 4.5+ comes with a built-in bundling & minification framework
which is designed to solve this problem.
If you absolutely need a simple roll-your-own solution you can use the answer below, but I would always say the correct way is to use a bundling & minification framework.
You can modify the AssemblyInfo.cs file like so:
Change
[assembly: AssemblyVersion("1.0.0.0")]
to
[assembly: AssemblyVersion("1.0.*")]
This means that every time the project is built, it will have a new assembly version which is higher than the previous one. Now you have your unique version number.
Create an UrlHelperExtension class that will help get this information when needed in the views:
public static class UrlHelperExtensions
{
public static string ContentVersioned(this UrlHelper self, string contentPath)
{
string versionedContentPath = contentPath + "?v=" + Assembly.GetAssembly(typeof(UrlHelperExtensions)).GetName().Version.ToString();
return self.Content(versionedContentPath);
}
}
You can now easily add a version number to your views in the following manner:
<link href="#Url.ContentVersioned("style.css")" rel="stylesheet" type="text/css" />
When viewing your page source you will now have something that looks like
<link href="style.css?v=1.0.4809.30029" rel="stylesheet" type="text/css" />
UPDATE: The previous version did not work on Azure, I have simplified and corrected below. (Note, for this to work in development mode with IIS Express, you will need to install URL Rewrite 2.0 from Microsoft http://www.iis.net/downloads/microsoft/url-rewrite - it uses the WebPi installer, make sure to close Visual Studio first)
If you would like to change the actual names of the files, rather than appending a querystring (which is ignored by some proxies / browsers for static files) You can follow the following steps: (I know this is an old post, but I ran across it while developing a solution:
How to do it: Auto-increment the assembly version every time the project is built, and use that number for a routed static file on the specific resources you would like to keep refreshed. (so something.js is included as something.v1234.js with 1234 automatically changing every time the project is built) - I also added some additional functionality to ensure that .min.js files are used in production and regular.js files are used when debugging (I am using WebGrease to automate the minify process) One nice thing about this solution is that it works in local / dev mode as well as production. (I am using Visual Studio 2015 / Net 4.6, but I believe this will work in earlier versions as well.
Step 1: Enable auto-increment on the assembly when built
In the AssemblyInfo.cs file (found under the "properties" section of your project change the following lines:
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
to
[assembly: AssemblyVersion("1.0.*")]
//[assembly: AssemblyFileVersion("1.0.0.0")]
Step 2: Set up url rewrite in web.config for files with embedded version slugs (see step 3)
In web.config (the main one for the project) add the following rules in the <system.webServer> section I put it directly after the </httpProtocol> end tag.
<rewrite>
<rules>
<rule name="static-autoversion">
<match url="^(.*)([.]v[0-9]+)([.](js|css))$" />
<action type="Rewrite" url="{R:1}{R:3}" />
</rule>
<rule name="static-autoversion-min">
<match url="^(.*)([.]v[0-9]+)([.]min[.](js|css))$" />
<action type="Rewrite" url="{R:1}{R:3}" />
</rule>
</rules>
</rewrite>
Step 3: Setup Application Variables to read your current assembly version and create version slugs in your js and css files.
in Global.asax.cs (found in the root of the project) add the following code to protected void Application_Start() (after the Register lines)
// setup application variables to write versions in razor (including .min extension when not debugging)
string addMin = ".min";
if (System.Diagnostics.Debugger.IsAttached) { addMin = ""; } // don't use minified files when executing locally
Application["JSVer"] = "v" + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString().Replace('.','0') + addMin + ".js";
Application["CSSVer"] = "v" + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString().Replace('.', '0') + addMin + ".css";
Step 4: Change src links in Razor views using the application variables we set up in Global.asax.cs
#HttpContext.Current.Application["CSSVer"]
#HttpContext.Current.Application["JSVer"]
For example, in my _Layout.cshtml, in my head section, I have the following block of code for stylesheets:
<!-- Load all stylesheets -->
<link rel='stylesheet' href='https://fontastic.s3.amazonaws.com/8NNKTYdfdJLQS3D4kHqhLT/icons.css' />
<link rel='stylesheet' href='/Content/css/main-small.#HttpContext.Current.Application["CSSVer"]' />
<link rel='stylesheet' media='(min-width: 700px)' href='/Content/css/medium.#HttpContext.Current.Application["CSSVer"]' />
<link rel='stylesheet' media='(min-width: 700px)' href='/Content/css/large.#HttpContext.Current.Application["CSSVer"]' />
#RenderSection("PageCSS", required: false)
A couple things to notice here: 1) there is no extension on the file. 2) there is no .min either. Both of these are handled by the code in Global.asax.cs
Likewise, (also in _Layout.cs) in my javascript section: I have the following code:
<script src="~/Scripts/all3bnd100.min.js" type="text/javascript"></script>
<script src="~/Scripts/ui.#HttpContext.Current.Application["JSVer"]" type="text/javascript"></script>
#RenderSection("scripts", required: false)
The first file is a bundle of all my 3rd party libraries I've created manually with WebGrease. If I add or change any of the files in the bundle (which is rare) then I manually rename the file to all3bnd101.min.js, all3bnd102.min.js, etc... This file does not match the rewrite handler, so will remain cached on the client browser until you manually re-bundle / change the name.
The second file is ui.js (which will be written as ui.v12345123.js or ui.v12345123.min.js depending on if you are running in debug mode or not) This will be handled / rewritten. (you can set a breakpoint in Application_OnBeginRequest of Global.asax.cs to watch it work)
Full discussion on this at: Simplified Auto-Versioning of Javascript / CSS in ASP.NET MVC 5 to stop caching issues (works in Azure and Locally) With or Without URL Rewrite (including a way to do it WITHOUT URL Rewrite)
1)
Use file modification time instead. Here's an example:
public static string GeneratePathWithTime(string cssFileName)
{
var serverFilePath = server.MapPath("~/static/" + cssFileName);
var version = File.GetLastWriteTime(serverFilePath).ToString("yyyyMMddhhmmss");
return string.Format("/static/{0}/{1}", version, cssFileName);
}
This will generate a path like "/static/201109231100/style.css" for "style.css" (assuming the your style.css is located in the static directory).
You'll then add a rewrite rule in IIS to rewrite "/static/201109231100/style.css" to "/static/style.css". The version number will only be changed when the css file has been modified and only applies to modified files.
2)
You can handle the request to 123.js via an HttpModule and send the latest content of it, but I don't think you can guarantee the request gets the latest version. It depends on how the browser handles its cache. You can set an earlier expiration time (for example, one minute ago) in your response header to tell the browsers to always re-download the file, but it's all up to the browser itself to decide whether to re-download the file or not. That's why we need to generate a different path for our modified files each time we updated our files in your question 1), the browser will always try to download the file if the URL has never been visited before.
I wrote a Url Helper which does the CacheBusting for me.
public static string CacheBustedContent(this UrlHelper helper, string contentPath)
{
var path = string.Empty;
if (helper.RequestContext.HttpContext.Cache["static-resource-" + contentPath] == null)
{
var fullpath = helper.RequestContext.HttpContext.Server.MapPath(contentPath);
var md5 = GetMD5HashFromFile(fullpath);
path = helper.Content(contentPath) + "?v=" + md5;
helper.RequestContext.HttpContext.Cache.Add("static-resource-" + contentPath, path, null, System.Web.Caching.Cache.NoAbsoluteExpiration, new TimeSpan(24, 0, 0), System.Web.Caching.CacheItemPriority.Default, null);
}
else
{
path = helper.RequestContext.HttpContext.Cache["static-resource-" + contentPath].ToString();
}
return path;
}
You could replace the GetMD5HashFromFile() with CRC or any other sort of call which generates a unique string based on the contents or last-modified-date of the file.
The downside is this'll get called whenever the cache is invalidated. And if you change the file on live somehow, but don't reset the application pool, you'll probably need to touch the web.config to get it to reload correctly.
You might want to have a look at Dean Hume's Blogpost MVC and the HTML5 Application Cache. In that post, he points out an elegant way of automatically handling versioning per request, using a class library of #ShirtlessKirk:
#Url.Content("~/Content/Site.css").AppendHash(Request)
This question is really old now, but if anyone stumbles upon it, here's to my knowledge the current state of the art:
In ASP.NET Core you can use TagHelpers and simply add the asp-append-version attribute to any <link> or <script> tag:
<script src="~/js/my.js" asp-append-version="true"></script>
For both ASP.NET Core and Framework there is a NuGet Package called WebOptimizer (https://github.com/ligershark/WebOptimizer). It allows for both bundling and minification, and will also append a content-based version string to your file.
If you want to do it yourself, there is the handy IFileVersionProvider interface, which you can get from your IServiceProvider in .NET Core:
// this example assumes, you at least have a HttpContext
var fileVersionProvider = httpContext.RequestServices.GetRequiredService<IFileVersionProvider>();
string path = httpContext.Content("/css/site.css");
string pathWithVersionString = fileVersionProvider.AddFileVersionToPath(httpContext.Request.PathBase, path);
For .NET Framework, you can get the FileVersionProvider source from here: https://github.com/dotnet/aspnetcore/blob/main/src/Mvc/Mvc.Razor/src/Infrastructure/DefaultFileVersionProvider.cs
You will have to do some work, like replacing the Cache with MemoryCache.Default or a ConcurrentDictionary or something, but the 'meat' is there.
This is my routing tables where do I put the various '.aspx' registrations?
//Turns off the unnecessary file exists check
this._Routes.RouteExistingFiles = true;
//Ignore text, html, xml files.
this._Routes.IgnoreRoute("{file}.txt");
this._Routes.IgnoreRoute("{file}.htm");
this._Routes.IgnoreRoute("{file}.html");
this._Routes.IgnoreRoute("{file}.xml");
//Ignore axd files such as assest, image, sitemap etc
this._Routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
//Ignore the assets directory which contains images, js, css & html
this._Routes.IgnoreRoute("Assets/{*pathInfo}");
//Ignore the error directory which contains error pages
this._Routes.IgnoreRoute("ErrorPages/{*pathInfo}");
//Exclude favicon (google toolbar request gif file as fav icon)
this._Routes.IgnoreRoute("{*favicon}", new { favicon = #"(.*/)?favicon.([iI][cC][oO]|[gG][iI][fF])(/.*)?" });
//Photo routes
this._Routes.MapRoute("PhotoAssets", "Photos/Photo/{photoId}/Size/{photoSizeClassificationId}", MVC.Photo.Photo(0, null));
//Handles department profile routes
this._Routes.MapRoute("WorkerProfileLeader", "Department/{departmentId}/Worker/Profile/Leader/List/{viewType}", MVC.WorkerProfile.List(PersonType.Leader, "", DisplayViewType.SummaryThumbnailList));
this._Routes.MapRoute("WorkerProfile", "Department/{departmentId}/Worker/Profile/{personType}/List/{viewType}", MVC.WorkerProfile.List(PersonType.Pleb, "", DisplayViewType.ThumbnailGrid));
this._Routes.MapRoute("WorkerProfilePerson", "Department/{departmentId}/Worker/Profile/{personType}/Detail/{personId}", MVC.WorkerProfile.Detail(PersonType.Pleb, "", ""));
//Default route mapping
this._Routes.MapRoute("Start", "Default.aspx", MVC.Home.Index());
this._Routes.MapRoute("Default", "{controller}/{action}", MVC.Home.Index());
Cheers
Anthony
Just make sure the first part or the URL ends with .aspx like:
this._Routes.MapRoute("WorkerProfileLeader", "Department.aspx/{departmentId}/Worker/Profile/Leader/List/{viewType}", ...
this._Routes.MapRoute("Default", "{controller}.aspx/{action}", MVC.Home.Index());
I'm pretty sure it in fact doesn't matter where in the URL the .aspx is as long as it's somewhere in there and is the first thing that appears to be a file extension. In fact, one trick I've seen is to put the .aspx in the folder name containing the application! In other words, the application name itself would be "myapp.aspx" even though that's just a folder.
As long as .aspx appears as the first file extension in the path IIS will use that file extension to handle the request.
How do I (in my controller) send a pdf that opens in the browser. I have tried this but it only downloads the file (both ie and firefox) without asking.
public ActionResult GetIt()
{
var filename = #"C:\path\to\pdf\test.pdf";
// Edit start
ControllerContext.HttpContext.Response.AddHeader("Content-Disposition", String.Format("inline;filename=\"{0}\"", "test.pdf"));
// Edit stop
return File(filename, "application/pdf", Server.HtmlEncode(filename));
}
After adding the edit above it works as it should, thanks.
You need to set the Content disposition HTTP header to inline to indicate to the browser that it should try to use a PDF plugin if it is available.
Something like: Content-Disposition: inline; filename=test.pdf
Note that you cannot force the use of the plugin, it is a decision made by the browser.
This (in addition to the other headers) does the trick for me in a plain .net web app:
Response.AddHeader("Content-Disposition", String.Format("inline;filename=""{0}""", FileName))
I'm not familiar with MVC, but hopefully this helps.
I think this relies on how the client handles PDF files. If it has setup to let Adobe Reader open the files in the browser plugin it will do that, but maybe you have set it up to download the file rather than opening it.
In any case, there is no way of controlling how PDF files will be opened on the user's machine.