Google PageSpeed: Cómo especificar caché de navegador

¡Buenos días! En este vídeo-tutorial vemos cómo especificar el caché de navegador para subir la puntuación de Google PageSpeed. ¡Vamos allá!

YouTube video

[cta-pagespeed]

Para especificar el cache de navegador en WordPress (aunque no tiene que ser WordPress, mientras el servidor sea Apache) seguiremos estos pasos:

1. Accedemos al archivo .htaccess en la raíz de nuestra página web.

2. Nos vamos al final del archivo e introducimos el siguiente código:

<IfModule mod_headers.c>
	Header unset ETag
        Header set Connection keep-alive
        FileETag None
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000
 
<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault A2592000
</FilesMatch>
 
<FilesMatch "\.(css)$">
ExpiresDefault A2592000
</FilesMatch>
 
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
ExpiresDefault A2592000
</FilesMatch>
 
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault A2592000
</FilesMatch>
</IfModule>
 
<IfModule mod_headers.c>
  <FilesMatch "\.(txt|xml|js)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
 
  <FilesMatch "\.(css)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
 
  <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
 
  <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>
</IfModule>

Nota de actualización: este código es diferente al del vídeo ya que he optado por usar fechas relativas en lugar de absolutas. Antes, todo el caché expiraba en un una fecha concreta (lo cual supondría un problema en caso que alguien utilizara ese código después de esa fecha) y en este caso el caché expirará 30 días desde su registro.

3. Disfrutamos de una puntuación un pelín más alta de Google PageSpeed 🙂

De esta manera hemos especificado que el caché los archivos con la extensión indicada expirará en la fecha indicada.

¿Te interesa un servicio de optimización de velocidad en WordPress? Es algo que he sacado muy recientemente para ayudar a los demás a tener páginas más rápidas y ligeras. Regalo un análisis de la web gratis así que ves por el enlace de antes y pide tu presupuesto sin compromiso 🙂

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web