I am working on a PHP site. All the pages are being cached by the browser so when something changes I keep having to pressing CTRL + F5 to get the latest version of the page. The issue happens in Firefox, Chrome and IE. The site is pretty old and uses query strings a lot for navigation.
I have tried using the following Meta tags as suggested in the answer below, however nothing appears to be stopping the browser caching the page.
https://stackoverflow.com/a/1341133/310098
Most of the time it is a good thing that the browser is caching the page and it's assets like JS, CSS, etc. This will lighten the load on your server, so don't turn it off lightly!
If you have an application that requires the cache to be turned off, you can use the HTTP headers mentioned in this article:
http://www.paulund.co.uk/disable-http-cache-with-php
Related
I'm having a problem inside wordpress custom-theme, where I enqueued style, but it doesn't seem to work without linking it in the index.php , when I edit the css I have to shift+f5 to see the changes, basically clearing the browser cache. My question is if there is any way to do this automatically.
Oh and also I forgot to mention, that I'm using WinSCP for reaching the FTP server of my wordpress website.
I tried to do the auto-clear cache using php, but with many attempts it didn't do anything or even better, prevented me from manually clearing the cache.
What I'm hoping for is 2 things: 1. My enqueued styles would work without linking them in html
2. The automatic clear-cache upon updating code using php
TL;DR Use Shift-F5 liberally when developing css, and disable any caching plugins on your site when developing anything.
Shift-F5 clears your browser cache. That cache holds objects like your css files, so your users' browsers don't have to download them again as they navigate from page to page on your site, or even when they return to your site later. That means css files are sticky. Using shift-F5 while working on your css is an inherent part of web development. There's no reliable way to clear css objects automatically.
Your sample code clears the server-side caches provided by a couple of caching plugins. Avoid that. Instead disable that kind of cache while hammering out your css.
WP_CACHE prevents the use of WordPress's persistent object cache, which handles entirely different kinds of data than CSS. It needs to be defined in wp-config.php to be useful, due to the arcane way persistent object caches are implemented (via an early-loading "drop-in" module). If the words "persistent object cache" don't mean anything to you, don't do anything with WP_CACHE.
Finally, your header() calls put headers on the HTML page you're generating, not not your css, javascript, or media objects. So, they're not useful for preventing browsers from caching your css.
In a typical WordPress / php / apache web server site, WordPress never touches the content of css: the browser requests those files directly from the web server. Some caching plugins adjust the caching headers on css, javascript and media. They do that by inserting web server directives into your site's .htaccess file. Disabling those plugins during css development helps avoid caching confusion.
Your browser devtools Network tab tells you which objects the browser retrieved from cache. It's super helpful when developing with cacheable objects.
So I'm building a web application using HTMl CSS and PHP, and sometimes when I make changes to the css file, the web doesn't react to it and I can even delete the whole file and still doesn't change a thing in the browser and I have to copy everything from the css file into a different css file and use that one and after that it works but it often takes only a few minutes and i have to change it back so currently i have style.css and styles.css and depending on the situation i use either the first one or the other one but its annoying, I think it could be something with the server I'm running it on localhost using XAMPP. Thanks for any suggestions.
It is because of the browser's cache.
If you are using Windows or Linux, just go on the browser and hit ctrl+f5 to clear the cache.
You can also click on google chrome's settings, then search for Cookies and site data and tap Clear data.
Or open Chrome's developer tools by pressing F12 then open the Settings (F1). Find the checkbox labeled Disable cache (while DevTools is open) under the Network heading and turn it on so Chrome will no longer cache your CSS files and always load the latest version when the dev tools window is opened.
Your problem come from browser cache.
It's not only happened to CSS file, but to script as well.
There are many solutions for this:
If it's occur to production environment:
You can versioning your script and stylesheet file
If it's just about developing in local environment:
You can empty cache and hard reload the webpage (by opening devtool, right click in reload icon, select empty cache and hard reload or just simply use ctrl + f5). This will need to be done every time you have a change in script or stylesheet file
Or you can disable browser cache (open devtool by pressing f12, switch to network tab in browser devtool, and check Disable cache.
I'm not recommend Disable cache. You should stick with empty cache and hard reload
I am trying to run a php based web app locally using wamp. On making changes to the html script in .php file, the page does not get updated. However, changes in css files are being updated. Any fixes to the issue?
If your code changes dont get reflected when you view the page, it has probably been cached by the browser.
Always use CTRL + F5 so the cache is refreshed when making changes.
Alternatively most browsers have developer extension and one of those is usually an option to turn off caching. You should look for that and set it while developing a site.
How do I Disable FireFox's Browser Cache COMPLETELY?
How to disable caching in Internet Explorer 9?
Disabling Chrome cache for website development
If you disable both of these lines in the php.ini file, this should no longer happen.
soap.wsdl_cache_enabled=0
opcache.enable=0
At least that worked for me.
Hope it helps.
When I'm coding HTML and CSS and load the page in the browser to check changes, sometimes it doesn't update for a while. This obviously causes problems with incremental changes where it's hard to tell if it's changed to suit my latest change or not.
I was wondering if there was a way around this? Possibly a browser (or mode) which is especially for this situation that doesn't have this behaviour?
Try Ctrl+F5 on Windows or Cmd+Shift+R on OSX, this will avoid your browser reading its cache when loading the page (at least when it's Chrome or Firefox)
You could try deleting your browser cache and reloading the page.
In case of CSS I also found sometimes I will need to load the CSS file separately in my browser and refresh it to update.
Sounds like your browser cache, you can test this by clearing it or doing a "hard refresh" to confirm.
You will need to throw some no cache headers if you want to stop this permanently, you can do this from the web server or server-side code depending on your setup (see How to control web page caching, across all browsers?)
On windows refresh with CTRL + F5. The browser will not show from cache. Also in developer tools you can tell it not load from cache
It is mostly because of browser cache.
Just a suggestion(You may find it useful, As an addition to other answers):
If you are on chrome then there is an option to disable cache while the dev toolbar is open. It works for me to ensure there is no caching while I am developing. (I keep my dev toolbar open all the time while developing so it works for me), Here is the screen shot.
Quote from chrome dev tools (https://developers.google.com/chrome-developer-tools/docs/settings)
General
Disable cache Will prevent the caching of resources ONLY for pages
which have DevTools open. This will not disable caching if the
DevTools are closed
.
Hmm could be a web server setting, caching request to your same resource. I used to see that a lot on tomcat with JSP. With tomcat we used to delete compiled classes ('work' folder), though, in your case with PHP you may check your server cache settings (files/sessions).
Example: "A typical web server, such as Apache, uses the time of file modification to inform a web browser of a requested page’s age, allowing the browser to take appropriate caching action. With dynamic web pages, the actual PHP script may change only occasionally; meanwhile, the content it displays, which is often fetched from a database, will change frequently."
Source : http://www.sitepoint.com/caching-php-performance/
Another workaround would be to touch (add a space and save) your PHP file when you want it to reload.
I have a website called www.kratosguide.com.
The site works as expected for approximately 90% of users, however, I have been getting a LOT of complaints recently that the page doesn't load completely in certain browsers such as chrome/firefox/opera.
Here is a screenshot that someone sent me of how the page loads: http://i.imgur.com/sqNX4.jpg
It appears that only the header and footer is loading and the content from index.php is not.
http://www.reddit.com/r/productivity/comments/w1y30/16_habits_you_should_do_everyday/
Here is a link that demonstrates a user stating the issue above -- (4th comment down).
My host is unable to replicate the issue on their end and they say it works fine. My friend kept refreshing his page cache and he could replicate the error but only intermittently.
Thanks in advance.
***EDIT: I forgot to mention the site runs on WordPress, also the site works fine for me in every browser, which makes it hard for me to see where the problem is coming from.
Check the console. You have some errors
Uncaught ReferenceError: jQuery is not defined - 068690ea.84e407.js:24
Probably caused by this script being called before the jquery library.
It's difficult to tell what is causing the error without being able to replicate it. I'd try to load it in various browsers and see if I can get it to do that. Then take a look at the console for any errors and inspect the DOM to see if the content even loads.
Yes, I still see the errors in the log.
Let me be clearer.
For me the web page loads and is visible 100%, but when I look at the console I see what is shown below. This is an indication you have a problem. My personal settings allow me to see the page but with different settings or plugins I would not be able to see the page. You need to fix your XSS error.
You can reproduce the problem yourself!
Download chrome (or firefox) and then load the page, look at the console, see the error.
Then fix it.
Original answer below
First step, fix these errors shown by chrome. Looks like you have a XSS error.
I saw over 1200 unused CSS element on your page. Try to optimize the amount of data a user has to download to see your website. I had similar issues with my site and I realized how much stuff users had to load to see my website.
I tested it under Firefox, Chrome, IE7+. I didn't get any issues.
You seems to be using WordPress so you might want to check the WordPress community for similar problem.