Ir Atrás

Cómo activar la caché del navegador

A título informativo, la configuración del servidor de caché (en el navegador del cliente) maximiza el almacenamiento en caché, lo que no quiere decir que los navegadores no lo hagan de forma nativa: de hecho, ya lo hacen en un determinado porcentaje, por lo que hay que ignorar lo que dicen los sitios de prueba a veces. Esto se puede demostrar fácilmente mediante 'Inspeccionar elementos' y luego 'red'; verá 'caché de disco', 'caché de memoria'

Nuestros servidores utilizan el servidor Apache por defecto, con Nginx encima en modo transparente: PROXY

En este caso, es a través del archivo htaccess que se pueden almacenar en caché los datos descargados por el visitante en su navegador, es una técnica de almacenamiento en caché que prevalece sobre todas las demás posibles...

De hecho, esto lo hemos activado por defecto en el servidor Apache de esta forma universal:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 week
ExpiresByType image/jpeg "access plus 1 week
ExpiresByType image/jpg "access plus 1 week
ExpiresByType image/png "access plus 1 week
ExpiresByType text/css "access plus 1 week
ExpiresByType text/html "modification plus 1 week"
ExpiresByType text/xml "modification plus 2 hours"
ExpiresByType text/javascript "access plus 1 week
ExpiresByType application/javascript "access plus 1 week
ExpiresByType application/x-javascript "access plus 1 week
ExpiresByType image/x-icon "access plus 1 week
ExpiresByType application/x-shockwave-flash "modification plus 1 week"
ExpiresByType image/svg+xml "access plus 1 week
ExpiresByType image/vnd.microsoft.icon "access plus 1 week
ExpiresByType application/font-woff "access plus 1 week
ExpiresByType application/x-font-woff "access plus 1 week
ExpiresByType application/vnd.ms-fontobject "access plus 1 week
ExpiresByType font/opentype "access plus 1 week
ExpiresByType font/ttf "access plus 1 week
ExpiresByType font/otf "access plus 1 week
ExpiresByType application/x-font-ttf "access plus 1 week
ExpiresByType application/x-font-otf "access plus 1 week
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|svg|png|gif|css|gz|swf|eot|woff|otf|ttf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=604800, private"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi|htm|html)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

<IfModule mod_headers.c>
Header set Vary "Accept-Encoding, X-HTTP-Method-Override, X-Forwarded-For, Remote-Address, X-Real-IP, X-Forwarded-Proto, X-Forwarded-Host, X-Forwarded-Port, X-Forwarded-Server"
</IfModule>

Varios problemas:
- si la configuración predeterminada a nivel del servidor no es adecuada, la configuración actual en su archivo htaccess tendrá prioridad
- si actualiza mucho su sitio web, es posible que le moleste el caché local de su propio navegador, desactive temporal o permanentemente el caché a través de su archivo htaccess con esto:
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>


Cuando estás en modo PHP-FPM con Nginx O quieres usar Nginx

El archivo .htaccess ya no tiene efecto, hay una configuración que puede activar usando el complemento 'Nginx-Manager', sección 'Optimizaciones de contenido', consulte la configuración: Expires /Cache control

Esta última configuración a nivel de servidor corresponde a esto:

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff|woff2)$ {
expires 16d;
access_log off;
add_header Cache-Control "public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
expires 16d;
add_header Cache-Control "public";
}

Si esta última configuración predeterminada no le conviene, como es el caso, por ejemplo, del sitio yoorshop.hosting, utilizamos esta:

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ {
expires 7d;
access_log off;
add_header Cache-Control "public";
add_header Access-Control-Allow-Origin "*";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
expires 7d;
add_header Cache-Control "public";
add_header Access-Control-Allow-Origin "*";
}

Por tanto existe la posibilidad de personalizarlo:
- deshabilite 'establecer encabezado de caducidad' usando el complemento 'Nginx-Manager', sección 'Configuración de la aplicación'
- proceder como se indica al final de nuestro artículo:
https://support.yoorshop.hosting/knowledgebase/3931/Como-configurar-un-sitio-con-NGINX-PHP-FPM.html

ver: Personalización de la configuración de Nginx