I've got a small problem on my site which hopefully you fine folk can help with. In order to improve Google page load speeds on my site (wheelingit.us) I installed browser caching in my .htaccess file according to this link:
http://wiki.dreamhost.com/Htaccess_tricks#Faster_Page_Load_Times_.2F_Bandwidth_Saver
My pagespeed definitely improved. However now I notice that when I change css styling or update text in one of the side-widgets it doesn't show on my web page. I'm thinking this is linked to the browser caching?
Anyway to make my css & widget box text changes appear on the page while still taking advantage of the browser caching? Or do I need to remove the browser caching altogether?
Nina
You can always add a query string to your .css file that you can force to update when you make changes.
something like stylesheet.css?v=1.0.
You can then just increment the v when you made changes.
After our discussion, it seems that you are using a Varnish - server-side- caching solution for performance optimization of your Wordpress site. Doing a purge on the plugin's cache should solve the issue.
To purge all CSS files from cache manually, open a command or terminal console and type:
$ curl -X PURGE "http://example.com/wp-content/themes/.*\.css"
You can follow instructions here for more examples:
http://wiki.dreamhost.com/DreamPress#Manually_Purging_the_Varnish_Cache_Via_SSH
There are other wordpress plugins that can help you do this, but they require you to install them which may be more overhead than required:
https://wordpress.org/plugins/varnish-http-purge/
Related
Whenever I make a change on my website I have to clear the cache of my browser so I can see said change. Is there a way to automatize this process? I have seen some similar posts here (suggesting using the cache-control meta tag) but all of them are from years ago, and I would love to get some updated answers. Also, I'm not sure if using those meta tags (eg. ) is the right way, as I've seen some people discouraging their usage.
You can add ?xxx to the css and js filenames and browsers will reload them whenever xxx changes. You won't need to rename your source files.
i.e.
<link rel="stylesheet" href="/animations.css?12345678"></link>
You may have seen content managers do this, with random strings generated on each session to force a reload on first load, and then cache for the remainder of the session.
If this is regarding .css and .js changes, one way is by appending something like "_versionNum" to the file name for each release. For example:
script.css // This is the URL for release 1.0
script_1.1.css // This is the URL for newest release [1.1]
You should also refer to this link for more information.
I run a website for a small company. The websites mostly contains text and images. Whenever i update the website by replacing a image or updating the css, it doesn't get updated on other people's browsers because it's been cached. I've found a way to get around this by adding a version number where i'm linking my stylesheet, however, this doesn't apply to images. What is the most simple way to get around this?
I've done a lot of research on the web and on stackoverflow, but they are all complicated solutions. There must be a better way.
Just to be clear, i know i can clear the cache in my browser. I'm looking for a solution that works for everyone who access my website.
You can add these meta tags and it will force a page to reload from the server on every reload. However, you should realize that this could result in a lot more data usage for both you and your users.
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
If you have a reload link or button on your html page, you can add this attribute to it to force a reload from the server. The 'true' parameter is what forces a full reload instead of a cache reload.
onClick="location.reload(true);"
You can rename your images (preferably) automatically when you want to avoid them being cached, adding a version number to their name. If you have something which does this automatically, then you bypass the problem of caching them.
If you want to keep the name of your images, then you can make the change only temporary.
Try versioning(?version) to the files to avoid browser caching.
it will be like filename.jpg?v1 filename.jpg?v2
Or if you are replacing files frequently try adding current timestamp for every page load
In php,
filename.jpg?<?= time()?>"
where time() is current timestamp
This means you are just changing the urls everytime.
Someone please explain this to me. I'm going crazy. I have a wordpress site and i can never make changes and simply see them in a browser.
So i get that i have to clear all caches etc etc etc. I do so and here are the scenarios:
a) i have w3 cache installed and then my website loads with no css.
b) i disable w3 cache but my website shows up with old css changes. I've added a whole bunch of .xxxxxxx { padding-right: xxpx;} things and they don't appear. But it is only the current changes that i'm in putting that are not showing up. i have a whole bunch of edits taht are showing up. So it must be some kind of cache!!!!##!##!##
I'm going nuts here. About to throw my computer out the window. Is there a way to just disable all caching or something of this nature until i'm done editing the website.
nhchat.com
I think your theme doesn't have support for w3 total cache. Just go into minification and select minification only (dont use "combine"). If the theme isn't built properly then it overrides the order that the files are loaded in. Secondly make sure that you edit the actual files (that are inside your theme directory) and not the cached ones.
Another thing to look into is the file permissions, right now the files cannot be accessed on your server. So make sure when you goto the address of your cached files, you should see a minified version of the files (right click > view source)
http://nhchat.com/wp-content/cache/minify/000000/dZFNjsIwDIUvRAisuMTsOEBkHNPxTH6q2FD19uO2g0pVsYvf--xnOWffCJIjUVByiUW5dG7SdCzghj55ECEVjyL-3mpRKvFw9l8wUrsmjtT81Mw4E2mSZZYNQsMB1d1ry-7iuWB6RFpmiY6J5HDyt8axo6VeyznO2h0MJDXvhWPmssUpUQcGsMX-z99DS-w3ke69DBhWf-sNdPtl_WjPeoh2s8y4tRpJbwvx89M2r7awkna7HwlYc1_FDvz2BW_ydhQ-RGsO9vwD.css
I have the following problem.
We have a site. I changed some sprites to make it look cooler. The thing is that we already have users and there is a big chance that their browser have the old images cached. Is there anyway to force a new request to images from them?
Note: On firefox (default settings) after some refreshes the new sprites are requested but seems like chrome (default settings) just doesn't request them unless you explicitly clear cache.
Another Note: One way would be to rename the sprites but this also means that we have to find them in css files and rename there also, etc. etc. etc.
Have a great day and ty for help.
One solution would be to add a random number onto the end of the image name e.g.
.mybackground {
background-image:url(../images/background.jpg?16549);
}
If you could make the number random every time the page is loaded via some JS or PHP or whatever that would work for you. YOu could maybe take the images out of your stylesheet and place then in a style tag in your header include or whatever so that you can do the random number bit to them. (Not sure if you could do directly into the stylesheet)
Renaming sounds more feasible. You can most likely automate it with (shell)scripts so it shouldn't be a too bad.
(Most IDE have a feature to find and replace in multiple files, you can use it to change the path to the sprite in the CSS files. Your best bet, is to give a new name for the new image for now.
As for later on, I suggest looking at your caching and expires headers of your web sever. (These are links to the Apache documentation, if your web server isn't apache, it would be same idea, but requires different implementation.)
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.