The CSS files that I am using load some images like this:
eg: main.css:
.nav{
background-image:url("/www/images/bg.png")
}
<link href="/www/css/main.css?version=1.2" type="stylesheet" />
CSS File is loaded in the HTML as shown above.
I know there is an approach that adds a query string like "?version=1.2" to force the browser to load the css file from the web server not from cache. But my problem is that this works ok for css file, but does nothing to the embedded images.
So what can I do to make the browser download the images embedded in the css or js files when I edit the images, but the names stay the same?
I would like not to:
1. change the image name
2. disable caching
thanks
May be use chrome incognito to make browser get the images every time ?
Adding a query string to the url like ?version=2 only prevents caching when the url changes every time, for instance image.png?random=123, where the value of random is different every time the page loads. The unique url forces the browser to re-fetch the image every time since the url doesn't match the url of the cached image.
Since you're wanting to use a static URL, I would suggest setting your HTTP server settings to send a header to the browser not to cache images. Let me know if you need help with that.
Can you use .htaccess file on your hosting (with mod_expires)?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 minutes"
</IfModule>
EDIT: I saw your edit. Your question is that you want to force client to refresh images when you update them on server, without disabling browser cache?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "modification plus 1 seconds"
</IfModule>
Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick.
http://code.google.com/speed/page-speed/docs/module.html
It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.
Stolen from this post How to force browser to reload cached CSS/JS files?
Related
I got a problem with a wordpress website, i got a TTFB of about 8s.
My server is a debian 7 with apache, 3go RAM, hosting at gandi cloud IAAS
If i install a cache module (like SuperCache), when a page is in the cache everything is OK, pages are loading very fast
But for a new page, or with the cache module disabled, it's 8..9 seconds of loading.
My apache2.conf is configured like that :
<IfModule mpm_prefork_module>
StartServers 1
MinSpareServers 1
MaxSpareServers 3
MaxClients 10
MaxRequestsPerChild 3000
</IfModule>
<IfModule mpm_worker_module>
StartServers 1
MinSpareThreads 5
MaxSpareThreads 15
ThreadLimit 25
ThreadsPerChild 5
MaxClients 25
MaxRequestsPerChild 200
</IfModule>
A free-m request says :
total used free shared buffers cached
Mem: 2858 1772 1085 0 166 1152
-/+ buffers/cache: 453 2404
The url of the site is https://www.super-taux.com
If someone got an idea... Thank you very much.
That is the nature of WordPress. The code and page Generation is generally horrific
Your TTFB is not the problem. For WordPress it is pretty good.
Your Server does not caching any of the static content
Character set is not specified
Keep Alive is not enabled
Your Server is Very Fast, 18,766,667 Bytes/Sec. and with the gzip compression the effective speed is 104,249,275 Bytes/Sec.
Base Page Size: 71,932 Bytes
Transmission Speed: 18,766,667 Bytes/Sec.
Compression: 5.6X
HTML Whitespace: 4.0%
Bytes Transmitted: 12,949 Bytes
HTML Transfer Rate: 104,249,275 Bytes/Sec.
The total page load time is the issue.
Typically with WP the order in which the CSS and JS files are loaded delays Start Render. If you test your page load at webpagetest.org, and look at the Waterfall you will see a large amount of time from the page loaded and Start Render.
WebPagetest Waterfall Details
The base page (Line 1) is loaded in 562 milliseconds, Start Render is at 2.789 sec.
Notice line 22 is a .woff2 font file and its Start Offset is 2.511 sec.
Then following that the Start Render begins. This one thing is costing you over 2 seconds.
Each time the Browser runs into a resource (e.g. CSS and Fonts) that can alter page layout, the Browser restarts Rendering. Meanwhile each JS file that has been loaded prior to the last CSS stops Rendering as the Browser parses the JS.
If SuperCache is working for you then you must have static web pages. With static pages you do not have to have WP Generate the pages dynamically.
If you need WP to design your pages then copy the pages rendered by WP and use them as static pages.
This may require you change the links from one page to another.
Then you will also have the ability to correct the order of the resources in the <head> and move all the CSS and Fonts above any JS and move the appropriate JS down to the bottom of the page.
Run the Google PageSpeed Insights
PageSpeed Insights
And follow the link to Eliminate render-blocking JavaScript and CSS in above-the-fold content
You need to fix your Server configuration. it is best to add this to the httpd.conf but a quick fix is to create an .htaccess file that would include the following:
AddCharset utf-8 .html .css .php .txt .js .svg
Header unset ETag
FileETag None
ExpiresActive On
ExpiresByType image/* A31536000
ExpiresByType text/* A2592030
ExpiresByType application/* A2592030
<FilesMatch "\.(js|xml|gz)$">
Header set Cache-Control "max-age=2592030, public"
Header append Vary: Accept-Encoding
</FilesMatch>
<ifModule mod_headers.c>
Header set Connection keep-Alive
</ifModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)(\.gz)?$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<FilesMatch "\.(html|js|css|xml|gz)$">
Header set Cache-Control "max-age=86401, public"
Header append Vary: Accept-Encoding
</FilesMatch>
Your site has very long time to Start Render (when the user sees something) and to a complete page.
1) You are loading a lot of CSS, which delays rendering. Most of it (193 KB GZipped!) looks like Bootstrap and libraries to support swipebox. Do you really need all of that? For example:
Can you reduce Bootstrap down to the subset you really need (perhaps using Less or Sass)?
Where do you use swipebox? I don't see it on the front page. If you are using a WordPress plugin that's adding it in, many plugins simply add their CSS and JS to every page, whether they are being used on that page or not. This means that everyone has a performance penalty, even if most people will never see the lightbox. There are ways to disable plugins that do this on pages where they are not being used.
2) You are loading a lot of Javascript files (perhaps from plugins). These also delay rendering. If you can limit them to the page(s) they are needed or make them asynchronous, then they will not delay rendering (but they will still slow down the page).
3) You are getting a lot of delay from using SSL/TLS. Do you really need that for every page? Two suggestions:
Use SSL/TLS only on pages that really need it (where the user is going to enter sensitive information).
If you really need to use SSL/TLS, move all of your static content (CSS, JS, images) to a CDN. That way, you will not be getting the SSL/TLS penalty for static files.
4) You use a lot of small images. Consider using a sprite instead. That way, there will only be a few images downloaded, saving a lot of HTTP connections (and extra penalty when using SSL/TLS).
Occasionally on my websites, I notice an external file won't be loaded. If I rename it and point to the new name it works fine. The old name refuses to work ever again.
Usually this happens with images, but today it happened to a css file. It happens spontaneously and unpredictably. When it happens to images they won't load by themselves in a browser window either. The css will load by itself, but won't be loaded by the page linking to it.
Here are 2 pages which are exactly the same, except they link to 2 differently named css files. The css files are identical, except for their names.
working - http://internetfind.com.au/test2.html
not-working - http://internetfind.com.au/test1.html
The web server is Apache.
Why does this happen and how can I prevent it?
i see on test1 the css file is not loaded as text/css but text/html. I also notice that you are running 2 different domains both running Apache. any chance you have 2 different .htaccess files? I am just speculating here as I dont have all the information but my guess would be the root directory running the test1 domain has a htaccess file where the MIME type are not defined right.
here is a link to a sample .htaccess file that comes with the html5 boilerplate distro. https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Another error is that Mordernizr is not defined which probably means that you have not linked the mordernizr library.
My Firefox console reports this:
The stylesheet http://www.agedcarefind.com.au/styles/styles-church.css was not loaded because its MIME type, "text/html", is not "text/css".
This suggests that your server isn't configured correctly and is serving the CSS with the wrong mimetype.
I can confirm the Firefox is requesting the file correctly, and it's being delivered - just not actioned.
test1.html is looking for this CSS
<link href="http://www.agedcarefind.com.au/styles/styles-church.css" type="text/css" rel="stylesheet">
This CSS file is ending with
#prev{position:absolute;z-index:101;height:100%;…
Somwthing is wrong with the file, try to edit it and it should work fine
e.g:
#prev{position:absolute;z-index:101;height:100%;}}
First of all, incorrect content-type for css files Resource interpreted as Stylesheet but transferred with MIME type text/html
Second - Uncaught ReferenceError: Modernizr is not defined
Content-type affects visualization of styles. May be you have some front-end server that changes content-type. Or your files are returned by server-side script - not enough details to answer clearly.
Based on the content of .css files I would say that you have some css compressor (removes white-spaces, new lines, reducing the size of .css file) running on server and may be it affects the content-type header.
When I change a CSS file and reload the page that includes it, I don't get the changes in my browser.
The only thing that works so far is: rename the css file, rename it back to the original name, reload the web page.
Any ideas what I can do to force apache to give my browser the up-to-date css file?
I have tried:
adding ExpiresByType text/css "access plus 1 second" to my apache VirtualHost configurations
touch mycssfile.css
adding a timestamp as parameter after the name of the css file in the href attribute of the link tag. E.g. href="<link rel="stylesheet" type="text/css" mycssfile.css?{timestamp}" />.
Looks like it's cached by your browser, not Apache itself.
To prevent this you can add something like
ExpiresByType text/css "access minus 1 second"
to your apache config.
In my experience often the caching is done in the browsers.
Try reloading the webpage pressing Ctrl+Shift+R (or Ctrl+F5 on ie).
This should force browsers to ignore files in the cache.
I have a system where cache max-age is set to 0 and there is problem, when I have made some changes in my style.css fail the changes dont apear to client. Browser will use the old cached version of css.
I have simple question: Does naming css file as style.css?123 will be cached as a new?
Yes, adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number1 of the CSS file.
Google Web Fundamentals has a great article on HTTP cache optimization. Especially the section titled "Invalidating and updating cached responses:"
How do you get the best of both worlds: client-side caching and quick updates? You change the URL of the resource and force the user to download the new response whenever its content changes. Typically, you do this by embedding a fingerprint of the file, or a version number, in its filename—for example, style.x234dff.css.
Do note, that the fingerprint does not need to be a sequential number. Any value – hash, version, etc. – will do as long as the risk of collisions is limited.
1) This is what's done here on SO, e.g. http://sstatic.net/js/global-login.js?v=12
You can append a unique query string, although this will use bandwidth.
You can rename your CSS file every time you make a change, IE:
main-v1.css
main-v2.css
main-v3.css
And then re-reference it in your pages. This saves bandwidth and forces browsers to reload it.
yes, appending a querystring parameter in each style.css file will force it to cache again.
because browser caches each static component with its url, so when url is changed, the new file will be cached.
You can trick the browser into thinking it's a new stylesheet every second by timestamping your CSS:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Which will give you this:
<link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" />
Taken from: Can We Prevent CSS Caching?
Using .htaccess file, you can define caching control on you files with special extensions.
You could include the following code in a .htaccess file:
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
For more information about .htaccess file, see Apache .htaccess Guide
hi i have a little problem
i uploaded a new version of my website.
and some users complained that they see some page i changed very very wrong.
anyway after a refresh they see it fine.
i think its because my css file got cached by them on an earlier time...
why isnt the browser downloading the css file by himself on first load?..
he should know the css file changed dosnt he?
thanks in advance
#UpTheCreek's method will work fine. But you can save some trouble by just changing the call and not changing the filename.
screen.css?v=12
This will also force a reload but will only require you to change the call.
he should know the css file changed
dosnt he?
Not necessarily. If your css files have been sent from the server with a max-age directive and/or an expiring date far in the future, browser are instructed to not make conditional requests to your resource (see http://developer.yahoo.com/blogs/ydn/posts/2007/05/high_performanc_2/) so they consider the resource in cache still valid.
In this case in order to force a new request you may need to rename the file or append a random querystring like file.css?848372034 or, even better, a version note like file.css?v=1
If you install the web developer toolbar (for Firefox or IE) you can disable cache. I use this when developing websites. It saves you having to rename your CSS every time you make a minor edit.
If you're on Apache try adding this in your root .htaccess:
<FilesMatch ".(css|jpg|gif|ico|jpeg|png|html)$">
ExpiresActive On
Header set Expires "Mon, 22 Nov 2010 06:00:00 GMT"
</FilesMatch> [L]
Include only file types you don't want cached , eg:
<FilesMatch ".(css|js)$">
If you know when you want to change files, set a future date - your site will be faster if these files are not regularly refreshed.
If you don't set an expiry date, browsers cache these files in proportion to their age.