Aprovechar el almacenamiento en caché del navegador puede mejorar los tiempos de carga de su sitio web para los visitantes habituales. Sin embargo, también significa que los usuarios a veces pueden ver contenido desactualizado cuando visitan su sitio.
La mejor manera de evitar este problema es implementar ‘versiones’ para su contenido de WordPress. De esa forma, los usuarios siempre obtendrán la última versión de su sitio web, incluso si sus navegadores han almacenado el sitio en caché. En este artículo, hablaremos más sobre el almacenamiento en caché del navegador, el control de versiones y luego le enseñaremos cómo implementarlo en WordPress.
¡Pongámonos a trabajar!
El almacenamiento en caché del navegador es un proceso que guarda archivos de su sitio web en los dispositivos de sus visitantes para que no sea necesario descargarlos cuando vuelvan a visitar su sitio. Esta es una solución sencilla que ayuda a reducir los tiempos de carga.
Cuando aprovecha el almacenamiento en caché del navegador, generalmente establece fechas de vencimiento para el contenido que desea guardar. Por ejemplo, puede configurar su . htaccess para almacenar archivos en las computadoras de los usuarios durante un período específico. Cuando se acabe ese tiempo, sus navegadores buscarán nuevas versiones de esos archivos.
El problema es que a menudo necesitará actualizar archivos en su servidor antes de que caduquen las versiones almacenadas en caché. Por ejemplo, el código anterior almacenará automáticamente en caché cualquier archivo png . Si el logotipo de su sitio es un archivo png y realiza cambios en él, es posible que esos usuarios no vean la nueva versión hasta que caduque su caché.
El control de versiones, también conocido como ‘destrucción de caché’, resuelve este problema forzando automáticamente las actualizaciones de la caché si se ha modificado un archivo. Es una solución sencilla que le permite implementar el almacenamiento en caché del navegador con fechas de caducidad de larga duración sin tener que preocuparse por mostrar contenido obsoleto. Sin embargo, requiere un poco de trabajo para configurarlo, lo que nos lleva a la siguiente sección.
Cómo usar el control de versiones para actualizar su contenido de WordPress en caché (de 2 maneras)
Ahora le mostraremos cómo configurar versiones de diferentes tipos de archivos para romper el caché de sus usuarios. Tenga en cuenta que es posible que tenga algunos problemas al usar estos métodos si está usando un complemento de almacenamiento en caché . Si es así, querrá vaciar el caché de su sitio a través del complemento que esté usando, para asegurarse de que su sitio esté sirviendo las últimas versiones de cada archivo.
1. Actualice la versión de su tema hijo usando la función wp_enqueue
Si está utilizando un tema secundario (¡que debería serlo !), puede obligar a WordPress a cargar una nueva versión de su hoja de estilo a través del archivo functions.php . Como sabrá, necesita usar la función wp_enqueue_style dentro de functions . php para cargar la hoja de estilo de un tema. Este es el formato que el códice de WordPress sugiere que uses:
|
01
02
03
04
|
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );} |
Ese fragmento hace el truco. Sin embargo, no incluye una función de prevención de caché. Por el contrario, el siguiente código le permite incluir el número de versión del tema secundario:
|
01
02
03
04
05
06
07
08
09
10
|
function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );}add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); |
Este código extrae el número de versión del archivo style.css de su tema secundario . Cuando configuró inicialmente su tema hijo, tuvo que crear una nueva hoja de estilo, incluido un fragmento como este:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
/*Theme Name: Twenty Fifteen ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twenty-fifteen-child*/ |
Todo lo que tiene que hacer es actualizar el número dentro de la línea Versión cada vez que realice un cambio en la hoja de estilo de su tema hijo. Esto obligará a WordPress a cargar la última versión del archivo.
En caso de que necesite un recordatorio, puede actualizar ambos archivos accediendo a su sitio web a través de FTP . Si no tiene un cliente configurado, le recomendamos que utilice FileZilla . Navegue hasta el directorio wp-content/themes y busque la carpeta del tema de su hijo dentro. Tanto sus archivos functions.php como style.css deben estar dentro de:
Para editar cualquiera de los archivos, simplemente haga clic derecho sobre él y elija la opción Ver/Editar . Esto abrirá el archivo con su editor de texto predeterminado local, lo que le permitirá realizar cambios en el código.
2. Cambie el nombre de sus archivos estáticos para forzar una actualización de caché
El método anterior se encarga de actualizar su tema hijo. Sin embargo, dependiendo de cómo configure el almacenamiento en caché del navegador, es probable que su sitio web esté guardando copias de muchos otros archivos. Por ejemplo, durante nuestra guía para implementar el almacenamiento en caché del navegador , le proporcionamos un fragmento de código que debe almacenar en caché copias de sus archivos de imágenes, CSS, HTML y JavaScript:
|
01
02
03
04
05
06
07
08
09
10
|
<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpg "access 1 year"ExpiresByType image/jpeg "access 1 year"ExpiresByType image/gif "access 1 year"ExpiresByType image/png "access 1 year"ExpiresByType text/css "access 1 week"ExpiresByType text/x-javascript "access 1 week"ExpiresDefault "access 1 month"</IfModule> |
Podemos usar el mismo archivo para implementar un nuevo conjunto de reglas. Use el siguiente código y agréguelo debajo de la etiqueta </IfModule> del fragmento que le mostramos anteriormente:
|
01
02
03
04
05
|
<IfModule mod_rewrite.c>RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.+).(d+).(js|css|png|jpg|jpeg|gif)$ $1.$3 [L]</IfModule> |
Esto le dice a WordPress que verifique si algún archivo que usa esos formatos tiene números adjuntos dentro de sus nombres de archivo, así:
niño-tema/estilo.201.css
En ese ejemplo, actualizamos el archivo style.css y cambiamos su nombre de archivo para reflejar eso. El 201 dentro de su nombre de archivo representa el número de versión de style.css . WordPress aún lo reconocerá como el archivo style.css de su tema , pero los cambios que hicimos en . htaccess le permite indicar que es una nueva versión.
Después de agregar ese código a su archivo . htaccess , podrá establecer versiones para todos los tipos de archivos que haya incluido. Por ejemplo, si desea cargar una nueva versión de un logotipo png , solo tiene que cambiar el nombre del archivo a algo como logo.201.png antes de cargarlo.
Conclusión
Implementar el almacenamiento en caché del navegador es una excelente manera de garantizar que los visitantes de su sitio disfruten de tiempos de carga rápidos. Sin embargo, esto también puede dar lugar a situaciones en las que actualiza su contenido, pero los usuarios no pueden ver los cambios.
La forma más fácil de abordar este problema es utilizar el control de versiones para el contenido de la memoria caché de los navegadores de sus usuarios. Le mostramos las siguientes maneras de hacer esto:
- Actualice la versión de su tema hijo usando la función wp_enqueue .
- Cambie el nombre de sus archivos estáticos para forzar una actualización de caché.
¿Tiene alguna pregunta sobre cómo implementar el control de versiones de archivos en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen en miniatura del artículo por imdproduction / shutterstock.com