How can I cache OR serve custom web fonts faster in Asp .Net MVC? - asp.net-mvc

I am working on a website and it is pretty fast actually but the custom web fonts are preventing it to be faster. The web site is loaded about 4 seconds but the fonts takes 2 seconds to be loaded, is there a way to load it faster?
I placed the web fonts as woff format in my project folder as static files.
and i just marked the static files as below.
<staticcontent>
<clientcache cachecontrolmode="UseMaxAge" cachecontrolmaxage="365.00:00:00" />
</staticcontent>
This adds an expired header to the files which is Ok but I'm looking for the other ways to load them faster if there is an one.

Related

"no enabled plugin supports this MIME type" message on mobile device for PDF document

Recently the google search console reported a coverage issue on our ASP.NET website for the urls pointing to PDF documents.
So far in our web.config file we don't have any MIME setting for PDF documents. But indeed, both on localhost and in production, in Chrome, in mobile context PDF url generate empty content with the message no enabled plugin supports this MIME type:
In Desktop context the PDF document is opened directly in Chrome.
Updating the web.config file with that (below) leads to the same described behavior, both in mobile and desktop contexts.
<system.webServer>
<staticContent>
<remove fileExtension=".pdf" />
<mimeMap fileExtension=".pdf" mimeType="application/pdf" />
</staticContent>
<system.webServer>
Updating the web.config file with that (below) forces the browser to download the PDF in both contexts.
<system.webServer>
<staticContent>
<remove fileExtension=".pdf" />
<mimeMap fileExtension=".pdf" mimeType="application/octet-stream" />
</staticContent>
<system.webServer>
So far this is the best solution since it allows mobile users to get the PDF and this will fix the google warning.
However I'd like to open the PDF in the browser itself in desktop context and download it in mobile context. Is it possible?
The observed behavior is device/media-type specific; handling this at the web server level is challenging to put it mildly. There are some simple approaches but they take you only so far, some commercial IIS detection solutions can help.
I guess, making adjustments to the website would be probably more beneficial. There might be header issues, or acknowledging this behavior and manage the expectations.
Consistent behavior across mobile devices is difficult and there is simply no foolproof way to determine whether a device, mobile OS, or form factor is able to open in HTML-embedded PDF documents like it is the case on the desktop. The lowest common denominator of displaying an embedded document on all common browsers and devices is usually having a download link.
For me the issue was viewing the page in responsive mode, Chrome doesn't support showing pdf in this mode, switched to regular desktop mode and the PDF appeared. The mobile view can be tested by switching back to responsive mode after the file has been loaded.
I had the same error message for a relative PDF link at localhost, but the same url worked as expected when deployed to a live https url

MVC Site Compression not working

I have done and checked the following.
1. made sure components are installed...
Made sure everything is enabled for the server in IIS
Made sure the site has modules enabled
Enabled the settings in web.config
<system.webServer>
<urlCompression doStaticCompression="true" doDynamicCompression="true" />
</system.webServer>
My site here http://tinyurl.com/lv44hl4 according to few sites when i enter my url in it says not compressed, for example
http://tinyurl.com/nzfv9z4 (GZIP TEST SITE WITH MY URL)
Am i missing something? (using IIS8, mvc5 and .net 4.5.1)
Ctrl-Shift-I will open developer tools in Google Chrome. According to that your content is compressed via gzip.

Relative paths in CSS not valid when using MVC w/Bundles

I've been developing a MVC5 web application for several months. I've published to each of 3 servers used for development, testing and the intended public server. Everything has been tested by a team of a dozen beta testers and a decision was made to go live with the web app this weekend.
Prior to publishing the web app to the live (public) host I modified the web.config to disable debug mode for the public site. After publishing, all kinds of problems cropped up related to missing CSS and JS resources.
After reading a lot of articles regarding Bundles and 404 errors, I found one that hinted to add the following to Web.config:
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
This resolved the 404 issues for the StyleBundle and ScriptBundle configurations, but now I have 404 errors for images that previously worked fine. I'm not sure of the best way to resolve these. I don't want to relocate the images and I don't want to edit the CSS since these are distribution files (jQueryUI, ThemeRoller, DataTables, etc). I want to leave their distribution folder structure and original source files (CSS and JS) unmodified.
An example of the problem.
DataTables distribution is in my ~/Scripts folder:
/Scripts/DataTables-1.10.2/
/Scripts/DataTables-1.10.2/media/css
/Scripts/DataTables-1.10.2/media/images
/Scripts/DataTables-1.10.2/media/js
Bundles configuration:
bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
"~/Scripts/DataTables-1.10.2/media/js/jquery.dataTables.js"));
bundles.Add(new StyleBundle("~/bundles/DataTables.css").Include(
"~/Scripts/DataTables-1.10.2/media/css/jquery.dataTables.css"));
jquery.dataTables.css contains references to ../images/someimage.png and with Web.config debug mode enabled this works flawlessly. Now that debug mode has been disabled and Bundles are minifying/combining, I am getting 404 errors:
http://example.com/GenericError.htm?aspxerrorpath=/images/someimage.png"
It seems as though the image URL is now assumed to be relative to /Bundles/ - though I'm not positive.
There must be an additional configuration I'm missing. Can someone point me in the right direction?
EDIT
Raphael's comments on this question and his URL to another similar SO question did not help to resolve this problem. Sean's recommendation of BundleTransformer seems like it might work but I don't find any documentation on how to install this package.
See my answer at:
CSS/JS bundle in single file in mvc when publish with release option
It deals with this exact issue and the options you have to resolve it.

How do I protect a file from direct download?

I have a webshop im developing, and some of the products need to be downloadable files (e-books, images, mp3 etc.). I have the files stored in a subfolder in my project and just a reference to them in my DB.
I dont want anyone with a direct file link to be able to download them, i want to control this myself. The download should only be available through my shop - that is, my customer area where the user can see all the e-products they have purchased.
How do i protect the files on my disk from being downloaded except by my code?
There are several ways to prevent the IIS static file handler from serving out the files to a client.
1) Using section in configuration. You can use the hiddenSegments element to specify sub-segment paths that will not be served. Look at %windir%\system32\inetsrv\config\applicationhost.config for how this section is defined and used to prevent access to bin folder and other directories.
<configuration>
<system.webServer>
<security>
<requestFiltering>
<hiddenSegments>
<add segment="subdirectoryName" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
2) If you're looking for a simpler "poor-mans" way of blocking static file handler from serving out files, you can make the files "hidden" (from a file system attribute perspective). The static file handler will not serve out hidden files.
The easy answer: Don't place these files inside your site, place them outside the root of your site.
You can configure IIS to not serve requests to this folder with request filtering:
I'm assuming these paths are not paths you wanted to serve?

Cache CSS and JS files

When I refresh my website in less than 2-3 minutes, Firebug shows these nice requests:
1. /core.css 304 Not modified
2. /core.js 304 Not modified
3. /background.jpg 304 Not modified
BUT when I refresh after >3 minutes, I get:
1. /core.css 200 OK
2. /core.js 200 OK
3. /background.jpg 304 Not modified
Why my CSS and JS files are downloaded again and images aren't?
I'm using ASP.NET MVC 3, I DON'T use [OutputCache], and in my /Content folder (where all css, js and img files live in subfolders) I have this Web.config:
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
</staticContent>
</system.webServer>
</configuration>
which sets HTTP header Cache-Control: max-age=86400 ONLY. So basically CSS, JS and images are treated the same way, but somehow CSS and JS don't get cached for a longer period... why is that?
Hopefully this will help: http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache
The <clientCache> element of the <staticContent> element specifies cache-related HTTP headers that IIS 7 and later sends to Web clients, which control how Web clients and proxy servers will cache the content that IIS 7 and later returns...
This occurs with IIS or with the Visual Studio web server? for some time perceived this behavior while developing (using the VS web server), but when publish it in IIS this not occur anymore.
Could this be the bug in Firefox described here ?
You could test this by opening the same page in another browser and check what get's loaded using Fiddler or some other tool.

Resources