I have added an output caching rule to cache .ttf files in my website as in attached image cacherule.jpg
As in attached image browsercache.jpg the browser is not caching the .ttf files while it's caching other file type that don't have a rule set for them.
If i remove the cache rule for .ttf file , the browser will cache the files now so it actually working contrary to what i expected.
Cache rule
Browser with cache rule
Browser with no cache rule
Please help with that.
Regards
Nader
Related
On the, The Net Ninja Youtube channel I see the Ninja has disabled cache in his Laravel 6 tutorial. Just curious what's the benefit over enabling when coding?
So that changes made to resources loaded into the page, such as images, stylesheets, and scripts are always refreshed and reloaded when the page itself is reloaded (so you don't need to remember to press Shift+F5 or Ctrl+Shift+R).
When caching is enabled the browser may prefer its cached versions which may be stale instead of always using the latest-built assets.
However disabling caching is unnecessary if you use a content-addressing scheme for off-page resources (i.e. the URI of a script file or stylesheet includes its content hash (SHA-256, etc)).
I want to leverage browser caching for only some files, not all,
because my CSS and JS change very frequently. So I just want to cache some files only.
I know CDNs like Cloudflare save bandwidth by caching static files as images, JS, and CSS files.
I have a script that generates images on the fly and its location looks something like this:
http://domain.com/image.php?id=1
With id being the image id. Cloudflare won't cache these images due to the dynamic URL. If I add a mod rewrite rule to rewrite the URL to become something like:
http://domain.com/images/1
or
http://domain.com/images/1.jpg
Will CloudFlare cache the images in this case or the images have to actually be real files that reside in directories?
One way to check is to open a page containing an image and then use Chrome Web Inspector. Go to Network > Images, select an image, then under Header > Response header look for cf-cache-status.
If you see cf-cache-status: HIT then the image or resource is being cached by CloudFlare. I think the alternative is 'MISS"
Good luck
This question is a duplicate of one on StackOverflow already: Using CDN like Cloudflare with mod_rewrite to save bandwidth
The short answer, however, is this:
The easiest way to Cache Everything on a given endpoint in CloudFlare
is to use a Cache Everything Page Rule, an asterisk will match a
wildcard result. So in your first example we can do the following:
In Drupal 7 performance caching and bandwidth optimization are disabled. Whenever css/js file is loaded, there is a random(?) numbers and letters are attached like http://xxx/modules/system/system.theme.css?o9pvtm , http://xxx/sites/all/themes/test/js/handlebars.runtime.min.js?o9pvtm
How can I remove those "?o9pvtm" so js/css files can be cached by Nginx?
These random strings are added to ensure proper caching in browser and reverse proxies/CDN. Whenever the cache is cleared at the drupal end, the random string is changed. This will ensure that the updated files are fetched by the caching system. Generally the caching system can be configured to cache based on complete URL (including the query string). I am not sure about Nginx, but there should be some options to do so.
My first post here, been doing a lot of reading here some of which has been very helpful. However although there are many post on the browser caching none seem to cover my point below.
I have been updating our web site and have (as have many) come across this Leverage Browser Caching issue with page speed. Now rather than jump the gun and alter our .htacess file and be stuck with user seeing old content for weeks & weeks I thought I better doing some reading, having spent half the day doing such I now understand what it is and also about 'busting the cache'.
I understand that if I make a change to my .css file or an image file and I have used a time stamp it will update, example top_nav.png?123456 changes to top_nav.png?654321 this will be updated and re-cached as the browser would see it as a new asset.
However, lets say we have a .css file that itself is not updated, yet one of the images in the .css file is updated and is referenced with out a time stamp, from what I have read the browser would still use a cached version! Am I correct..?
Would this mean having all images in the .css file time stamped, thus meaning when the image is updated, in effect the .css file is also updated, causing the browser to reload the .css file and thus the image.
Sorry for the long winded post, just trying to make the point clear as I can.
Thanks in advance,
Gary.
You are correct about a name change forcing the client to update a file. The caching is not recursive, however; a cached .css file does not mean images or other content it links to are also cached.
For example, say I have this in my .htaccess file:
<filesMatch "\.(xml|txt|js|css)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
A user requests index.html, which references a css file. The css file also references some background .jpg images. If the the user has previously visited the page, the css file is cached but the .jpg images will be reloaded since they are not set as cached in the .htaccess.