How to store files in the browser cache

Question

I tried a Google tool to test the speed of my site. http://developers.google.com/speed/pagespeed/insights/

I was shown several points that need to be corrected, such as "Take advantage of browser caching". What I understood is to store files in the browser cache avoiding being always loaded when I enter the page. How can I do this?

As a programming language I am using php.

Note: all suggestions to improve the site that appeared to me are in the following image:

Answer 1

To take advantage of the browser cache, we essentially need to let the browser know when the files it has just collected expire, so that by that date it keeps them and will not collect new ones.

This information can be passed from the server to the browser in some ways. Below is an example using the file .htaccess Apache, example using function header() PHP and example using META tag in HTML:

Apache

Creating a file with the name .htaccess at the root of our project or in a folder and/or sub-folder where we have certain elements that we want to control, we can define the validity period of the files sent to the browser using the module mod_expires ^(English):

Example

# enable expirations
ExpiresActive On
ExpiresDefault "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/pjpeg "access plus 3 months"
ExpiresByType text/javascript "modification plus 3 months"
ExpiresByType application/javascript "modification plus 3 months"
ExpiresByType text/css "modification plus 3 months"

In the example above we are indicating for each type of file what its validity is, IE, how long the browser should cache them.

• access plus 3 months From the access to the file, save for 3 months
• modification plus 3 months From the date of modification, keep for 3 months

PHP

Via PHP we can make use of the function header() to make the browser aware of when to consider the file as expired:

// A partir das 5h da manhã do dia 20-07-2020 o navegador deve puxar nova cópia
header("Expires: Sat, 26 Jul 2020 05:00:00 GMT");

Or we can also:

// Ficheiro expira em 30 dias (60sec * 60min * 24horas * 30dias)
header("Cache-Control: max-age=2592000");

Anything sent to the browser via PHP should have appropriate headers for cache control in order to optimize the page download time when we talk about content that changes very sporadically.

HTML

With HTML we can also set a meta tag to tell the browser when the page expires, see specifications here ^(English):

 <!-- Não fazer cache -->
 <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

The accepted values are:

• Public - can be stored in public cache
• Private - can only be cached in private
• no-Cache - cannot be cached
• no-Store - can be cached, but cannot be archived

---

Summary

Cache via Apache is useful for controlling when documents like images, PDF, CSS, JS, etc expire...

Caching via PHP and HTML is particularly useful for controlling when a page whose content is static for a given time, dynamic but only changed from X to X time expires or defining content that should never be cached.

Of course this can also be accomplished via Apache as explained above.

Note: This answer aims to shed light on the cache control and some ways at our disposal. There are too many topics and techniques about cache control that can be used for specific purposes, but here’s an introduction.

Answer 2

You can set the directive Exhale through function header directly in PHP files.

You can also control the caching of files directly in the server settings (eg.: Apache).