Especificar caché de navegador en wordpress es una tarea clave para que nuestra página web tenga una rápida carga. Es una de esas funciones o tareas que hemos de realizar una vez que hemos terminado de instalar WordPress, pero también es algo que muchos usuarios se saltan tras la instalación con el consiguiente problema. Os vamos a contar qué hacer para solucionar esto y optimizar nuestra web de WordPress.
Contenidos
Normalmente, el CMS WordPress no tiene páginas web estáticas, sino que construye las páginas que solicitamos en función de las peticiones que hagamos. Esto quiere decir que, si pedimos una página de contacto, el navegador web y WordPress crean esa página en el momento, cogiendo la parte de la cabecera, la parte del footer, la parte de documentación que tenemos para esa página, etc… Esto es una manera óptima de generar páginas web o al menos no generamos tantos archivos como con las páginas estáticas, donde repetimos muchas partes de información, llegando a crear muchos archivos que se diferencian en una frase o en una fecha.
Para que el número de peticiones que hacemos al servidor no sea muy alto, podemos introducir partes en la caché del navegador, permitiendo así reducir el número de peticiones y teniendo una velocidad de carga menor de las páginas de nuestro site, puesto que muchas partes de la página web ya están alojadas en la memoria del navegador.
Esta técnica trae muchas ventajas, pero también tiene sus puntos algo menos positivos. Uno de ellos es que ocupa espacio en el navegador web del usuario. El otro punto negativo es que las actualizaciones de nuestra web, por lo general, tardan más en aplicarse, debido a que en la memoria caché aún contiene partes antiguas o sin modificación alguna.
Estas partes menos positivas se pueden solucionar reduciendo la cantidad de espacio a usar en el navegador y aplicando una caducidad corta a esos elementos. Esto hará que el navegador almacene menos cantidad de datos de nuestra página web y durante un espacio de tiempo corto, obligando a pedir nueva información a la página cuando los objetos hayan caducado. De esta manera recibiremos las nuevas partes y las modificaciones de la página web.
Para especificar caché de navegador en wordpress podemos utilizar varios plugins, de pago y gratuitos, o bien podemos utilizar código para que nuestro site en WordPress lo especifique de manera nativa. La utilización de plugins es un método rápido para usuarios novatos de WordPress, pero a la larga empeora el rendimiento de nuestra página web. El código, en cambio, no solo personaliza nuestra web, sino que además nos ayuda a optimizar el sitio, pudiendo hacer que nuestra página web realice pocas peticiones al servidor o hacerlo más seguro frente a ciberataques.
Existen muchos plugins para WordPress que nos ayuda a especificar la caché del navegador. Entre los más famosos se encuentran WP-Super Caché, de la empresa Automattic; W3 Total Cache de Frederick Townes; y WP Rocket de la empresa WP Media.
La utilización de plugins es el método más sencillo y rápido para los usuarios novatos. De estos tres plugins, el más recomendado para usuarios noveles es WP Super Caché, un plugin muy sencillo, pero potente, que además está soportado por la empresa que ayuda en el desarrollo de WordPress, Automattic. W3 Total Cache es el plugin más completo, pero también es cierto que es extremadamente complejo para los usuarios menos experimentados, e incluso una mala configuración podría afectar negativamente a nuestra página web. La tercera opción es un plugin que se está volviendo muy popular por sus resultados y su manejo sencillo, pero también es cierto que es de pago y, si no queremos pagar por los plugins, WP Rocket no es la mejor opción.
Si podemos escribir código en los archivos de nuestro servidor, esta alternativa puede ser la mejor opción para solucionar el problema con la memoria caché del navegador. Al menos la mejor para el rendimiento de nuestra página web. En este caso hemos de modificar el archivo .htaccess de nuestro servidor. Una vez que localicemos este archivo (puede que esté oculto), lo editamos y añadimos al final del archivo el siguiente código:
<FilesMatch «.(js|css|ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$»>
Header set Cache-Control «public»
Header set Expires «Thu, 15 May 2018 12:00:00 GMT»
</FilesMatch>
Después guardamos el archivo y lo cerramos.
La primera línea nos indica el tipo de archivos que podemos incluir en la memoria caché del navegador; la segunda línea especifica el control que se le aplica; y, en la tercera se indica la fecha límite de caducidad de la página web. La fecha la podemos modificar a nuestro gusto, así que si queremos que caduquen rápido, la fecha tendrá que ser más cercana a nosotros y si queremos que dure más tiempo, podemos insertar la fecha del 2020 o aumentarlo hasta el 2050.
Otro codigo que suelo poner en el archivo .htaccess es:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg «access plus 60 days»
ExpiresByType image/png «access plus 60 days»
ExpiresByType image/gif «access plus 60 days»
ExpiresByType image/jpeg «access plus 60 days»
ExpiresByType text/css «access plus 1 days»
ExpiresByType image/x-icon «access plus 1 month»
ExpiresByType application/pdf «access plus 1 month»
ExpiresByType audio/x-wav «access plus 1 month»
ExpiresByType audio/mpeg «access plus 1 month»
ExpiresByType video/mpeg «access plus 1 month»
ExpiresByType video/mp4 «access plus 1 month»
ExpiresByType video/quicktime «access plus 1 month»
ExpiresByType video/x-ms-wmv «access plus 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType text/javascript «access plus 1 week»
ExpiresByType application/x-javascript «access plus 1 week»
ExpiresByType application/javascript «access plus 1 week»
</IfModule>
Que va especificando para cada tipo de archivo el tiempo que se debe mantener en cache.
Os adjunto un vídeo, en ingles esos si, donde explica paso a paso como editar y poner todo este código en vuestro .htaccess. Lo he adelantado hasta el minuto 2 y 12 segundos, porque es donde empieza a copiar el código y pegarlo directamente en el archivo. Pero podéis verlo desde el inicio si queréis.
Test de velocidad de Google
Ahora que ya está realizada la modificación en el archivo .htaccess, solo tenemos que comprobar que funciona. Podemos probar navegador por navegador en todos los equipos que tengamos o bien podemos utilizar la herramienta de Google llamada PageSpeed Insights. Esta herramienta se encarga de analizar la página web que indiquemos y nos detalla los problemas que tiene la página web para el ordenador de sobremesa (o portátil) y/o dispositivos móviles. Tras esperar unos segundos PageSpeed nos indicará que la memoria caché del navegador está especificada correctamente. Puede que tras varios minutos, PageSpeed siga indicando error en este aspecto, algo normal que a muchos nos pasa cuando utilizamos esta herramienta de Google. Por ello, muchos expertos en WPO recomiendan utilizar otras herramientas además de PageSpeed, recalcamos las palabras “otras”, es decir, utilizar varias y no una en lugar de otra. En este aspecto es bueno utilizar GTMetrix, además de Google PageSpeed.
Con estas herramientas, así como con el código escrito, podremos Especificar caché de navegador en wordpress, así como mejorar la posición de nuestra web para los usuarios y motores de búsqueda.
Javier
Gracias por el aporte. LLevaba tiempo buscando algo asi, sencillo y que pueda poner a mi wordpress.
Gracias de nuevo y un saludo