Solución a "Publica recursos estáticos con una política de caché eficaz" en PageSpeed.

Hoy dedicamos otro artículo a la optimización de las páginas mediante el arreglo de los errores detectados por un análisis en PageSpeed. El aviso que queremos arreglar hoy es el siguiente:

Publica recursos estáticos con una política de caché eficaz.

¿Qué es la caché?

La caché es un almacenamiento que se usa para guardar contenidos que se van a usar más veces, para poder acceder a ellos de manera más rápida. Si mi navegador no tiene que ir a Internet a buscar ciertos contenidos, la navegación por la página será más rápida.

Existe caché del servidor, y caché del navegador. Esta última es la que nos interesa hoy, y se guarda en los ordenadores de cada usuario. Dentro de lo que se guarda, en este caso nos vamos a centrar en los contenidos estáticos, es decir principalmente imágenes, ficheros de estilo (css) y ficheros con scripts (javascript).

Google se está quejando que esta caché, para estos ficheros, no está configurada de manera óptima.

Especificar correctamente los tiempos que se guardan estos ficheros es importante. Porque si no se definen estás obligando al usuario a ir a buscarlos a la web cada vez que se necesitan (lento e innecesario). Si los defines con un tiempo demasiado grande no se renovarán y los usuarios no verán cambios en tu web.

¿Cómo se puede definir la política de caché?

Como siempre en WordPress podemos usar un plugin para hacer esto. Pero los plugins también añaden scripts y usan recursos. Así que hoy vamos a explicar cómo hacerlo sin plugin.

Para ello vamos a usar el fichero .htacess del servidor, que podemos editar mediante un cliente como Filezilla (tendremos que mostrar los ficheros ocultos). Recordad hacer una copia de seguridad antes por si tenemos que volver todo a como estaba (en informática es vital tener un plan b,c,y d).

Hay dos maneras de hacerlo, con cabeceras Control de Caché o Expiración. Ahora la tendencia es con Control de Caché, pero os dejamos las dos para la versión de Apache.

Cabeceras de Expiración (método antiguo).

Os vamos a dejar el código que usamos aquí, recopilado de varios sitios web. Podéis usarlo todo o en parte. Y podéis modificar los tiempos. Recordad que está puesto en segundos, así que, por ejemplo, 31536000 es un año (365 días) y 2592000 es un mes (30 días).

El código que usamos es el siguiente:

<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType image/webp .webp
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.ms-opentype ._otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType image/svg+xml .svg .svgz
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType application/vnd.ms-opentype ._ttf
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/font-woff .woff
    AddType application/font-woff2 .woff2
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A864000
    ExpiresByType text/x-component A864000
    ExpiresByType application/x-javascript A864000
    ExpiresByType application/javascript A864000
    ExpiresByType text/javascript A864000
    ExpiresByType text/x-js A864000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A864000
    ExpiresByType video/avi A864000
    ExpiresByType image/bmp A864000
    ExpiresByType application/java A864000
    ExpiresByType video/divx A864000
    ExpiresByType application/msword A864000
    ExpiresByType application/vnd.ms-fontobject A864000
    ExpiresByType application/x-msdownload A864000
    ExpiresByType image/gif A864000
    ExpiresByType application/x-gzip A864000
    ExpiresByType image/x-icon A864000
    ExpiresByType image/jpeg A864000
    ExpiresByType image/webp A864000
    ExpiresByType application/json A864000
    ExpiresByType application/vnd.ms-access A864000
    ExpiresByType audio/midi A864000
    ExpiresByType video/quicktime A864000
    ExpiresByType audio/mpeg A864000
    ExpiresByType video/mp4 A864000
    ExpiresByType video/mpeg A864000
    ExpiresByType application/vnd.ms-project A864000
    ExpiresByType application/x-font-otf A864000
    ExpiresByType application/vnd.ms-opentype A864000
    ExpiresByType application/vnd.oasis.opendocument.database A864000
    ExpiresByType application/vnd.oasis.opendocument.chart A864000
    ExpiresByType application/vnd.oasis.opendocument.formula A864000
    ExpiresByType application/vnd.oasis.opendocument.graphics A864000
    ExpiresByType application/vnd.oasis.opendocument.presentation A864000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A864000
    ExpiresByType application/vnd.oasis.opendocument.text A864000
    ExpiresByType audio/ogg A864000
    ExpiresByType application/pdf A864000
    ExpiresByType image/png A864000
    ExpiresByType application/vnd.ms-powerpoint A864000
    ExpiresByType audio/x-realaudio A864000
    ExpiresByType image/svg+xml A864000
    ExpiresByType application/x-shockwave-flash A864000
    ExpiresByType application/x-tar A864000
    ExpiresByType image/tiff A864000
    ExpiresByType application/x-font-ttf A864000
    ExpiresByType application/vnd.ms-opentype A864000
    ExpiresByType audio/wav A864000
    ExpiresByType audio/wma A864000
    ExpiresByType application/vnd.ms-write A864000
    ExpiresByType application/font-woff A864000
    ExpiresByType application/font-woff2 A864000
    ExpiresByType application/vnd.ms-excel A864000
    ExpiresByType application/zip A864000
</IfModule>
<IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
         Header unset Set-Cookie
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
         Header unset Set-Cookie
    </IfModule>
</FilesMatch>
<FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|webp|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|WEBP|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$">
    <IfModule mod_headers.c>
         Header unset Last-Modified
    </IfModule>
</FilesMatch>

Cabeceras de Control de Caché. Método actual.

Os dejamos un ejemplo.

#Deshabilita ETag para que los navegadores sigan estas directrices.
FileETag None
# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0
 
# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
</FilesMatch>
 
# Set up caching on media files for 1 week
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
 
# Set up 2 Hour caching on commonly updated files
<FilesMatch "\.(xml|txt|js|css)$">
ExpiresDefault A604800
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
 
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary Accept-Encoding
</FilesMatch>
 
# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
 
AddEncoding gzip .gz
<Files *.css.gz>
  ForceType text/css
</Files>
<Files *.js.gz>
  ForceType text/javascript
</Files>
<FilesMatch .*\.(js|css)>
  RewriteEngine On
  RewriteCond %{HTTP_USER_AGENT} !MSIE
  RewriteCond %{HTTP:Accept-encoding} gzip
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule ^(.*)$ $1.gz [L]
</FilesMatch>

Activar la compresión.

Esto es además de lo anterior. En el caso ideal debemos añadir las Cabeceras de Caché y luego esto después.

Ya que estamos, podemos añadir la compresión de estos estáticos. Así reduciremos la cantidad de datos que tenemos que enviar y recibir. Para ello vamos a activar gzip o, en su defecto, deflate. Lo mejor es que añadamos esto antes del código anterior.

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
    AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>

Si añadimos esto en htaccess y hacemos la prueba de PageSpeed de nuevo, deberíamos ver que el mensaje mencionado ha desaparecido. Si no, apuntad los estáticos y ved si hay que ajustar algo más.

Nota: no se puede definir estas políticas para estáticos externos (recursos de terceros).

Os recomendamos los siguientes productos relacionados con la informática: