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