16
Hello, I tried a site I’m doing in Google’s Pagespeed Insights, and it suggests "Take advantage of browser caching".
I wanted to know if it is really necessary and advantageous to store files in cache, or just put this tag?
<meta http-equiv="Cache-control" content="no-cache">
19
Not much use this metatag, it usually only works for HTML, which the Pagespeed Insights suggests is to cache files called via <script>, <link>, <img>, <video>, background-image: url(...) like images, javascript, css, fonts, video, etc.
Note:
The use of no-cache means that it will not store in the cache and what you want is the opposite of<meta http-equiv="Cache-control" content="no-cache">
Answering the question, yes it is very advantageous to use cache, this will decrease the consumption of your server making the response time better and avoiding possible server crashes when it has a high volume of accesses, as there will be fewer requests due to the "client side cache".
It is possible to do it using Apache (for your other questions I believe you use PHP and this usually uses Apache servers), you can then make use of .htaccess, create the file .htaccess in the root folder of your website (for example public_html or /etc/www) and put the following content into it:
#Cache de 1 mês a partir da data de acesso do arquivo
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
ExpiresDefault "access plus 1 mouth"
</FilesMatch>
This will cache 1 month for ico, gif, jpg, jpeg, png, css and js files.
In addition to the cache there is an HTTP code called 304, to use it you need to compare your browser cache with the server file through the modification date or through Etag as I explained in this question:
In the back end the server or application compares the header of the request (or Etag) and if there is no change the 304 Not modified is issued and no data is sent in the reply, to avoid downloading the file again if there are no changes, then the browser reuses the cache of the local machine (browser).
So your . htaccess could look like this to use the 304:
# Trabalha o if-modified-since com arquivos de imagem
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
# Cache para um mês
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 mouth"
</IfModule>
# Remove Etag para previnir o uso do mesmo
# Pois iremos trabalhar com if-modified-since e last-modifed
FileETag None
</FilesMatch>
You can also set a different expiration time for each file type, let’s assume that your site updates 1 time a week the images, but the css and js take rarely and the favicon will hardly be updated, can do so:
# Ativa o cache
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
<IfModule mod_expires.c>
ExpiresActive On
</IfModule>
FileETag None
</FilesMatch>
# Cache de 1 semana pras imagens
<FilesMatch "\.(?i:gif|jpg|jpeg|png)$">
<IfModule mod_expires.c>
ExpiresDefault "access plus 1 mouth"
</IfModule>
</FilesMatch>
# Cache de 1 ano pros icones (geralmente favicon)
<FilesMatch "\.(?i:ico)$">
<IfModule mod_expires.c>
ExpiresDefault "access plus 1 year"
</IfModule>
</FilesMatch>
# Cache de 6 meses pra arquivos js e css
<FilesMatch "\.(?i:css|js)$">
<IfModule mod_expires.c>
ExpiresDefault "access plus 6 mouths"
</IfModule>
</FilesMatch>
# Remove o Etag no final
<FilesMatch "\.(?i:ico|gif|jpg|jpeg|png|css|js|svg)$">
FileETag None
</FilesMatch>
Note that I used access plus, this means that the cache time is counted like this for example:
date and time of access (file request) + 6 months = date the cache will expire
There is the modified plus that works like this:
date and time of last file modification on server + 6 months = date that will expire the cache
I didn’t use the modified plus because if the file is old (not modified) it does not cache.
Thanks for the reply Guilherme! On this site I do not use PHP, so I create the file . htacess equal?
@Jefsilva php has no relation to the solution, I just mentioned it to assume that you used apache, if you use apache then. htaccess will work, if you don’t use apache tell you what kind of server you use, it’s IIS, Ngnix or lighttpd?
Heheh.... I was saying there that you want the opposite, but there is no example of how the opposite would be
@Magichat missed the "from" in my comment, I was making a reference to the AP code, the opposite of this is using . htacces or equivalent ;)
Cool, how to use this in HTML itself instead of . htacces ? is just to change the content/Cache-control value. and the value makes the rest automatic or there are more settings to be made?
@Magichat I can’t say, but the one of html itself actually server only to page and not to Resources, besides that you won’t be able to have a good control over it, the best is to operate in the back end using the headers (even for "html" pages generated by php)because you will have a different calculation control and headers instructions, simple example in php: $seconds = 3600 * 2; /*expira em 2 horas*/
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $seconds) . ' GMT');
header('Cache-Control: public, max-age=' . $seconds) = true;
header('Pragma: max-age=' . $seconds);
I understood, although I believe it is possible to operate through includes, still the solution in the back end seems much more advantageous... vlw man
@Guilhermenascimento How would the same be for IIS? At this http://cbsa.com.br/tools/online-convert-htaccess-to-web-config.aspx you obtain the correct code?
@Viníciuslima I think this only converts mod_rewrite, I’ll try to add an example.
@Guilhermenascimento will do the test with . htaccess ;) Thanks!
5
Cached files improve the performance of the presentation of your site, since the user when accessing a page and containing an element in it as an image for example, this image will be downloaded only once, the next time it accesses the page the cached image that will be displayed instead of downloading the image again. Just do not forget that when exchanging page elements and insert others change the names of the same, because if the user caches an element and the element is exchanged and it remains with the same name, again the image that will be loaded will be the one of the cache and not the one of the server making the element is outdated. https://www.java.com/pt_BR/download/help/webcache.xml Follow a nexus link with cache information.
Hello @Douglasamerico Welcome to Stackoverflow. Your question was not very explicit, I recommend that you first visit the OS tour. http://answall.com/tour
this post is the answer and not the doubt, but really needs to give an improved response
If you point your scripts to Cdn it will help in this sense of caching because when visitors access the site will search on Cdn and in many cases are already cached as well, see detailed explanation: https://www.gocache.com.br/tag/seo/
3
Surely there is a very big advantage in saving your site files in the cache, so the loading and the bandwidth spent by the user to access your site will be better. However, using this tag will not be enough, it basically gives you no control of the cache programmable, which unfortunately will still lead to some version problem. If you want to use the cache and do it in a programmable and intelligent way, I advise you to learn about service worker. Service Worker is a JS that was saved in the user’s browser and acted in a "proxy means", allowing you to manipulate how, and what, the files will be saved and loaded into the cache, doing update checks and allowing the user to access your website even if it is totally offline.
Service Worker: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
A facilitator for creating a service worker: https://github.com/GoogleChrome/sw-toolbox
#Usetheplatform
Browser other questions tagged html cache meta-tags
You are not signed in. Login or sign up in order to post.
You still haven’t chosen an answer to your question
– durtto