Se você tiver acesso às configurações do seu servidor, há algumas coisas que você pode fazer para melhorar a velocidade do site: cache do navegador e compactação de dados.

Cache do navegador

Permitir que os arquivos do seu site (folhas de estilo externas, arquivos JavaScript, imagens, etc.) sejam armazenados em cache pelo navegador significa que os arquivos não precisarão ser baixados toda vez que uma página da Web em seu site for solicitada pelo usuário.

Isso pode acelerar a experiência do usuário ao navegar para outra página da Web, pois itens como sua folha de estilo e suas fontes da Web não precisam ser baixados novamente, pois já estão armazenados no cache do navegador do usuário. Então, como permitimos que os navegadores armazenem nossos arquivos em cache? Quando o navegador solicita um arquivo do nosso servidor web, uma das coisas que o servidor fará é enviar os cabeçalhos HTTP do arquivo. Os cabeçalhos HTTP de um arquivo contêm metadados sobre o arquivo que está sendo solicitado, bem como orientações sobre como o navegador deve tratar o arquivo.

Um dos campos de cabeçalho HTTP padrão que podemos especificar é Cache-Control. Cache-Controlnos permite definir como queremos que o navegador armazene o arquivo em cache. Podemos usar o Cache-Controlcampo de cabeçalho para informar ao navegador se ele deve armazenar o arquivo em cache e por quanto tempo ele deve armazenar o arquivo em cache.

Acontece que, no meu site, não havia um Cache-Controlcampo de cabeçalho HTTP para arquivos SVG. Estou usando o módulo lighttpd no meu servidor, então abri seu arquivo de configuração ( lighttpd.conf) e adicionei a seguinte linha para definir a max-agediretiva para 1 mês.

expire.url = ( “/svg/” => “access plus 1 months” )

Depois de reiniciar meu servidor da web, usei o Chrome DevTools para inspecionar o arquivo SVG para garantir que minha configuração estivesse conforme o planejado.

Você pode ver na guia Headers do DevTools que o Cache-Controlcampo agora especifica uma max-agediretiva.

Cache-Control: max-age=2592000

By the way, max-ageé especificado em segundos. 2.592.000 segundos = 30 dias.

Por quanto tempo os arquivos devem ser armazenados em cache?

Não há uma regra específica quando se trata exatamente de quanto tempo seus arquivos devem ser armazenados em cache, mas a melhor prática é armazená-los em cache pelo maior tempo possível. A duração do cache depende da frequência com que você atualiza os arquivos do site e do tipo de arquivo que está sendo armazenado em cache. Por exemplo, você pode definir um tempo maior max-agepara arquivos que não mudam com frequência, como o logotipo do site, arquivos JS e arquivos CSS.

Substituindo o cache do navegador

Se atualizarmos um recurso antes que seu cache expire, precisaremos de uma maneira de forçar o navegador a baixar novamente o recurso. Há muitas maneiras de lidar com essa situação.

Uma maneira fácil é simplesmente alterar o nome do recurso e atualizar nossas referências a ele. Por exemplo, se atualizarmos um arquivo chamado styles.css, podemos renomeá-lo para styles.v2.css. Você pode usar gulp-rev-all para renomear um recurso sempre que ele for alterado, porque fazer isso manualmente não é escalável.

Em seguida, também precisaremos atualizar nosso HTML para que os links que fazem referência styles.cssagora apontem para  styles.v2.css. Isso geralmente é feito com scripts do lado do servidor (como PHP) e/ou com seus arquivos de modelo CMS para que a atualização seja propagada por todo o site. Alternativamente, você pode usar o pacote gulp-rev-replace para isso.