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.
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.
I have a blog located at http://air2airheatpumps.co.uk/wordpress (note the lack of a www.)
I have installed wordpress via the 123 reg control panel and as you will see for some reason its missing all the relevant styling, i've checked file permissions, reuploaded the themes etc and for some reason it just won't style. The site_url in the database is also correct.
I've also used chrome's inspector to check for any errors and can't see anything immediately obvious.
Any ideas?
Thanks
Marc
These are some general guidelines when dealing with problems like that:
Use the developer tools of your browser (Firebug, IE Developer toolbar or the Chrome Developer tools) to check for the most obvious errors (like wrong filenames). There is no reason to not use them.
The developer tools most probably highlight files which can't be loaded. Most of the times this is the result of an incorrect URL (like a misspelled filename).
The Content-Type of the files must be correct, otherwise the browser might ignore the contents of the file:
text/css for CSS files
application/javascript (text/javascript is apparently obsolete)
Use the developer tools to check what the server sends to the browser.
If for example HTML code is sent when loading a .css-file, there could be a rewrite rule which redirects everything to the index.php.
I'm targeting some SVG images with CSS to use as backgrounds on a few elements and having some strange issues. When going directly to the image it works fine, but when using in CSS I get the following error:
Resource interpreted as Image but transferred with MIME type text/xml
I've added an .htaccess file to the directory that serves the images with the following code, but it didn't help:
AddType image/svg+xml svg
Suggestions?
The probable explanation is that previously the HTTP headers specified a wrong content type, and now that you have fixed it, some software uses cached information. (Not uncommon when using XML files.) The simple way to check things out is to create a copy of the .svg file and refer to it in CSS using the new name.
When I test the URL you gave in a simple background rule, the image shows without problems on Firefox, IE, Chrome, Safari (tested on Win 7). But when I test this so that Content-Type: text/xml is sent by a server, all the browsers simply don’t show a background image; no error message is shown. So I suppose you tested with some special browser or with special settings.
Updating .htaccess did not work for me.
I added following line in /etc/mime.types and restarted apache server, cleared cache and it worked.
image/svg+xml svg
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?