Saving files in the browser cache

5

I tried a google tool to test the speed of my site. link

I've been shown several points that need fixing, such as "Take advantage of browser caching". From what I understand is to save files in the browser cache, avoiding to be always loaded when I enter the page. How can I do this?

As a programming language I'm using php.

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

    
asked by anonymous 24.04.2014 / 17:07

2 answers

7

To take advantage of the browser cache, we essentially need to make known to the browser when the files it has just collected expire, so that by then it will keep them and will not collect new ones.

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


Apache

Creating a file with the name .htaccess in the root of our project or in a folder and / or sub-folder where we have certain elements that we want to control, we were able to define the expiration date of the files sent to the browser making use of 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 file type what their validity is, ie how long should the browser cache them.

  • access plus 3 months → From file access, save for 3 months
  • modification plus 3 months → From the modification date, save for 3 months


PHP

Via PHP we can make use of the header() function to make the browser known from when you should 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 that is sent to the browser through PHP should have appropriate headers for caching control to optimize 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 cached public
  • Private - can only be privately cached
  • no-cache - can not be cached
  • no-store - can be cached, but can not be archived

Summary

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

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

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

Note: This answer is intended to shed light on cache control and some forms at our disposal. There are too many cache control issues and techniques that can be used for specific purposes, but here's an introduction.

    
17.10.2014 / 19:32
2

You can set the Expires policy through the header directly in the files in PHP.

You can also control file caching directly in server settings (eg Apache ) .

    
26.04.2014 / 00:31