Habilitamos o cache do navegador do lado do usuário. Plug-in WordPress Super Cache, use o cache do navegador Use o cache do navegador para arquivos individuais
"" para otimizar o site de acordo com os conselhos da ferramenta de Velocidade de página do Google Percepções. Todo proprietário de site encontrou o problema de dificuldade de armazenar scripts js de sites de terceiros.
Este não é um indicador tão importante para otimização; na verdade, os elementos CSS e JS são transferidos do cabeçalho do site para o rodapé, além disso, se você olhar os recursos do Google, eles têm problemas com esse ponto :)
Se você ainda deseja otimizar seu site ou seus clientes armazenando scripts de terceiros em cache, por exemplo. Se você observar um lindo número no contador do analisador, basta seguir os passos abaixo, que levarão alguns minutos.
Cache do navegador de seus elementos
Fazendo um cache para scripts diferentes, exemplo retirado do blog Devaka ru (no momento da escrita)
Por exemplo:
/assets/copyright.min.js (sem data de validade especificada)
/assets/i/566.jpg (sem data de validade especificada)
/assets/i/icons.png (sem data de validade especificada)
/i/postcomm-left.png (sem data de validade especificada)
/i/postcomm-right.png (sem data de validade especificada)
Para corrigir o primeiro problema, acesse o arquivo .htaccess, que está localizado na raiz do site e insira este código bem no final:
# compressão de texto, html, javascript, css, xml:
Exemplos de scripts de terceiros
Se você fez tudo corretamente na primeira etapa, deverá ver algo assim:
Use o cache do seu navegador para os seguintes recursos
Claro, você pode ter apenas algumas URLs para métricas e análises, por exemplo, mas isso não é tão importante, as instruções de correção são iguais para todos.
Cache de elementos de terceiros
Inicialmente, o artigo deveria ser dedicado apenas a esses pontos, mas sentindo que haveria muitas dúvidas, mais alguns pontos foram acrescentados.
Não há como influenciar o tempo de cache de um recurso de terceiros, mas você pode fazer isso em seu projeto web A ação mais correta nesta situação é baixar automaticamente os scripts mais recentes para métricas, análises, etc. para o seu site usando cron (script presente)
Vamos colocar as coisas em ordem agora!
Passo 1. Copie a lista de todos os scripts apontados pelo Google PageSpeed em um bloco de notas ou diretamente do navegador.
Passo 2. Crie um arquivo na sua hospedagem com a extensão php e cole nele o seguinte código:
Atenção! Você não tem permissão para visualizar texto oculto.
Há 3 no código por exemplo, mas você pode criar quantos pontos precisar, basta copiar e adicionar abaixo ou deletar os desnecessários.
Nesta linha alteramos o 3º valor:
Use o cache do navegador para Google PageSpeed
1. O script que carregaremos em nosso site
Atenção! Você não tem permissão para visualizar texto oculto.
2. Caminho onde salvar o arquivo:
Caminho real("./js")
Neste exemplo é a pasta js, ou seja. o caminho exato será www.site/js/ (você mesmo precisa criar a pasta e configurá-la para Direitos CHMOD para gravação)
3. O nome do script, se tiver extensão .js, então escrevemos junto com ele, se sem ou com outra coisa, então fazemos tudo como no exemplo acima. Observe que não existem arquivos com os mesmos nomes.
Etapa 3. Faça upload do arquivo editado para o servidor
Etapa 4. Coloque o arquivo no cron para atualização automática arquivos
Para evitar o trabalho incorreto dos serviços, caso eles façam alterações nos scripts, o cron fará login automaticamente e os atualizará em seu servidor.
Vá ao seu painel de hospedagem e selecione a aba CRON e digite o comando, e também especifique o horário uma vez por hora/dia ou qualquer outro horário.
Wget -q -O - /dev/null http://www..php >/dev/null 2>&1
Não se esqueça de alterar a URL e talvez a sintaxe do seu comando seja diferente, veja exemplos de comandos cron na ajuda da hospedagem ou entre em contato com o suporte técnico.
Etapa 5. Altere o caminho para JS no contador ou script
Se houvesse um caminho no contador https://mc.yandex.ru/metrika/watch.js, substitua-o por um caminho dentro do site, por exemplo http://www..js
É isso, agora na lista Informações do PageSpeed Você não deve receber nenhuma mensagem sobre como configurar o cache do navegador.
Baixe as instruções "habilitar cache do navegador para Google PageSpeed" no arquivo Você não pode baixar arquivos do nosso servidor
Apresentamos um artigo útil “Ativar o cache do navegador para Google PageSpeed” para otimizar seu site seguindo o conselho de uma ferramenta do Google PageSpeed - tudo de melhor que temos em fóruns, hacks, módulos, modelos.
A instrução só funciona se o apache processar arquivos estáticos (instalados como frontend). Se o nginx estiver na frente dele, as mesmas ações deverão ser executadas de uma maneira completamente diferente.
Primeiro, algumas palavras sobre o assunto - por que é necessário armazenar em cache os recursos do site (imagens, css, arquivos html, arquivos e outros arquivos estáticos)?
Cada vez que um visitante abre seu site, não apenas o código HTML da página é baixado, mas também todos os arquivos necessários para projetar a página (imagens, estilos CSS, scripts js e assim por diante).
Como resultado, uma abertura de uma página de arquivo não é uma solicitação ao servidor, mas de dez a centenas! Cada uma dessas solicitações não representa apenas uma carga no servidor (o que é importante), mas também um tempo adicional para o usuário carregar a página (o que é importante como um indicador da qualidade do site e da facilidade do usuário em trabalhar com ele) .
Por exemplo, o popular serviço de verificação de sites do Google PageSpeed Insights sempre escreve um aviso sobre isso:
Use o cache do seu navegador
Ao especificar a data ou data de expiração dos recursos estáticos nos cabeçalhos HTTP, o navegador carregará os recursos recuperados anteriormente do disco local em vez da Internet.
Use o cache do seu navegador para os seguintes recursos://— lista de arquivos problemáticos —//
Habilitar o cache não apenas reduz a carga no servidor (quase todas as páginas do site possuem elementos de design duplicados, scripts java, etc.) quando o usuário visita o site/página novamente, mas também reduz o tempo de carregamento da página do seu lado. Como o navegador retira arquivos do cache quase na velocidade da luz, o usuário tem a sensação de que a página carregou quase na velocidade da luz!
Para resolver este problema, crie um arquivo na pasta do site com o nome .htaccess(com um ponto final no início. Isso é importante!) e adicione estas regras a ele. Se o arquivo já existir, adicione ao final do existente:
# cache no navegador do lado do usuário
Depois disso, você pode conferir o resultado em Página do Google PageSpeed Insights (se tudo estiver correto - a mensagem “ Use o cache do seu navegador" será marcado em verde e colocado na seção "Regras concluídas: (mais detalhes)")
Não funciona, o que devo fazer?
Se o cache não funcionar, será necessário verificar se os módulos estão instalados. Para fazer isso, você precisa criar um arquivo na pasta do site teste.php com código:
Se mod_expires ou mod_headers não estiverem na lista, execute os seguintes comandos no console do servidor (conectado) por sua vez ( isso irá instalar/habilitar mod_expires, mod_headers):
Cabeçalhos A2enmod a2enmod expira serviço apache2 reiniciar
Se o site estiver em hospedagem regular, tudo fica mais complicado. Entre em contato com o suporte técnico e descubra porque os módulos não estão instalados e como você pode contornar esse problema. Uma vez que pode haver vários motivos pelos quais o hoster não instalou os módulos.
👁9 325 visualizações.
Neste artigo, continuamos analisando como você pode acelerar o carregamento do site. Discutimos anteriormente. Hoje aprenderemos como habilitar o cache do navegador do lado do usuário usando o arquivo .htaccess.
Por que habilitar o cache do navegador do lado do usuário
Muitas vezes, ao criar um novo site, os programadores não prestam muita atenção à velocidade de carregamento do site no navegador. Principalmente se esse ponto não estiver focado no Termo de Referência para o desenvolvimento do site. E após o lançamento de uma nova criação, um especialista web que está envolvido no desenvolvimento e promoção deste projeto pode observar um quadro muito triste ao verificar a velocidade de carregamento do site no PageSpeed Insights do Google.
Longe disso lista completa problemas que podemos encontrar e que diminuem a velocidade de carregamento do site no navegador do usuário:
Alguns leitores podem se perguntar: por que exatamente você precisa habilitar esse cache e acelerar a velocidade de carregamento do site? Afinal, o site não funciona mal de qualquer maneira.
Existem pelo menos duas razões para isso:
- Se o site demorar para carregar, o usuário pode não esperar que seus superefeitos pretendidos pelo designer atraiam a atenção, mas simplesmente fechará sua obra de arte e simplesmente irá para o site de um concorrente, talvez menos colorido, mas mais rápido e mais responsivo. Afinal, nenhum de nós gosta de esperar muito tempo. 🙂
- Quanto maior a velocidade de carregamento do site, menor será a veiculação. motores de busca Por consultas principais, em relação aos sites dos seus concorrentes. E isso já é uma ameaça significativa ao desenvolvimento do seu negócio.
Como habilitar o cache de arquivos no navegador do lado do usuário
Se o seu projeto for desenvolvido em um ambiente popular CMSWordPress, ou seja, existem muitos plugins que podem resolver o problema de cache. Os mais populares deles são W3 Total Cache WP Super Cache Hiper cache. Mas neste artigo proponho considerar uma maneira mais confiável, na minha opinião, de habilitar o cache através do arquivo .htaccess diretamente na hospedagem.
Observe, que os métodos propostos só funcionarão se o software Apache estiver instalado no servidor do seu provedor de hospedagem.
Antes de fazer qualquer alteração no arquivo .htaccess certifique-se de fazê-lo cópia de segurança para o seu computador para que você possa restaurá-lo se algo der errado.
Para ativar o cache do navegador do lado do usuário, Basta usar um dos métodos abaixo. Usar os dois métodos ao mesmo tempo não é aconselhável e pode causar a interrupção do seu site.
Habilitando o cache do navegador no lado do usuário usando o módulo mod_headers
Para habilitar a função de cache, o código abaixo deve ser inserido no arquivo .htaccess, que está localizado no diretório raiz do seu site. Para evitar erros, você precisa inserir o código antes da linha # END do WordPress:
# Habilitando cache nos navegadores dos visitantes do site < ifModule mod_headers . c > # Todos os arquivos html e htm serão armazenados no cache do navegador por 12 horas < FilesMatch "\.(html|htm)$" > Cache do conjunto de cabeçalhos - Controle "max-age=43200" < / FilesMatch > # Todos os arquivos css, javascript e texto serão armazenados no cache do navegador por 7 dias < FilesMatch "\.(js|css|txt)$" > Cache do conjunto de cabeçalhos - Controle "max-age=604800" < / FilesMatch > # Todos os arquivos flash e imagens serão armazenados no cache do navegador por 31 dias < FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$"> Cache do conjunto de cabeçalhos - Controle "max-age=2592000" < / FilesMatch > # Desativa o cache de php e outros arquivos de serviço < FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$"> Cabeçalho não definido Cache - Controle < / FilesMatch > < / IfModule > |
Não vou descrever o que significam estas ou outras directivas. Mais detalhes sobre seus valores podem ser encontrados no site oficial de documentação do Apache.
Habilitando o cache do navegador no lado do usuário usando o módulo mod_expires
Para habilitar o cache no navegador do lado do usuário usando o módulo mod_expires, escreva o seguinte código no arquivo .htaccess:
< ifModule mod_expires . c > Expira ativo em #default o cache é de 30 segundos ExpiresDefault "acesso mais 30 segundos" # Habilite o cache de imagens e o flash por 1 mês Imagem ExpiresByType / x - ícone "acesso mais 1 mês" ExpiresByType image / jpeg "acesso mais 4 semanas" ExpiresByType image / png "acesso mais 30 dias" ExpiresByType imagem / gif "acesso mais 43829 minutos" Aplicativo ExpiresByType / x - shockwave - flash "acesso mais 2592000 segundos" # Habilite o cache de arquivos css, javascript e texto por 7 dias ExpiresByType text/css "acesso mais 604800 segundos" ExpiresByType text/javascript “acesso mais 604.800 segundos” Aplicativo ExpiresByType/javascript “acesso mais 604.800 segundos” |
img class=”aligncenter wp-image-2458 size-full” title=”Como habilitar o cache do navegador de páginas do site” src=”http://about-windows.ru/wp-content/uploads/2014/07/How para habilitar -browser-caching-of-site-pages.jpg” alt=”Como habilitar o cache do navegador das páginas do site” width=”600″ height=”450″ />
Como posso ativar o cache do navegador do usuário final no meu site?
Se o seu servidor informar ao navegador do usuário final que alguns recursos podem ser armazenados no , uma solicitação repetida para os mesmos recursos receberá uma resposta não do servidor remoto, mas do computador local. Ambos os lados se beneficiarão com isso. Assim, o servidor aliviará um pouco a carga, pois não precisará enviar determinados recursos que já estão disponíveis no computador do usuário. Mas o usuário receberá mais acesso rápido aos recursos solicitados.
Como habilitar o cache do navegador de recursos do site em um servidor Apache?
Primeiro, vamos descobrir quais recursos o navegador deve armazenar em cache. Deixe-me lembrá-lo de que se o navegador armazenar em cache alguns recursos, ele pode não atualizá-los completamente por muito tempo. Esta situação é bastante adequada para objetos estáticos. Quais recursos podem ser classificados como objetos estáticos?
- Arquivos CSS.
- Arquivos JS.
- Imagens.
- Vídeo.
- Música.
Os recursos acima, assim como alguns outros recursos, podem ser armazenados em cache por um longo período sem causar danos. Eles não serão atualizados todos os dias. Com base nisso, darei a você um código que forçará o navegador do usuário a armazenar em cache os recursos listados. Além disso, indicaremos o período durante o qual esses recursos podem ser armazenados no cache sem solicitar atualizações.
Expira ativo em
Expira Padrão "acesso 7 dias"
Aplicativo ExpiresByType/javascript "acesso mais 1 ano"
ExpiresByType text/javascript “acesso mais 1 ano”
ExpiresByType text/css “acesso mais 1 ano”
ExpiresByType text/html “acesso mais 7 dias”
ExpiresByType text/x-javascript “acesso 1 ano”
ExpiresByType imagem/gif “acesso mais 1 ano”
ExpiresByType image/jpeg “acesso mais 1 ano”
ExpiresByType image/png “acesso mais 1 ano”
ExpiresByType image/jpg “acesso mais 1 ano”
ExpiresByType imagem/x-icon “acesso 1 ano”
Aplicativo ExpiresByType/x-shockwave-flash “acesso 1 ano”
Este código deve ser inserido no arquivo .htaccess, que fica na pasta raiz do site para o qual o Apache serve como servidor. Depois disso, o navegador armazenará em cache todos os objetos acima durante o período especificado. Isso significa que se você visitar o mesmo site dentro de um ano (conforme indicado no exemplo), receberá muitos arquivos do seu computador, a menos, é claro, que tenha limpado o cache do seu computador durante esse período.
- O cache htaccess salva o conteúdo de uma página da web em computador local quando o usuário o visita;
- Usando o cache do navegador – O webmaster instrui os navegadores sobre como tratar os recursos.
Quando o navegador renderiza uma página web, ele deve carregar o logotipo, o arquivo CSS e outros recursos:
O cache do navegador “lembra” os recursos que o navegador já baixou. Quando um visitante acessa outra página do site, logotipo, arquivos CSS, etc. não devem ser baixados novamente porque o navegador já os "lembrou" (salvou). Esta é a razão pela qual a página da web demora mais para carregar na primeira visita do que em visitas repetidas.
Quando você usa o cache, os arquivos da página da web serão armazenados no cache do navegador. As páginas carregarão muito mais rápido em visitas repetidas. Isso também acontecerá com outras páginas que utilizam os mesmos recursos.
Como habilitar o cache do navegador
- Modifique os cabeçalhos de solicitação de recursos para usar o cache;
- Otimize sua estratégia de cache.
Alterando cabeçalhos de solicitação
Para a maioria das pessoas, a única maneira de armazenar em cache o htaccess de um site é adicionar código ao arquivo .htaccess no servidor web.
O arquivo .htaccess controla muitos configurações importantes para o seu site.
Cache do navegador via arquivo .htaccess
O código abaixo informa ao navegador o que armazenar em cache e por quanto tempo “lembrar” disso. Deve ser adicionado ao início do arquivo .htaccess:
## EXPIRA CACHING ##
Salve o arquivo .htaccess e atualize a página da web.
Como definir o tempo de cache para diferentes tipos de arquivo
O código acima especifica intervalos de tempo. Por exemplo, 1 ano (1 ano) ou 1 mês (1 mês). Eles estão relacionados aos tipos de arquivo. O código acima afirma que os arquivos .jpg (imagens) devem ser armazenados em cache por um ano.
Se você quiser alterar isso para que as imagens JPG também sejam armazenadas em cache por um mês, basta substituir “1 ano” por “1 mês”. Os valores de cache do htaccess acima são ideais para a maioria das páginas da web.
Método alternativo de cache para .htaccess
O método descrito acima é denominado " Expira", ajuda a maioria dos iniciantes com cache. Depois de se sentir confortável com o cache, você pode tentar outro método de cache chamado Cache-Control, que oferece mais opções.
É possível que o método Expires não funcione no seu servidor; nesse caso, você pode tentar usar o Cache-Control.
Controle de cache
Este método permite obter mais controle sobre o cache de páginas no navegador, mas muitas pessoas acham mais fácil especificar todas as configurações de uma vez.
Exemplo de uso em um arquivo .htaccess:
Nº 1 mês para a maioria dos ativos estáticos
O código acima define o cabeçalho Cache-Control dependendo do tipo de arquivo.
Como funciona o controle de cache?
Considere a linha de código de cache acima no navegador htaccess:
Nº 1 mês para a maioria dos ativos estáticos
Esta linha é apenas uma nota. O arquivo .htaccess ignora linhas que começam com o caractere #. Esta observação é recomendada porque você pode ter vários conjuntos de dados diferentes como solução de cache de arquivos:
A linha mencionada acima diz que, " se o arquivo for um desses tipos, faremos algo com ele...»
A coisa mais importante sobre esta linha é que ela lista vários tipos arquivos ( CSS, JS, JPEG, png etc. ) e que as instruções de cache devem ser aplicadas a esses tipos de arquivo. Por exemplo, se não quiser que os arquivos JPG sejam armazenados em cache por um determinado período de tempo, você pode remover " JPG". Se você deseja adicionar HTML, então você precisa indicar nesta linha “ HTML«:
Conjunto de cabeçalho Cache-Control "max-age=2592000, public"
A linha mencionada acima define os cabeçalhos e valores reais:
- Papel " Conjunto de cabeçalho Cache-Control» — define o título;
- Variável " idade máxima=2592000"—indica quanto tempo levará o processo de armazenamento em cache (em segundos). Nesse caso, armazenamos em cache por um mês (2.592.000) segundos;
- Papel " público» relata que está disponível publicamente.
