Com o aumento da largura de banda, há cada vez mais objetos na página da web, por isso ainda é um tópico importante acelerar a abertura das páginas da web. Existem três maneiras de acelerar a abertura das páginas da web: uma é aumentar a largura de banda da rede, a segunda é otimizar o usuário na máquina local e a terceira é otimizar as páginas da Web pelos designers de sites. Este artigo é baseado na perspectiva de um designer de sites e compartilha algumas dicas para otimizar a velocidade de carregamento da página da web.
1. Otimize imagens
Quase não há página da web sem fotos. Se você já experimentou os 56 mil gatos, definitivamente não gostará de sites com muitas fotos. Porque carregar essa página da Web levará muito tempo.
Mesmo agora, a largura de banda da rede melhorou muito e 56k Cat desapareceu gradualmente, e ainda é necessário otimizar as imagens para acelerar as páginas da web.
A otimização de imagens inclui reduzir o número de imagens, reduzir a qualidade da imagem e usar formatos apropriados.
1. Reduza o número de imagens: remova imagens desnecessárias.
2. Reduza a qualidade da imagem: se não for muito necessário, tente reduzir a qualidade da imagem, especialmente o formato JPG.
3. Use o formato apropriado: consulte o próximo ponto.
Portanto, antes de fazer o upload de fotos, você precisa editar as fotos. Você está com preguiça de editar, mas quer que as fotos tenham efeitos especiais? Você pode tentar usar o chamado JavaScript para implementar efeitos especiais da imagem.
2. Seleção de formato de imagem
Existem três formatos de imagem geralmente usados nas páginas da Web, a saber, JPG, PNG e GIF. Hora da página da web.
1. JPG: Fotografias que geralmente são usadas para exibir paisagens, caracteres e fotos artísticas. Às vezes, também é usado nas capturas de tela do computador.
2. GIF: Há menos cores fornecidas e podem ser usadas em alguns lugares onde não há alta demanda por cores, como logotipos de sites, botões, expressões, etc. Obviamente, uma aplicação importante do GIF é a animação. Como uma imagem de reflexão feita com Lunapic.
3. PNG: O formato PNG pode fornecer um fundo transparente e é um formato de imagem especialmente inventado para exibição de páginas da web. Geralmente é usado em páginas da web que requerem exibição de fundo transparente ou requer alta qualidade de imagem.
3. Otimize CSS
As folhas de estilo de sobreposição de CSS tornam as páginas da web mais eficientes para carregar e melhorar a experiência de navegação. Com CSS, o método de layout do formulário pode ser aposentado.
Mas, às vezes, quando escrevemos CSS, usamos algumas frases mais prolixo, como esta frase:
Margin-top: 10px;
Margem-direita: 20px;
Margin-Bottom: 10px;
margem-esquerda: 20px;
Você pode simplificar para:
margem: 10px 20px 10px 20px;
Ou esta frase:
＜ P class = "Decorated"> um parágrafo de texto decorado ＜/p>
＜ P class = "Decorated"> Segundo parágrafo ＜/p>
＜ P class = "Decorated"> Terceiro parágrafo ＜/p>
＜ P class = "Decorated"> Forth Parágrafo ＜/P>
Você pode usar o DIV para incluir:
＜ Div Class = "Decorado">
＜ P> um parágrafo de texto decorado ＜/p>
＜ p> Segundo parágrafo ＜/p>
＜ P> Terceiro parágrafo ＜/p>
＜ P> Forth Parágrafo ＜/P>
＜/div>
O CSS simplificado pode remover atributos redundantes e melhorar a eficiência operacional. Se você está com preguiça de simplificar depois de escrever CSS, pode usar algumas ferramentas CSS simplificadas on -line, como o CleanCSS.
4. Adicione uma barra na parte de trás do URL
Alguns URLs, por exemplo, quando um servidor recebe uma solicitação de endereço, leva tempo para determinar o tipo de arquivo do endereço. Se a Web for um diretório, você também poderá adicionar uma barra extra ao URL para fazê -lo / para que o servidor possa saber claramente para acessar o índice ou o arquivo padrão no diretório, economizando tempo de carregamento.
V. indicar altura e largura
Isso é importante, mas muitas pessoas sempre o ignoram por causa da preguiça ou de outras razões. Quando você adiciona imagens ou tabelas em uma página da web, você deve especificar sua altura e largura, ou seja, os parâmetros de altura e largura. Se o navegador não encontrar esses dois parâmetros, ele precisará calcular o tamanho ao baixar a imagem. Isso não apenas afeta a velocidade, mas também afeta a experiência de navegação.
Aqui está um código de imagem relativamente amigável:
＜ img id = "lua" altura = "200" width = "450" src = " />
Quando o navegador conhece os parâmetros de altura e largura, mesmo que a imagem não possa ser exibida por enquanto, a imagem será liberada na página e, em seguida, o conteúdo subsequente continuará sendo carregado. Portanto, o tempo de carregamento é mais rápido e a experiência de navegação é melhor.
6. Reduza as solicitações HTTP
Quando um navegador abre uma página da web, o navegador emite muitas solicitações de objetos (imagens, scripts etc.). Se houver muitos objetos na página da web, isso pode levar muito tempo.
Portanto, precisamos reduzir o ônus das solicitações HTTP. Como reduzir o fardo?
1. Remova alguns objetos desnecessários.
2. Combine as duas fotos próximas em uma.
3. Mesclar CSS
Dê uma olhada no código a seguir e você precisa carregar três CSs:
＜ link rel = "Stylesheet" type = "text/css" href = "/body.css"/>
＜ link rel = "STILESHEET" TIPO = "TEXT/CSS" HREF = "/SAILE.CSS"/>
＜ link rel = "Stylesheet" type = "text/css" href = "/footer.css"/>
Podemos sintetizá -lo em um:
＜ link rel = "Stylesheet" type = "text/css" href = "/style.css"/>
Isso reduz as solicitações HTTP.
7. Outras dicas (adicionadas pelo tradutor)
1. Remova suplementos desnecessários.
2. Se você incorporar widgets de outros sites na página da web, se você tiver espaço para escolher, você deverá escolher um rápido.
3. Tente usar imagens em vez de flash, o que também é benéfico para o SEO.
4. Se algum conteúdo puder ser estático, será estático reduzir a carga no servidor.
5. O código estatístico é colocado no final da página.