Cómo habilitar el almacenamiento en caché del navegador en WordPress

En resumen: todo lo que pueda hacer para reducir los tiempos de carga contará. A continuación, cubriremos almacenamiento en caché del navegador, incluido qué es, qué significa para WordPress y cómo puede habilitarlo en su sitio.La velocidad de su sitio web juega un papel vital para brindar una experiencia de usuario óptima. (Nota: si está interesado en saber cómo comprobar la velocidad de su sitio, consulte nuestro artículo sobre el uso de GTmetrix). Un sitio lento puede provocar una interrupción de las ventas, una reducción de las conversiones y, a largo plazo, puede afectar seriamente tanto la satisfacción del cliente como el número general de visitantes.

Empecemos…

¿Qué es el almacenamiento en caché del navegador?

Un sitio web consiste esencialmente en una serie de archivos que encajan para crear una serie de páginas web. Algunos de estos contendrán texto (como el cuerpo principal de una publicación de blog), algunos contendrán información de estilo para los elementos de la página (encabezado, pie de página, barra lateral, etc.), algunos serán imágenes, etc.

Ahora, cada vez que navega por un sitio web, probablemente notará muchos elementos comunes: todas las páginas tienen un estilo similar (todas comparten colores y elementos de diseño similares), el logotipo es siempre el mismo, los menús desplegables siempre están disponibles y similares. Entonces, si hay elementos comunes, ¿por qué descargarlos todos cada vez que alguien carga una página nueva? Una idea mucho mejor sería cargar esos elementos comunes una vez, almacenarlos en el navegador y luego simplemente reutilícelos según sea necesario – como cuando alguien pasa de una página a otra dentro del sitio, o cuando alguien vuelve a visitar el sitio en una fecha posterior.

Esta es la esencia del almacenamiento en caché del navegador. Esencialmente, el almacenamiento en caché del navegador examina los archivos que haya definido como archivos que no cambian con mucha frecuencia (más sobre esto a continuación) y los descarga en el navegador del visitante solo una vez. Una vez descargados en la memoria caché del navegador, estos archivos no se volverán a descargar. Esto significa que, en lugar de tener que descargarse varias veces, estarán listas para usarse en cualquier momento, reduciendo así la carga en los servidores de su sitio Y, lo que es más importante, reduciendo significativamente el tiempo que lleva cargar las páginas siguientes.

Nota: Cuando un nuevo visitante llega a su sitio, la velocidad a la que se carga la primera página que visite será la misma si el almacenamiento en caché del navegador está habilitado o no, ya que, como nunca antes ha visitado su sitio, su navegador puede ‘ Posiblemente todavía haya tenido la oportunidad de almacenar alguno de los archivos de su sitio. Los beneficios del almacenamiento en caché del navegador, por lo tanto, solo se sentirán cuando un visitante cargue más de una página y / o vuelva a visitar su sitio web.

Cómo aprovechar el almacenamiento en caché del navegador en WordPress

Habilitar el almacenamiento en caché del navegador no es difícil, pero debido a que requiere editar un archivo de sitio un poco complicado (el archivo .htaccess de su sitio), requiere algunos conocimientos preliminares.

Nota: El almacenamiento en caché del navegador no es específico de WordPress, la forma de habilitarlo es la misma sin importar qué sistema use.

Básicamente, hay dos formas de hacerlo.

La forma más fácil: hable con su anfitrión

Para habilitar el almacenamiento en caché del navegador, deberá editar, o tal vez incluso crear, un archivo llamado archivo .htaccess (Lee mas). Un error tipográfico en este archivo podría hacer que todo su sitio web se vuelva temporalmente inaccesible, por lo que, si tienes alguna duda sobre qué hacer, puede ser mejor pregúntale a tu anfitrión para hacerlo por ti – Solo para estar seguros. Si está utilizando una excelente empresa de alojamiento (¿necesita un mejor host?), Es casi seguro que ellos podrán configurarlo en unos minutos (si aún no lo han hecho).

Edición del archivo .htaccess por su cuenta

El archivo .htaccess puede ser un lugar aterrador; es un ejemplo clásico de «un gran poder conlleva una gran responsabilidad», lo que le permite acelerar su sitio, crear redireccionamientos y hacer cosas asombrosas. Sin embargo, todo este poder tiene un precio: un error en este archivo probablemente hará que todo su sitio se caiga.

Arreglarlo es una cuestión de deshacer lo que ha agregado, pero, para un principiante, puede ser una experiencia desalentadora. Recomiendo encarecidamente experimentar en un sitio de prueba antes de ensuciarse las manos con un sitio en vivo importante.

Lo primero que necesitará es una forma de acceder a los archivos de su servidor. La forma más común de hacer esto es a través de FTP (protocolo de transferencia de archivos – lea más). El archivo puede ser un poco complicado de encontrar porque es un archivo de puntos, un archivo oculto en un sistema basado en Linux (¿Qué es un archivo de puntos?) – pero la mayoría de los editores de FTP tienen una opción de ‘mostrar archivos ocultos’ que debería permitirle ver estos archivos. (Nota: si está usando una Mac, lea nuestro artículo sobre cómo descargar, editar y volver a cargar un archivo htaccess sin tener que cambiar ninguna de las configuraciones de su computadora).

El archivo .htaccess debe estar en su carpeta principal de WordPress, la misma carpeta que contiene las carpetas wp-content, wp-includes y wp-admin. Si no puede encontrarlo, está bien, puede que no exista, en cuyo caso deberá crearlo (me temo que es algo que no se trata aquí). Una vez encontrado (o creado), querrá agregar el siguiente código usando un editor de texto plano, ¡NO un procesador de texto!

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresDefault "access plus 2 days"
</IfModule>

Estas líneas le dicen al navegador de un usuario cómo almacenar en caché cada tipo de archivo. Arriba, configuré jpg, jpeg, gif, íconos e imágenes png para que se almacenen en caché durante un año (ya que casi nunca cambian), y los archivos CSS, JavaScript y Flash se almacenarán en caché todos los meses (ya que estos son más propensos a cambiar ). También establecí el valor predeterminado en dos días para cualquier archivo que no se especifique de otra manera.

Inhabilitación para el desarrollo

Como estos archivos se almacenarán en caché durante bastante tiempo (el tiempo que haya decidido definir para cada tipo de archivo), el desarrollo puede ser difícil, por lo que recomiendo encarecidamente no utilizar el almacenamiento en caché del navegador para sitios web que todavía están en desarrollo activo. Puede ir a la configuración de su navegador y borrar el caché manualmente cada vez, por supuesto, pero esto pronto se volverá tedioso (además, no es tan fácil borrar el caché de otra persona; consejos a continuación).

Si comienza a cambiar cosas, primero querrá cambiar el caché a algo mucho más corto, como un solo día, en cuyo caso, los usuarios verán los nuevos recursos cuando hayan pasado 24 horas.

Otro método que utilizan los desarrolladores para actualizar los archivos en caché es agregar parámetros de consulta a sus recursos. Si está cargando script.js, por ejemplo, una vez almacenado en caché, los cambios que realice solo se descargarán después de un año (o durante el tiempo que lo haya configurado). Para evitar esto, los desarrolladores a menudo añaden la versión del recurso a la URL. Entonces, en lugar de «http://mysite.com/scripts.js», la URL se convierte en algo así como «http://mysite.com/scripts.js?version=1.0», y cuando el script cambia nuevamente, el desarrollador vuelve a reemplaza la URL del recurso, convirtiéndola en «http://mysite.com/scripts.js?version=1.1», por ejemplo.

En lo que respecta al navegador, este es técnicamente un nuevo recurso, por lo que se descargará y almacenará en caché de nuevo, por otro año.

Comprobación de su trabajo

Hay varias formas de verificar si un sitio tiene habilitado el almacenamiento en caché del navegador, y una de las más fáciles (y más interesantes) es usar una herramienta gratuita de prueba de velocidad del sitio llamada GTmetrix – algo que ya cubrimos en profundidad en un artículo anterior: Cómo usar GTmetrix para probar la velocidad de un sitio web – de manera efectiva

Prueba de caché del navegador GTMetrix

Si su sitio obtiene una ‘A’, entonces el almacenamiento en caché del navegador está bien, ¡y está listo para un buen aumento de velocidad!

Pensamientos finales

El almacenamiento en caché del navegador puede conducir a aumentos significativos de la velocidad y, dado que esencialmente significa solo copiar y pegar algunas líneas de código (y no tiene desventajas de ningún tipo, asumiendo que no tiene la intención de cambiar ninguno de los archivos definidos antes de que estén configurados para expirar), habilitarlo es casi definitivamente algo que vale la pena hacer.