On Wordpress, I would like to set the browser cache expiration on the “index.html” homepage to “0“.
And the rest of the html files in 1 week.
I tried to do it via htaccess using the code below
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 week"
<FilesMatch "^(index\.html)$">
ExpiresActive On
ExpiresByType text/html "access plus 0 seconds"
Header append Cache-Control "public"
</FilesMatch>
</IfModule>
But only a week’s setup works:
ExpiresByType text/html "access plus 1 week"
This setting inside “FilesMatch” is completely ignored.
ExpiresByType text/html "access plus 0 seconds"
However, when I try to disable the caching of the styles.css file instead of index.html, the code works.
It seems to be something related to the html type when it is inside “FilesMatch”
Can anyone help me with this, please?
WordPress doesn't use index.html. It uses index.php You can change your match like this:
<FilesMatch "^(index\.[a-z0-9]+)?$">
[a-z0-9]+)? matches any extension on the index file
Adding the ? makes the index file optional so that the rule might match the home page when the index file is implied rather than present in the URL.
if you are using WPRocket plugin for cache handling then it provide option to set value in particular page also
Related
I am failing the Google and GTmetrix speed tests miserably for my WordPress site. Both specify that browser caching is not enabled.
I have tried a few caching plugins, such as WP Super Cache, but they have had zero effect.
I have also manually edited the .htaccess file with the following:
##### EXPIRE CACHING - LEVERAGE BROWSER CACHING #####
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>
##### END EXPIRE CACHING #####
But, again, it has had zero impact. I have tried my host provider, BlueHost, three times and they have given me a different response each time but they all roughly equate to "nothing to do with us."
Does anyone have an idea what I may be doing wrong?
I feel like I am hitting my head against a brick wall with this one!
I would appreciate any help you can give me.
I was having the same issue with WP Super Cache (which is how I found this thread). I switched to WP Fastest Cache which solved it for me (it has it as a toggle setting in the options) - thought I'd post just in case you hadn't fixed it yet.
The code that you have added will work only when apache module mod_expires is active.
Alternatively, you can use the following code (add it to .htaccess)
# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# NEVER CACHE - notice the extra directives
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>
Please note, that this will leverage browser caching only for internal files, you can't control it for external files.
I currently have this in my .htaccess file for resource caching:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
Do I also need the Cache-Control meta tag on my pages for these rules to apply? i.e.
<meta http-equiv="Cache-control" content="public">
Both are setting different headers and values, the result in the browser will be the same whichever method you are using. The main difference is in the type of files each can apply to:
*a <meta> tag can only appear inside an HTML document; consequently, you cannot use it to control cache validity on non-HTML files (such as images), and it's possible that something would download the file without processing the HTML and spotting the tag.*
*the Apache Header directive (not part of mod_rewrite) can be applied to any file that Apache is serving, whether it is dynamically generated or not. This can include images, static HTML, CSS, and JS, plus whatever content you generate with PHP.*
The only disadvantage of the Apache directive is that depending on your setup and experience with Apache's configuration rules, it may be difficult to maintain more complex rules for different bits of data.
You may want to give it a try using PHP like below:
the PHP header() function can affect any file that you are serving dynamically with PHP. This could include, for instance, plain text or XML files, but might not include an HTML file you'd uploaded fully formed to your server. You could pass static files, including images, through PHP, but this would be an inefficient way of serving them.
How do I prevent the server caching css using .htaccess? I have tried the following
# enable expirations
ExpiresActive On
# expire GIF images after a month in the client's cache
ExpiresByType style/css 1
Recommended by freenode users (#httpd).
However this made my server 500.
What did they do wrong?
I don't know why that made your server 500, but this is what my .htaccess files have looked like, and it's been working fine for me. Based off of this .htaccess file (section starting at line 668).
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/css "access plus 0 seconds"
...
</IfModule>
You maybe will want to change this if/when the site goes into production.
Alternatively, I've gotten into the habit of versioning my css files, as such:
<link rel="stylesheet" type="text/css" href="http://path/style.css?v=0.03" />
Changing the 'version number' will force a reload. If you care to, you can automate this versioning process with PHP.
I am working on a Symfony2 application that uses a lot of images, JS and CSS files.
I would like the browser to cache these aggressively, so that the majority of pageloads will not re-requests these assets.
The default appears to be for the browser to keep re-checking them and for the server to respond with a 304 Not Modified. How do I change this so that it doesn’t even run this request? (I don’t mind if it uses ETag or Expires or whatever mechanism, just as long as the majority of page requests don’t run separate requests for all the images.)
I’ve googled around a lot and found a lot of information on how to do this for pages where you have a $request object in your controller that you can set various properties on. However, I’m asking how to do this for assets (such as images) which are not returned by any of my PHP code.
You must add this in your httpd.conf file :
ExpiresActive On
ExpiresByType image/gif "access 1 month"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/js "access 1 week"
ExpiresByType application/javascript "access 1 week"
The module 'mod_expires' must be activated
Also, don't forget to add an asset_version in your config file (see http://symfony.com/doc/current/reference/configuration/framework.html#ref-framework-assets-version), in order to invalidate cache when you change some asset
It is not for your web server, but for someone who use nginx+symfony the solution is:
Edit config.yml to enamle asset version control it describer here
#app/config/config.yml
framework:
# ...
assets:
version: 'v2'
Where 'v2' - is your custom asset verion name.
Edit your nginx config as it described here
server {
...
location ~* ^.+\.(rss|atom|jpg|jpeg|gif|png|ico|rtf|js|css)$ {
expires max;
}
...
}
Now all your assets will have the longest expiration period.
If your make new release and change some .css and .js files, just edit version name eg. from 'v2' to 'v3'.
When I refresh the page, it reloads the images which is something I don't want
I am working on two WordPress blogs, on two different servers. http://www.i-phony.com/ & http://www.dz-ahbeb.com.
They have the same exact template. But the is a problem is only with the first website. even though the settings are the same.
I tried disabling plugins and the problem was still there.
What do you suggest?
Thanks everyone
Update:
I added this to the .htacess file, and it made the blog load much faster, which means it saves cache, but I still can see the images "flash" they disappear before they appear again.
<IfModule mod_expires.c>
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
Looks to me like this is performance related. It's not that the logo isn't loading quick enough, it's that it's being requested too late.
If you look at a waterfall report for the i-phony site you'll see that the logo and the rest of the images are loading quite late. It's loading the logo file (request 33) way after it's loading a bunch of blocking javascript.
The other site is loading the logo and images much earlier (see waterfall here request 10) and loading the javascript much later to prevent it blocking the page render.
There are a few things you can do to speed up the loading of the images. Firstly I suggest you load as much of the javascript in the footer as you can and combine & minify as many css and javascript files as you can to lower the transfer amount and total requests.
You can use a plugin like W3 Total Cache to combine+minify+defer the js to footer without needing to make any changes to the underlying code.
Are they on the same server? It is possible that browser.cache header is different in different environments.
There are browser cache directives that can be sent to tell the client's browser how long to keep page objects like images, media content, page html, stylesheets, javascripts, etc in the local client browser cache before trying to refresh. These directives are enabled through DSO modules (apache web server), server configuration and .htaccess file entries.
Example apache directive
#Set caching on image files for 11 months
<filesMatch "\.(ico|gif|jpg|png)$">
ExpiresActive On
ExpiresDefault "access plus 11 month"
Header append Cache-Control "public"
</filesMatch>