Save or not browser cache?

This meta-tag is not very useful, it usually works only for HTML, what PageSpeed Insights suggests is to cache the files called <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 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 avoid possible server crashes when it has a high volume of access, because fewer requests will be due to the cache of the "client side".

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 use .htaccess , create .htaccess in the root folder of your site example public_html or /etc/www ) and put the following content in 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 files such as ico, gif, jpg, jpeg, png, css and js.

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:

• You can use if-modified-since with "304 not modified" without PHP

In the back-end the server or application compares the request header (or Etag) and if there is no modification the 304 Not modified is issued and no data is sent in the response, to avoid downloading the file again, there is no changes, then the browser re-populates the cache of the local machine (browser).

So your .htaccess could look like this to use 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 type of file, let's assume that your site updates the images once a week, but the css and js rarely take and the favicon will hardly be updated, you 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, for example:

  

date and time of access (request to file) + 6 months = date that expires cache

There is modified plus that works like this:

  

date and time the last modification of the file on the server + 6 months = date that the cache will expire

I have not used modified plus because if the file is old (it has not been modified) it does not cache.

Cached files improve the performance of your site presentation, once the user when they access a page and contain an element in it as an image for example, that image will be downloaded only once, the next time the same access the page the cached image that will be displayed instead of downloading the image again. Just do not forget that when changing elements of the pages and inserting others, change the names of the same, because if the user caches an element and is changed that element and it remains with the same name, again the image that will be loaded will be the one cache and not the server's rendering the element outdated. link Here is a link with cache information.

Surely there is a great advantage in saving your site's files to the cache, so the upload and the bandwidth spent by the user to access your site will be better. However, using this tag is not going to be enough, it basically does not give you any programmatic control of the cache, which unfortunately will eventually lead to some versioning problem. If you want to use the cache and do it programmatically and intelligently, I advise you to learn about the service worker. Service Worker is a JS that has been saved in the user's browser and acts in a "proxy" way, allowing you to manipulate how, and what, the files will be saved and loaded into the cache, performing refresh checks and allowing the user to access your site even though it is completely offline.

Service Worker: link

A facilitator for creating a service worker: link

#UseThePlatform