How to Specify Browser Cache - PageSpeed ​​Insights?

There is nothing wrong with adding 10 lines to the .htaccess .

These types of rules do not significantly impact server performance, there should be no difference in access time beyond some fraction of a millisecond, and it is normal and recommended practice.

The example you found with fewer lines only applies to files with an extension (an image is not necessarily served from a given extension, a archivo.phpmight generate an image), and gives an exact expiration date, which is not what you're looking for.

For me this is something new I don't know how to really specify browser cache

What is the cache? When you access a page for the first time, your browser downloads all the resources (html, images, css, js, etc.) and stores them in a special local folder. Then, if you try to access that page again, instead of having to download everything again, the browser will try to use the local copies, decreasing the page load time, thus avoiding having to download content that is already available.

So how is it controlled? when to use local copy and when to see if the server has a new version of the file? While it has a lot of details that are covered in the HTTP Caching article , the important thing to know is that one can configure how long you want a resource (a file) to already be in the client's (browser's) cache, not to return it. to ask the server. This has in favor that it will load faster, and against that if any of these files are modified, there will be users seeing the old version until the cache expires. That is why it is important to specify a reasonable time, according to how your website is, how often you would expect each file to be updated, and whether or not it is important that you use the latest version.

How it is configured. With each file, the server sends headers . Within these headers, specify how it should behave:Cache-Control

• with a time limit

  Cache-Control: max-age=2592000
  

  ^{* 259200 seconds = 30 days}

• Prefer to always verify that it has not been modified

  Cache-control: must-revalidate
  

  ^{* Check the modification date before using the cache}

• Or directly disallow the client to cache:

  Cache-control: no-cache
  

More information at Cache-Control (MDN) .

To send this header, it can be set in the global configuration of the server, in a .htaccess, or sent directly from some function of the programming language used (for example, in PHP with header() ).

It details a number of things to correct, based on the theme, it tells me in each image / css / js that I must specify the cache in each of them.
[...]
would be important because I have more than 180 errors

It gives you many errors because it generates a line for each file, but they are all easily resolved.

Response

It depends on what cache times you want to set for each of your resources. I have listed some examples so that you can choose which one seems more appropriate in your case (or that you can generate something by mixing these options).

1. That everything on the web expires in 1 week

   In the .htaccess located at the root of your website

   <IfModule mod_expires.c>
       ExpiresActive On
       ExpiresDefault "access plus 1 week"
   </IfModule>
   

2. That everything expires in 1 day, but that the css expire in 1 week and the images in 1 month

   <IfModule mod_expires.c>
       ExpiresActive On
       ExpiresDefault "access plus 1 day"
       ExpiresByType text/css "access plus 1 week"
       ExpiresByType image/gif "access plus 1 month"
       ExpiresByType image/png "access plus 1 month"
      ExpiresByType image/jpeg "access plus 1 month"
   </IfModule>
   

3. That your website does not allow caching, but the assets folder has a cache of 1 month

   In /project/.htaccess:

   FileETag None
   Header unset ETag
   Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
   Header set Pragma "no-cache"
   Header set Expires "Wed, 1 Jan 2000 00:00:00 GMT"
   

   In/project/assets/.htaccess

   <IfModule mod_expires.c>
       ExpiresActive On
       ExpiresDefault "access plus 1 month"
   </IfModule>
   

4. You could also do it like the example above, but with different .htaccess files for each subfolder:

   • one in/project/assets/img/.htaccess
   • other in/project/assets/css/.htaccess
   • other in/project/assets/js/.htaccess

Ultimately, it depends on what you want to cache, but don't be afraid to add 10, 20 or 30 lines of this style to the .htaccess.