Quando você está desenvolvendo um site, muitas atualizações na página são necessárias para acompanhar as mudanças feitas assim como a evolução do site. Entretanto, para cada atualização feita, a página não irá ser carregada novamente do zero, isso porque existe uma memória conhecida como Cache que, basicamente serve para armazenar dados ou processos freqüentemente utilizados nos sites. Essa memória existe em diversos lugares como navegadores, arquivos, estilos de páginas (style.css), scripts de javaScript (JS) entre outros.
A princípio essa pequena memória é de grande ajuda para carregamento de páginas web, mas quando o site está em desenvolvimento, ela pode atrapalhar um pouco. Aqui, nós iremos abordar sobre o cache do CSS (estilos de páginas) e do JS.
Quando o arquivo style.css é atualizado em uma linha, por exemplo, o cache impede que sua mudança seja vista na página. E mesmo que você consiga visualizar a mudança em um computador, se você abrir esse mesmo link em outro computador, a atualização pode não aparecer.
Em uma escala maior, digamos que seja preciso uma mudança de layout em larga escala em um site de alto tráfego. Um grande número de pessoas podem ver o layout diferente da maneira que você o deixou na próxima vez que eles visitam o site, por causa do cache do CSS.
Dessa forma, existe uma solução que pode ser feita para eliminar o cache tanto de arquivos style.css quanto de arquivos de javascripts toda vez a página for atualizada. Iremos explicar a seguir usando a linguagem PHP:
No FTP de seu site, você precisará buscar o arquivo “header.php“. Dentro dele, provavelmente você verá que existem linhas que chamam arquivos CSS e arquivos JS. Será algo mais ou menos assim:
- style.css: <link rel=”stylesheet” href=”/style.css” type=”text/css” media=”screen” />
- javascript.js: <script type=”text/javascript” src=”/javascript.js”></script>
Existem dois métodos para eliminar o cache desses arquivos, o primeiro que explicaremos é conhecido como “cadeia de caracteres fantasmas” (Query string ghost). É bem simples, basta inserir um valor aleatório no final da chamada para que quando o arquivo for carregado, criar uma nova URL e assim, eliminar o cache. Acrescente o seguinte trecho:
- style.css: <link rel=”stylesheet” href=”/style.css?1422981258” type=”text/css” media=”screen” />
- javascript.js: <script type=”text/javascript” src=”/javascript.js?1422981258“></script>
O segundo método é criar versões para seus arquivos, dessa forma, você está dizendo ao seu site que os arquivos agora estão em uma “versão 2”. Como será uma versão diferente da anterior, os arquivos chamados serão diferentes das “versões antigas” evitando o cache. Nesse caso, toda vez que uma mudança for realizada, lembre-se de ir a este local e subir o valor de ‘v’ (3, 4, 5…). Insira a seguinte parte no código:
- style.css: <link rel=”stylesheet” href=”/style.css?v=1” type=”text/css” media=”screen” />
- javascript.js: <script type=”text/javascript” src=”/javascript.js?v=1“></script>
Facilidade de Edição
Esses métodos são soluções para programadores que precisam eliminar rapidamente o cache para monitorar o site enquanto desenvolvem. Mas para evitar fazer essas edições em muitas linhas, iremos explicar de forma que seja preciso editar apenas em um local do código.
Criar uma variável “Version” em um arquivo do tipo “config.php“.
Por exemplo:
<?php
define(“Version”, “1”);
?>
Depois, aplicar a variável nas seguintes linhas do “header.php“:
<link rel=”stylesheet” href=”/style.css?v=<?php echo Version; ?>” type=”text/css” />
<script type=”text/javascript” src=”/javascript.js?v=<?php echo Version; ?>“></script>
O resultado desse exemplo será:
<linkrel=”stylesheet” href=”/style.css?v=1” type=”text/css” />
<script type=”text/javascript” src=”/javascript.js?v=1“></script>
Desse jeito, sempre que for necessário realizar uma edição em um arquivo CSS ou JS, modifique apenas a variável em “config.php” que isso será aplicado de forma global para todos os arquivos.