Utilizando cache nos navegadores para otimizar requisições


O cache de recursos é uma prática comum para otimizar o desempenho de páginas da web, reduzindo a quantidade de dados transferidos e melhorando o tempo de carregamento. Neste contexto, a utilização de cache nos navegadores é uma estratégia eficaz para minimizar o número de requisições feitas ao servidor.

Um exemplo disso é adicionar parâmetros diferentes a URLs de imagens para evitar o carregamento de versões em cache.

<div class="gallery-img">
  <img
    src="http://source.unsplash.com/random/360x360"
    alt="random image from unsplash"
  />
</div>
<div class="gallery-img">
  <img
    src="http://source.unsplash.com/random/360x360"
    alt="random image from unsplash"
  />
</div>

Ambas as imagens têm URLs idênticas, o que leva ao carregamento em cache da mesma imagem. Para contornar isso, pode-se adicionar parâmetros diferentes à URL, forçando o navegador a considerar cada URL como única:

<div class="gallery-img">
  <img
    src="http://source.unsplash.com/random/360x360?r=1"
    alt="random image from unsplash"
  />
</div>
<div class="gallery-img">
  <img
    src="http://source.unsplash.com/random/360x360?r=2"
    alt="random image from unsplash"
  />
</div>

Essa abordagem cria URLs únicas para cada imagem, evitando o carregamento em cache e garantindo que o navegador faça uma nova requisição ao servidor para cada imagem. Ao adicionar um parâmetro de consulta diferente, você contorna o cache existente para essas imagens específicas.

Referências