É muito importante para o site carregar o mais rápido possível; Os usuários desejam visualizar rapidamente a página que desejam ver e, se você não puder satisfazê -los, eles a procurarão em outro lugar. Neste artigo, você verá uma discussão de cinco técnicas simples e eficazes para acelerar suas páginas da web.
Conhecer o tempo de carregamento do site é o primeiro passo antes de decidir o que dá errado. Ele também permite que você saiba se você precisa fazer alterações para a aceleração do seu site.
Antes de começarmos, se você ainda não instalou a YSLOW, instale -o. É uma extensão do Mozilla Firefox, você pode encontrá -lo no link abaixo:
Primeiro, vamos navegar no site das seis revisões, todos usamos o mesmo exemplo para testá -lo (só precisam abrir em uma nova guia ou janela do navegador).
No navegador, há uma coluna do odômetro (como mostrado na Figura 1). Ao lado, quando a página da web terminar de carregar, você verá Yslow e números. O número representa o tempo (em segundos) que leva para o navegador carregar um site. Queremos que esse número seja o mais baixo possível.
Figura 1: Ícone e odômetro Yslow mostrando o tempo de carregamento da página da web
Na maioria dos casos, um ou um grupo de razões que causam um longo tempo de carregamento das páginas da web são as seguintes:
Discutiremos isso mais tarde.
Para garantir que o tempo de carregamento do seu próprio site seja exibido, navegue em alguns sites. Confira Google, Facebook e alguns blogs e sites que você gosta. Você notará que quanto mais imagens o site usa, mais tempo será o tempo de resposta que a página JS será.
Além de medir a rapidez com que a YSLOW fornece algumas idéias detalhadas, como o que você pode fazer para melhorar o desempenho do seu site, bem como a falta de desempenho de carga do seu site.
A figura abaixo é a guia 'Performance' (como mostrado na Figura 2). Mas se você clicar nele, ele mostrará os detalhes de cada área que afeta o tempo de carregamento e o desempenho geral.
Figura 2: Tags de desempenho
Nesse campo, a opção mais subjetiva é usar CDN (rede de distribuição de conteúdo) .CDN é muito eficaz para sites grandes. O que eles fazem é espalhar o conteúdo do site entre os servidores em várias regiões. Quanto mais próximo o servidor físico estiver do usuário carregando um site, mais rápido é uma página. Portanto, essencialmente, o uso do CDN é distribuir conteúdo do servidor para o usuário da página acessado mais próximo.
Figura 3: As tags de desempenho usam letras (A, B, C, D, F) para representar notas e notas atuais (1-100).
Além de usar um CDN (que pode ser caro) - todo o resto é factível.
Vamos percorrer cada fator de nível, aqui está uma breve segunda velocidade para cada campo de nível e como resolver esses problemas para obter o melhor desempenho.
Reduza as solicitações HTTP : Quando uma página da Web obtém arquivos do servidor, uma solicitação HTTP será gerada. O escopo inclui scripts, arquivos CSS, fotos e solicitações de cliente/servidor assíncronas (AJAX e outras tecnologias em mudança). Este é o ponto principal ao falar sobre desempenho, mas pode ser facilmente resolvido com apenas um pouco de esforço. Por exemplo, geralmente é útil mesclar scripts, CSs e imagens o máximo possível, os arquivos de cache na máquina do usuário.
Adicionar cabeçalho de termo : 80% do tempo de carregamento da página está relacionado ao download de scripts, imagens e CSS. Na maioria dos casos, esses elementos não mudarão na máquina do usuário. Você pode cache o código no .htaccess na máquina local do usuário (discutiremos como operar mais adiante no artigo).
Componente GZIP : Arquivos JS compactados ou compactados, imagens, documentos HTML, documentos CSS, etc. Os usuários podem baixar versões de arquivo menores para aumentar a velocidade de carregamento das páginas da Web. Isso pode reduzir o consumo do servidor, mas os componentes de descompressão também podem causar a resposta da página a mais lenta, dependendo do navegador do usuário.
Coloque o CSS na parte superior : Coloque o arquivo CSS na parte superior do site, que pode carregar outras peças, como imagens e texto possível ao mesmo tempo.
Coloque o JS na parte inferior : Coloque o CSS na cabeça do documento, você só precisa inserir JS antes de fechar <boby>. Embora esses scripts sejam carregados em segundo plano, o usuário recebe a página aparentemente completa.
Evite expressões CSS : nunca usei expressões CSS (chamadas recursos dinâmicos), que são apenas um recurso CSS que adiciona conceitos de programação (como estruturas de controle/condicional), no IE8, o mecanismo de layout do Trident (usado no IE) não é mais suportado. De qualquer forma, eles não têm uma boa ideia de usar. Até certo ponto, eu usaria scripts PHP para carregar diferentes regras de estilo CSS com base em diferentes condições, como um número aleatório, hora do dia ou navegador.
Chamadas externas para JS e CSS : Coloque os arquivos JS e CSS em arquivos externos, e o navegador os armazena em cache com uma velocidade de carregamento de página mais rápida do que cada chamada.
Reduza a pesquisa do DNS : desde que o usuário digite um nome de domínio na barra de endereços do navegador, o navegador sempre executará o DNS que procura endereços IP. Quanto mais locais de entrada o site tiver, mais necessária será a pesquisa de DNS. Mantenha o nível o mais baixo possível e execute uma consulta DNS em média 60-100 milissegundos.
Zoom em JS : Ao contrário da compactação geral do GZIP, o zoom nos documentos JS é remover espaços desnecessários, guias e outros caracteres de seleção de Zhonghe Yang, reduzir o tamanho total do arquivo e as páginas menores podem obter uma velocidade de carregamento mais rápida. Você pode usar o JSMIN para ampliar o JavaScript.
Evite redirecionamento : se é redirecionamento do cabeçalho do servidor, redirecionamento de JS ou redirecionamento do elemento HTML. Seu site carregará o cabeçalho de uma página em branco e, em seguida, uma nova página. Os usuários gastam cada vez mais tempo para obter a página de que precisam, para evitar isso a todo custo.
Remova scripts duplicados : o navegador carregando o mesmo script aumentará o tempo de carregamento da página, que é um problema matemático muito simples, mais arquivos são iguais a mais tempo de carregamento. Verifique duas vezes seu site para garantir que você não ligue para o jQuery duas ou três vezes ou outros scripts.Quando ... isso foi muito, vamos para a próxima guia da YSLOW pouco antes de entrarmos em outras técnicas para aumentar o desempenho do seu site.
Figura 4: Rótulo de peças.
As tags de peça (como mostrado na Figura 4) podem fornecer informações sobre os efeitos do aumento da velocidade de carregamento do site. Aqui você pode ver quanto tempo o documento atual precisa carregar, se esses arquivos forem compactados, o tempo de resposta e se forem armazenados em cache na máquina do usuário e quando o cache expirar. Esta é uma boa avaliação do site, medindo seu desempenho e otimização de velocidade. Finalmente, a tag estatística (como mostrado na Figura 4), que nos mostra todas as solicitações HTTP, os documentos baixados ao mesmo tempo e os arquivos armazenados em cache. O cache vazio exibe o arquivo que o navegador precisa para baixar a página de renderização. O cache preparado, por outro lado, exibe uma lista de arquivos que já existem no cache do navegador do usuário, salvando assim a solicitação do navegador para não precisar baixar o arquivo novamente.
Figura 5: guia estatísticas.