4

Estoy analizando mi sitio web con algunas herramientas como por ejemplo validator.w3 entre otras para obtener una ejecución mucho más rápida del sitio web sin errores o demoras de ejecución.

La herramienta de Google PageSpeed Insights me indica que debo especificar caché de navegador mostrando el siguiente mensaje de aviso.

Especificar caché de navegador Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.

Me detalla un sin números de cosas por corregir, basándose al tema me indica en cada imagen / css / js que debo especificar el cache en cada uno de ellos.

Buscando en Stack Overflow entre otros artículos indican un ejemplo como este:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "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"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
</IfModule>

Ahora sí la especificación del caché se basa aquel ejemplo tendría un .htaccess demasiado extenso tengo demasiadas imágenes en el sitio web.

Encontré otro ejemplo en SO Inglés mucho más optimizado y muy sencillo el ejemplo, pero no se si sea valido.

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

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT"
    </FilesMatch>
</IfModule>

Tengo un directorio de archivos js/css/img estructurado de esta manera: assets/css/style.css

Mientras tanto mi .htaccess

# Activamos mod_rewrite
RewriteEngine on

# Seleccionamos el directorio base     para el RewriteRule
RewriteBase /project/

# Aquí nos evitamos comprobar que sea un archivo (agrego comprobación
# para detectar también directorio) en cada conjunto de reglas
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)$ $1 [QSA,L]

# Obtenemos todo lo que vaya tras "assets/" y subdirectorios previstos
RewriteCond %{REQUEST_URI} assets/(css|fonts|js|img)/(.+)$
# Entonces (si se cumplen todas las condiciones) redirigimos (R)
# y dejamos de evaluar el resto de reglas (L)
RewriteRule ^(.*)$ assets/%1/%2 [L,R]

# Tu/s regla/s
RewriteRule ^online-video-en-hd-gratis/?$ video.php [L,NC,QSA]
RewriteRule ^online/video/hd/free/?$ online.php [L,NC,QSA]

¿Ahora mi pregunta es? Cómo especificar caché de navegador de una forma más optimizada.

4
  • ¿Cómo especificar caché de navegador de una forma más optimizada? No entiendo la pregunta exactamente, ¿qué quieres optimizar? ¿el tiempo en caché? ¿los patrones de búsqueda? ¿la organización de los .htaccess? el 9 feb. 2017 a las 19:30
  • @OscarGarcia Si amigo la herramienta de Google PageSpeed Insights me indica que debo especificar caché de navegador me muestra un mensaje por corregir ejemplo: http://example.com/assets/css/app.css (no se ha especificado el tiempo de expiración igualmenete http://example.com/assets/js/jquery.min.js (no se ha especificado el tiempo de expiración) y así sucesivamnete los archivos PNG|.JPG|.SVG|.TTF|
    – J. Mick
    el 9 feb. 2017 a las 21:20
  • @OscarGarcia Mientras lo que me indicas aquí amigo ¿el tiempo en caché? ¿los patrones de búsqueda? ¿la organización de los .htaccess? la verdad no sé, en mi pregunta me base a ejemplos que encontré. Para mi esto es algo nuevo no se como realmente especificar caché de navegador no se si se utiliza realmente .htaccess o otra forma de especificar.
    – J. Mick
    el 9 feb. 2017 a las 21:23
  • @OscarGarcia Por otra parte ¿la organización de los .htaccess? sería importante porque tengo más de 180 errores y basándome al primer ejemplo al realizarlo de esa misma manera sería un .htaccess demasiado extenso... Ahora en el segundo ejemplo que encontré al parecer es mucho más mejor pero el problema es que no se si sea valido amigo para Especificar caché de navegador.
    – J. Mick
    el 9 feb. 2017 a las 21:30

1 respuesta 1

8
+50

No tiene nada de malo agregarle 10 líneas al .htaccess.

Este tipo de reglas no impacta significativamente en la performance del server, no debería haber diferencias en el tiempo de acceso más allá de alguna fracción de milisegundo, y es una práctica normal y recomendada.

El ejemplo que encontraste con menos líneas, sólo aplica a archivos con una extensión (una imagen no necesariamente se sirve desde una extensión dada, un archivo.php podría generar una imagen), y brinda una fecha exacta de expiración, que no es lo que estás buscando.


Para mi esto es algo nuevo no se como realmente especificar caché de navegador

¿Qué es el caché? Cuando accedes a una página por primera vez, tu navegador descarga todos los recursos (html, imágenes, css, js, etc.) y los almacena en una carpeta local especial. Luego, si se intenta acceder nuevamente a esa página, en vez de tener que descargar todo de nuevo, el navegador intentará utilizar las copias locales, disminuyendo el tiempo de carga de la página, evitando así tener que descargar contenido que ya tiene disponible.

Entonces, ¿cómo se controla? ¿cuándo usar la copia local y cuándo ver si el servidor tiene una nueva versión del archivo? Si bien tiene muchos detalles que se cubren en el artículo Almacenar HTTP en caché, lo importante es saber que uno puede configurar el tiempo que quiere que un recurso (un archivo) ya está en el caché del cliente (del navegador), no lo vuelva a pedir al servidor. Esto tiene a favor que se cargará más rápido, y en contra que si se modifica alguno de estos archivos, habrá usuarios viendo la versión vieja hasta que les caduque el caché. Por eso es importante especificar un tiempo razonable, de acuerdo a cómo sea tu web, cada cuánto se esperaría que se actualice cada archivo, y si es o no importante que utilice la última versión.

Cómo se configura. Con cada archivo, el servidor envía encabezados (headers). Dentro de estos encabezados, Cache-Control especifica cómo debería comportarse:

  • Con un límite de tiempo

    Cache-Control: max-age=2592000
    

    * 259200 segundos = 30 días

  • Preferir que siempre se verifique que no se haya modificado

    Cache-control: must-revalidate
    

    * Verifica la fecha de modificación antes de usar el caché

  • O directamente no permitir que el cliente cachee:

    Cache-control: no-cache
    

Más información en Cache-Control (MDN).

Para enviar este encabezado, se puede establecer en la configuración global del servidor, en un .htaccess, o enviarlo directamente desde alguna función del lenguaje de programación utilizado (por ejemplo, en PHP con header()).


Me detalla un sin números de cosas por corregir, basándose al tema me indica en cada imagen / css / js que debo especificar el cache en cada uno de ellos.
[...]
sería importante porque tengo más de 180 errores

Te marca muchos errores porque genera una línea por cada archivo, pero todos se resuelven fácilmente.



Respuesta

Depende de qué tiempos de caché quieras configurar para cada uno de tus recursos. Listo algunos ejemplos para que puedas elegir cuál te parece más indicado en tu caso (o que puedas generar algo mezclando estas opciones).

  1. Que todo en la web caduque en 1 semana

    En el .htaccess ubicado en el root de tu web

    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 1 week"
    </IfModule>
    
  2. Que todo caduque en 1 día, pero que los css caduquen en 1 semana y las imágenes en 1 mes

    <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. Que tu web no permita cachear, pero la carpeta de assets tenga un caché de 1 mes

    En /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"
    

    En /project/assets/.htaccess

    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 1 month"
    </IfModule>
    
  4. También podrías hacerlo como en el ejemplo anterior, pero con diferentes .htaccess para cada subcarpeta:

    • Uno en /project/assets/img/.htaccess
    • Otro en /project/assets/css/.htaccess
    • Otro en /project/assets/js/.htaccess


En definitiva, depende de qué quieras establecer como caché, pero no le tengas miedo a agregar 10, 20 o 30 líneas de este estilo al .htaccess.

3
  • Sólo una pequeña duda, yo tengo en mi directorio las imágenes en varias carpetas clasificadas a mi interés: assets/img/system/ aquí mis imágenes otro ejem assets/img/slider/ aquí mis imágenes ahora en el archivo .htaccess lo debo especificar de esta manera ExpiresByType assets/img/system/gif "access plus 1 month"
    – J. Mick
    el 14 feb. 2017 a las 17:10
  • O no? o bastaría de esta forma ExpiresByType image/gif "access plus 1 month"
    – J. Mick
    el 14 feb. 2017 a las 17:12
  • Bastaría con ExpiresByType image/gif "access plus 1 month" en el .htaccess global.... Otra posibilidad es poner un segundo .htaccess en assets/img/ con ExpiresDefault "access plus 1 month"
    – Mariano
    el 14 feb. 2017 a las 17:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.