I can't seem to get my ASP.net webforms site to cache CSS files. In IIS I configure Output Caching following the instructions at the link below. But when I monitor Network activity in F12 tools, there is no sign of caching.
Is there something simple I am missing ?
Link to instructions on configuring Output Cache in IIS
After examining Network activity some more, I noticed a lot of Result values of '403'. I am using JQuery UI libraries and the standard JQuery CSS base file was trying to import all known JQuery UI CSS files (i.e accordion, date picker). I didn't have these in my project. After removing unused imports, I no longer have any '403' results. And also that fixed the caching problem. The CSS files are now being cached.
Related
I got a project to work on that includes a lot of unwanted CSS within a stylesheet.
I used a few tools like "Audits" (Chrome), "CSS Usage" (FireFox) and "Uncss" Nodejs npm package.
They all output unused CSS for the current page that is refreshed or mentioned in CLI (uncss looks like this: uncss https://example.com > style.css)
I have thought of getting this by template - but the website I am working doesn't have any CMS and templates organized like Wordpress - it is built with Zend MVC Framework and there is no specific organized "templates".
What is the easiest way to clear unused CSS from all of my website in a more efficient way?
I am working on a tool, https://www.bleachcss.com/, that detect unused CSS based on user actions.
Thanks to a little snippet of JavaScript, the tools detect use CSS selector when your user interact with the page and then send a report back to our server.
We then aggregate all the reports sent by all your users, and then we create pull request automatically to remove the unused CSS from the code.
By using real user actions, we are sure to support any kind of website, even pure JavaScript applications. Moreover, we are not slowing down your build system by adding headless browser runs or static analysis into it.
We are still in beta right now but I would love to learn more about your app, so please contact us if you are interested in giving it a spin!
PLATFORM
* Asp.net Webforms - C#
* .Net 4.5
* Azure Web Hosting
* Chrome (43.0.2357.134 m) - Latest
PROBLEM
I am currently bundling CSS and Javascript using the ASP.NET Web Optimization Framework. When testing in my local environment, all is working great. You can clearly see that the aspx page is relatively small and the bundles are listed as separate individual files (cssAll & jsAll).
https://www.dropbox.com/s/dazt681qylk41hm/local-login-cache.PNG?dl=0
Once I deploy to Azure, the Javascript bundle does remain correctly linked and is cached, but the CSS bundle is no longer referenced. Instead, all CSS code is written directly into the head tag of the aspx file. This causes the aspx file to grow exponentially (from 5KB to 87KB) and it prevents the CSS from being cached. Interestingly, when I disable cache, the CSS file is now sent as a seperate file, and my aspx returns to its smaller size.
https://www.dropbox.com/s/eox7b0vc0mi27wo/azure-login-combined.PNG?dl=0
MY THOUGHTS & QUESTIONS
Is this normal behavior? Am I simply misunderstanding or misusing Chromes developer tools and/or the way CSS caching works?
If this is normal behavior, then why does my local environment respond differently to the Azure hosted environment?
If this is NOT normal behavior, then where could the issue be? (Please read considerations below to see what I have already tried or troubleshooted)
CONSIDERATIONS
I have confirmed that all CSS, Javascript, and relevant directory structures are identical between my local machine and Azure. (Web deploy handled this well)
I have tried the exact same tests with IE11 and Firefox, getting similar results. If caching is disabled, the CSS comes seperately as intended, but if caching is enabled, then CSS is verbosely written into head tag of aspx page.
Problem is not with Bundling because it is working. However, I have tried linking to each CSS file directly, rather than using the bundle, and the same oddity occurs.
I have completely cleared browser cache (using the clear browsing history in chrome) between tests and have used multiple computers to test this, yet the results are the same.
The page I am illustrating is very small, but other larger pages fair worse and can grow upwards of 600KB, due to this oddity.
The odd bundling behavior was finally resolved!
My local project was set to use "https" by default. However, when browsing my production site on Azure, I noticed it was using standard "http". Once I enforced all pages to be routed through "https" in Azure, my CSS was now properly bundled, linked and cached.
- As a disclaimer, I honestly have no idea why this works, but it clearly is a fix for my particular problem. If anyone can explain the "why", please feel free to do so.
I'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />
I've found that some of my ASP.Net web apps prompt the browser to load plugins that I'm not explicitely using and certainly haven't deliberately referenced in the project settings.
Two that come to mind are for MS MediaPlayer and the "SVG Viewer for Netscape".
The only commonality I've determined so far is that the two sites/apps affected both use Master pages (nested in some cases).
We don't use SVG file types (just the normal mix of jpg/gif/png) and no video/audio (not yet anyway).
Can anyone provide a hint as to where the references for these might be creeping in? e.g. Is it a server-level include? Or a .Net runtime default when using master pages?
Does anyone else even experience this, or is it just me?
No urgency, I'd just like to remove it if possible.
Thanks.
Al
If you look at the page source in your browser, you should see what's in the page that requires a plugin. If you load external Javascript, you will have to look at that too. Do you have ads on the site that include 3rd party code?
I am relatively new in C# and ASP.NET MVC.
There is something unusual that happens and it could be a simple property setup...
I have a MVC Web app and a css file associated with it in my Content folder.
Now everytime I do some changes in the css file I don't see these changes when I run the app. It seems that whatever I do the app keeps on using the old file. I can see it when I do a View Source on the page.
I played a bit with the Copy to Output Directory property in Web Developer without any good results.
Am I really missing something here ?
Thanks
Either restart casini, the web server for asp.net, the icon down by the clock or try hitting F5 in the browser a bunch of times.
Try clearing the cache in your browser.