I noticed a flash of invisible text (FOIT) in Chromium based browsers (Google Chrome and Opera) on some websites, even when the web font file is already cached (browsing on the same site beyond the first load).
A more in-depth look reveals that this has something to do with the caching behavior. A FOIT only happens when the file is loaded from disk cache. Everything looks pretty steady, when the file is served from memory cache (following the built-in web inspector tool).
How can we influence in which cache the web fonts are placed?
Chromium based browsers seem to load gzipped content to disk cache. At least that’s the reason why the used .woff2 files weren’t loaded to memory cache.
As long as woff/woff2 files are already compressed, further gzipping is not necessary (http://www.phpied.com/font-face-gzipping-take-ii/). The bespoken FOIT was gone when I disabled compression for these files (some web servers enable compression for all files by default).
When using Apache as web server this can be archived with the following line of code:
SetEnvIfNoCase Request_URI \.(?:woff|woff2)$ no-gzip
Related
I recently enabled website compression through CloudFront that compress all compressible files (html, js, css).
It seemed to work fine on each browser I try it from but recorded browser tests failed over and over (both in datadog and in ghost inspector).
This is the error I get "Your website does not support being loaded through an iframe".
Did anyone came across with something similar to this?
I will appreciate any help! :)
While tuning my web app, I noticed that certain of my images are never loading from cache, even though they're completely static:
This particular file always loads from the server, but it should be cached. The only thing somewhat special about the file, AFAICT, is that it's sourced via a CSS class, which specifies the file via a background-image style. I'm not specifying any tricky headers or anything; it's just a regular jpg file.
There's a lot online about preventing caching, but I can't find anything about making it work when it doesn't seem to be.
Do you have caching software on your web server? If yes is it enabled? Since some can be disabled such as UnixyVarnish what is mainly found in cPanel. Images do get cached by default. Regardless of how its displayed. And your browser should automatically cache websites you visit, unless you have disabled it.
Does Adobe Flex support caching of the main application; i.e. if the user had previously loaded it and it hasn't been modified since last loaded, can the browser get the swf file etc. from it's cache? I'm on an embedded system with boa as the web server, so can modify any behavior there as needed.
Thanks,
Fred
Not sure if the actually is an answer to your question, but I can tell you that the browsers will cache the swf files as long as it is referenced the same way within your html.
Ie. we use src="myApp.swf?dummy=102032" when referencing to it to avoid caching. You can use httpfox or any other networking monitor tool to see when your swf is cached.
The browser does the caching automatically just like any other file you view through it. As long as the user has a cache setup in the browser, there shouldn't be a problem unless the URL to the file changes (that includes query strings).
There is also RSL caching, if you are using RSLs. By default, they are just in your output folder as SWFs, but you can use the Adobe signed RSLs which are of the SWZ extension, are hosted on the Adobe site, and are cached at the Flash Player level, not the browser. This means that even if a user has caching disabled in the browser, it will cache the RSL either way.
I'm using TypeKit to provide fonts for a site I'm developing. When the page is loading it loads slow (more than a second). Turns out that this is because it's downloading the fonts on every requests. It's beyond me that a service such as this doesn't have etags configured to get clients to cache the fonts...but I digress. Until TypeKit fixes this I host the CSS locally temporarily.
Anyone had this issue with TypeKit? How did you work around it? Perhaps I'm wrong?
According to a posting on their getsatisfaction.com account, they have at least some caching in place:
One thing to note is that although the fonts are served with an Expires header, they're also served with an Etag. The browser is required to make a request after 5 minutes, but will normally use the Etag to generate a 304 (Not Modified) response - meaning, the fonts aren't actually downloaded again.
can you check what happens using Firebug?
I'm using the WebDevHelper toolbar for Internet Explorer to troubleshoot HTTP requests/roundtrips on my SSL site and noticed that IE re-downloads my CSS :hover images every time they are triggered. This causes a huge amount of roundtrips.
How can I prevent this from happening?
Edit: All static content is served with cache-control: public, so images, javascript etc. are cached in Firefox and Chrome. This problem is IE specific.
Serve static content via http, sure, but don't do separate images for :hover states. Proper css image sprites should be used. It's just good practice all around, via https or http. There are tons of resources available for creating sprites. Supposedly SpriteMe, [ http://spriteme.org/ ] is an attempt to automate css image sprite creation.
If the images are being delivered from a different hostname than your main page, then you're hitting the artifact described here:
http://blogs.msdn.com/ieinternals/archive/2010/04/21/Internet-Explorer-May-Bypass-Cache-for-Cross-Domain-HTTPS-Content.aspx
Well there are multiple issues according to other Stackoverflow posts. FireFox 2.x also has this problem. But FireFox 3.x doesn't.
Will web browsers cache content over https
Also in Internet Explorer, you go to Tools > Internet Options > Advanced tab > Security section > Do not save encrypted pages to disk. It appears to be unchecked by default in IE6, 7 and 8.
Content served via SSL will not be cached for security reasons. If you want something to be cached, serve it via HTTP.
Have you tried adding to the header for those type of static files.
P3P: CP="CAO PSA OUR"
I know this works with in IE to allow storage of cookies through framesets and stuff. Not sure if it works with static files under HTTPS.
I know it sounds weird...
try to put a url to something that isn't exists (404 error). after this, all the rest of the images will be cached.