I've been googling and testing stuff for the past couple of days but unfortunately I cant find a solution for my problem...
I am working on a Symfony 2 application that uses a Service-Worker to cache a bunch of assets. For whatever reason I can't seem to add headers like ETag or Expires to the assets for a custom cache validation.
I am using PHP's built-in Web Server, so my initial thought was to add this piece of code to the htaccess file(s)*, because the assets are served by the server. It didnt work.
* web/.htaccess, app/.htaccess, src/.htaccess
<IfModule mod_expires.c>
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"
</IfModule>
What am I doing wrong? Looking at the response headers, they still look the same:
Connection:close
Content-Length:6133
Content-Type:text/css; charset=UTF-8
Host:127.0.0.1:8000
Should I configure the server to handle this kind of stuff? If so, what file and what data should I use?
Looking at the php server documentation it seems that this server only returns a minimal set of http headers, unlike apache. Which means I need to switch server in order to solve my problem.
Related
I've fine tuned the .htaccess file but could not make the Leveraged Browser Cache to work. GTMetrix tells me several .png and .svg images have no Expiration set.
1. Expires_module is enabled and running in Apache
2. Set Cache-Control and Enable Browser Cache are setup at the .htaccess.
The .htaccess code is below. Any advice to make browser caching work is welcome. :-)
#Set Cache-Control
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
#End Cache-Control
</FilesMatch>
#Enable browser cache
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
#End browser cache
#Enable HSTS
you need to ensure to Enable mod_expires on CentOS and Ubuntu,
Run following command on your CentOS system to see if Apache module mod_expires is enabled or not, It should show following output if enabled, otherwise you’ll see nothing in output.
httpd -M | grep expires
Another way to verify it is via httpd.conf file, open apache configuration file in your favorite text editor application (Vi/ViM, Nano etc) and search for following line. If successfully found, then your Apache has mod_expires enabled.
LoadModule expires_module modules/mod_expires.so
For Ubuntu system, we need to use a2enmod utility to enable Apache modules, simply run following command to enable expires module on Ubuntu.
sudo a2enmod expires
Once done, we need to restart apache for this change to take effect.
sudo /etc/init.d/apache2 restart
or
sudo service apache2 restart
Then go to GTmetrics or Google PageSpeed and test your url for "Browser Leverage caching" and check if cache time is updated as per your entry in .htaccess
I'm trying to optimize my website according to the recommendations from PageSpeed Insights. The link of my website is Evant. There are two recommendations that I have problem with; first is to eliminate the render blocking css. I tried to make some of them preload but it turns out the css is not loading properly when I do it, so I decided to leave all of them load synchronously. The second thing is about browser caching. I tried everything I saw online like adding a .htaccess file which I will write down later, but none of them worked.
The file directory structure :
.htaccess file :
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
What do you mean by recommendation? Something like the google lighthouse project?
For having non-blocking CSS, write the CSS of your entry module inline instead of loading it from a bundled file.
For caching the easiest solution are Service-Workers.
I have a Joomla site, running on an Apache server and am having problems with Firefox and Chrome browsers caching the page and not serving the latest version.
I have added this code to my htaccess file:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 60 seconds"
# My favicon
ExpiresByType image/x-icon "access plus 1 month"
# Images
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
# CSS
ExpiresByType text/css "access plus 1 week"
# Javascript
ExpiresByType application/javascript "access plus 1 week"
</IfModule>
If I clear the browser cache in Chrome and Firefox then load the site, I get the correct response headers for images, css and javascript as per the code above.
For the main document I get these respond headers on the first load:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Wed, 17 Aug 2005 00:00:00 GMT
Pragma: no-cache
But when I reload the page or even open it in a new tab those expires headers disappear, and the browser loads up the cached web page (with status code 304 not modified).
I'm at a loss to understand what is happening here. I'm on a mac and use Safari which doesn't have any of these issues so I'm puzzled why Chrome and Firefox don't behave the way I expect them to.
Perhaps it could be explained why the page has a different set of response headers in relation to the expires than the default in htaccess. Is this the way mod_expires works?
I hope there's enough info here to answer my query, thanks in advance.
this will help, take ref. by this link
http://php.net/manual/de/function.session-cache-limiter.php
I inputted the following into my ".htacces" file in order to start caching the Web Content. According to Google Page Speed and Yslow the pages are still not Cached. Are the modules wrong? Or is it that the apps are not showing the data correctly?
Site is running on Apache 2.0 on Server
.htaccess (part with caching modules):
# Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# Cache-Control Headers
<ifModule mod_headers.c>
#month
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
#week
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
#day
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=43200, private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# Turn ETags Off
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# Remove Last-Modified Header
<ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
Go into httpd.conf and look for the mod_expires line, it should not be commented out. Look for the mod_headers line and make sure it is not commented out.
Or (not for a critical app) there is an easy and dirty test: remove <ifModule mod_expires.c> and </ifModule> leave stuff in between, same goes for <ifModule mod_headers.c> and if your server fails with 500 internet Server Error then your probably missing one or both of those modules and they are not enabled. If so then go into httpd.conf and enable what you need.
You can also test your site's response headers using a tool like REDbot. Simply pick a resource URL like one pointing to an image and paste it in the tool to see what headers get sent back along with some recommendations. Note that it follows the domain's robots.txt rules and will not check the resource if it is disallowed.
And like Gerben said, using the net tab in firefox, chrome dev tools, or some equivalent web developer tool helps see what headers are being sent and received.
You also don't need to set Cache-Control public. And you don't need to use max age if you're also using ExpiresByType calls.
For more info read this great tutorial: http://www.mnot.net/cache_docs/
And learn by example: checkout how it is done in the html5-boilerplate at https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
For other popular server config examples like lighthttpd, Node.js, Nginx, etc. see:
https://github.com/h5bp/server-configs
I'm in a pickle here. I tried to set up caching using htaccess files. I made the mistake of setting the htaccess to maintain a cache of html and text files as well. The result was that since the site is a dynamic web application the html would be always generated based upon whatever activity is taking place on the site. However it keeps showing old cache.
I removed all entries from the htaccess file concerning the caching and even deleted my local cache. However its not working. What do I do here.
What happened was that I had put in the following code in the htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 30 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType application/x-javascript "access plus 60 days"
ExpiresByType text/css "access plus 60 days"
ExpiresByType image/x-icon "access plus 360 days"
</IfModule>
The first line in the snippt was the blunder here. Because of this I could only access old cached pages even though information on the site changes drastically. I removed the entire line however it hasn't worked at all as even now after having cleared my browsers cache hundreds of times I am still seeing cached results.