Optimización de Caché del Navegador en Sitios Web

Contenido del curso

SEO: más que robots y palabras clave

Rastreo y accesibilidad

Arquitectura del sitio web

Elementos técnicos en contenidos

Velocidad de carga

Microformatos y schema.org

Optimización Multi-idioma y/o Multi-país

30
Implementación de la etiqueta hreflang para SEO internacional
05:24 min

SEO para sitios en JavaScript

Conclusiones

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:54

Optimización de Caché del Navegador en Sitios Web

Curso de Optimización de SEO Técnico

Clase 25 de 35

Clase 25 / 35

Recursos

Cuando un usuario visita un sitio web por segunda vez, el navegador puede evitar cargar todos los archivos desde cero si ya los tiene almacenados localmente. Esa capacidad de almacenamiento temporal se conoce como caché del navegador, y configurarla correctamente es uno de los factores más importantes para mejorar la velocidad de carga de cualquier sitio web.

¿Qué es la caché del navegador y por qué importa?

La caché del navegador es una instrucción que el sitio web le envía a navegadores como Google Chrome, Firefox o Safari, indicándoles por cuánto tiempo deben guardar los archivos del sitio en el dispositivo del usuario [0:10]. Archivos como hojas de estilo CSS, fuentes e imágenes se almacenan localmente para que, en visitas posteriores, el navegador no tenga que descargarlos nuevamente.

El resultado directo es que el sitio carga más rápido en la segunda visita. Mientras el usuario no borre manualmente la caché, esos archivos permanecen disponibles en su computador o dispositivo móvil.

¿Cómo revisar la configuración de caché con GTmetrix?

Dentro de la herramienta GTmetrix existe un factor llamado Leverage Browser Caching [1:30] que permite evaluar si el sitio está indicando correctamente los tiempos de almacenamiento en caché. Al desplegarlo, se pueden ver los errores específicos de cada archivo.

¿Se pueden cachear archivos externos?

Un punto clave es que solo se puede especificar la caché para archivos internos del sitio web [1:50]. Archivos que provienen de servicios externos como Facebook, Google o Hotjar no pueden ser controlados desde nuestra configuración. Por eso, al analizar los resultados, es necesario distinguir entre recursos propios y recursos de terceros.

¿Cuánto tiempo deberían guardarse los archivos?

Uno de los errores más frecuentes es establecer tiempos de caché demasiado cortos. En el ejemplo analizado, los archivos internos se configuraron para guardarse solo por una hora [2:10], lo cual es insuficiente. El diseño de un sitio web, representado en gran parte por sus archivos CSS, no cambia cada hora. Puede pasar un mes, dos meses o incluso un año sin modificaciones significativas.

La recomendación es establecer un tiempo mínimo de un mes como período de caché [3:25]. Para ciertos archivos que rara vez cambian, se puede extender incluso a un año.

¿Cómo corregir los problemas de caché en tu sitio?

La solución consiste en agregar un bloque de código en un archivo de configuración del servidor. GTmetrix ofrece documentación detallada donde se especifica exactamente qué código copiar y en qué archivo colocarlo [3:50].

El código indica al servidor que envíe instrucciones de caché con cada archivo.
Se pueden definir diferentes tiempos según el tipo de archivo.
Algunos archivos se configuran con acceso de más de un mes.
Otros pueden configurarse para guardarse hasta por un año.

Esta configuración puede ser implementada por un desarrollador o por el propio responsable del sitio, siguiendo la documentación paso a paso.

Entre los errores más comunes que suelen aparecer en las auditorías [3:00] están las imágenes sin tiempo de caché definido y los archivos de fuentes y CSS con tiempos demasiado cortos. Aunque la prioridad de este factor se considera media, es fundamental trabajarlo para mejorar el rendimiento general.

Un concepto que se menciona brevemente es el CDN (Content Delivery Network) [2:00], una red de distribución de contenido que permite servir archivos desde ubicaciones geográficamente más cercanas al usuario, y que se relaciona directamente con la forma en que se gestionan los archivos internos del sitio.

Si ya realizaste tu auditoría con GTmetrix, comparte un pantallazo de lo que encontraste en la sección de caché para poder revisarlo en detalle.

Sandra Liliana Delgado Gómez

Hace 6 años

La Caché del navegador es algo que especificamos al navegador para que sepa por cuánto tiempo debería guardar los archivos del sitio web en el dispositivo con el que navegamos, así al entrar una segunda vez al mismo sitio web la cantidad de datos que el navegador del usuario tiene que descargar es menor y es necesario realizar menos solicitudes a su servidor. ¿El resultado? Reducción de los tiempos de carga de la página.

Se revisa en la herramienta GTmetrix, la opción “Leverage browser caching”
ejemplo

en la llamada a la acción What's this mean? podremos encontrar una guía de como mejorar

. Aquí hay que tener en cuenta que no se puede especificar la cache para sitios externos solo para urls propias, el tema del caché es modificar el tiempo de vencimiento por mas tiempo mínimo un mes y cuando son recursos estáticos como logos, estilos CSS globales, etc. lo recomendado es 1 año .

Cuando usamos wordpress hay algunos plugins que nos ayudan con mejorar u optimizar estas opciones para el caso de cuando no sabemos como modificar o incrustrar los códigos sugeridos según la guía de gtmetrix ejemplos:

W3 Total Cache
Hummingbird
Autoptimize

En cada pluging hay que hacer la personalización correspondiente, aunque si saben de desarrollo web y código siempre será la mejor opción

ANTHONY JEAMPIER RANGEL RODRIGUEZ

Hace 6 años

gracias!

Comentarios (59)59 comentarios

Ximena Sofia Escobar

Robert Castro

María Cristina Tamayo Ossa

JEFFERSON ANTONIO LOPEZ ZAPATA

Hace 3 años

Luis Francisco Rios Ortiz

IMTUR Team

Hace un año

Elkin Mauricio Ballén Granados

Omar Ross

Hace 2 años

Bob Code

Jossymarc Casas Mezu

Irmin Corona 🐯

Alejandro Gonzalez

Profesor

Santiago Pulido Peláez

Emmanuel David Rodríguez Hernández

Anthony Ismael Manotoa Moreno

Fernando Antonio Flores Velez

Hace 6 meses

Felipe Quintero Gómez

Julian David Sierra Cabrera

Hace 3 meses

Ricardo Daniel Guerrero

Hace 4 años

Fanny Zambrano

Daniel Fernando Giraldo Restrepo

Andrés Vega

Ramón Ruiz

Hace 7 meses

CAMILO CAICEDO

Juan Pablo Lagos Idrobo

andres fierro

SEO: más que robots y palabras clave

Auditoría de SEO Técnico: Identificación y Solución de Problemas

SEO Técnico: Mejora el Tráfico Orgánico de tu Sitio Web

SEO Técnico: Optimización para Motores de Búsqueda

Auditoría Técnica de SEO: Rastreo, Indexación y Ranking en Google

Rastreo y accesibilidad

Checklist de Auditoría SEO Técnico para eCommerce

Auditoría de archivos robots.txt para SEO y visibilidad en Google

Uso de Seoliser para Auditoría de Páginas Web

Creación y gestión de mapas de sitio XML para SEO eficaz

Auditoría y Optimización de Certificados SSL en Sitios Web

Redirecciones y configuraciones HTTPS en sitios web

Solución de Contenidos Duplicados con Etiqueta Canonical

Códigos de Respuesta HTTP y su Impacto en SEO Técnico

Arquitectura del sitio web

Optimización de URLs y migas de pan en arquitectura web

Buenas prácticas para scroll infinito y paginación web

Optimización de la Profundidad de Navegación Web

Optimización Semántica del HTML en Sitios Web

Elementos técnicos en contenidos

Optimización Técnica On Page de Contenidos Web

Optimización de Metatítulos en SEO Técnico

Optimización de Meta Descripciones y Meta Keywords para SEO

Optimización de Títulos H1 para SEO Efectivo

Optimización de Contenidos Web: Auditoría Técnica y Recomendaciones

Auditoría de Textos Alternativos en Imágenes Web

Velocidad de carga

Auditoría de Velocidad de Carga en Sitios Web

Medición y Optimización de Velocidad de Carga Web

Optimización de Caché del Navegador en Sitios Web

Optimización de Imágenes y Uso de CDN para Mejorar Velocidad Web

Optimización de CSS y JavaScript para mejorar velocidad web

Microformatos y schema.org

Implementación de Microformatos para SEO sin Programación

Creación y auditoría de microformatos para SEO en sitios web

Optimización Multi-idioma y/o Multi-país

Implementación de la etiqueta hreflang para SEO internacional

SEO para sitios en JavaScript

Optimización SEO para Sitios Web en JavaScript

Renderizado de Sitios Web en JavaScript para SEO Técnico

Optimización del DOM para Sitios Web en JavaScript

Conclusiones

Conceptos Clave de SEO y Optimización Web

Auditoría de SEO Técnico: Rastreo, Accesibilidad y Velocidad

Optimización de Caché del Navegador en Sitios Web