Velocidade de carregamento do site. 4 fatores principais.

Tags: SEO

Velocidade de carregamento do site. Como aumentar a velocidade de download? Principais problemas.

Recomendado velocidade de carregamento do site O Google - 2 segundos. (e agora olhe para a sua velocidade)

(Como verificar a velocidade de carregamento do site?A maneira mais fácil e rápida é abrir ferramentas de desenvolvedor CTRL+SHIFT+IEm seguida, selecione a guia “Rede” e atualize a página, para ver a velocidade de download necessária para atualizar a página, Atualizar sem cache: você precisa pressionar CTRL + F5 / CTRL + R. E abaixo estará a velocidade de download.)

Verifique a velocidade de carregamento do site
usando um serviço do Google: PageSpeed Insights

Os principais pontos que mais afetam:

Cache
css (estilos)
JS (roteiros)
Imagens (seu peso, tamanho - sim, exatamente o tamanho HxW, Meta dados - sim, existe tal coisa, esta é a informação deles, como: Data, título, tópico, etc.)

Para não pintar muitas informações desnecessárias sobre pequenos momentos que não afetam particularmente ou têm um efeito insignificante, não escreverei sobre eles.

#1 DINHEIRO

cache (ouesconderijo) é um buffer (um local) onde todos os dados são armazenados. No nosso caso, são imagens, código, estilos e muito mais.

O mais fácil o que você pode fazer sozinho é habilitar o cache na hospedagem.
(Se você tiver a hospedagem do Ukraine.com.ua, então você precisa ir para "configurações do site" -> "configurações básicas" e haverá um item "Caching" e lá você seleciona a quantidade de tempo necessária para que seu site ser armazenado em cache. De mim mesmo, recomendo configurá-lo para 2 semanas - com esse período de armazenamento em cache, os insights de velocidade da página do Google adicionam muitos pontos.)

outros métodos relacionados a htaccess, tags de navegador, etc. podem ser encontrados na Internet para alguns artigos e não vejo sentido em repintar. Você pode ler sobre os tipos de cache no artigo sobre Habré.

#2 CSS (estilos)

CSS - (Cascading Style Sheets - folhas de estilo em cascata).
O que pode ser feito com estilos?
Nós vamos em primeiro lugar espremê-los.
Em segundo lugar reduzir o número de arquivos, ou seja, mesclar o máximo possível para reduzir o número de chamadas para o servidor.
Em terceiro lugarincorpore os estilos principais que afetam a exibição da parte visível da primeira tela diretamente em e deixe o restante no arquivo.

Deixo também alguns links úteis:

serviços de compactação css
como compactar arquivos css

#3 JS (roteiros)

Aqui também temos várias formas de otimizar scripts.

Adiar o carregamento do script. Puxe-o o mais baixo possível, coloque-o atrás de ou até mais baixo, às vezes ajuda, às vezes não é uma opção. Mas o ponto número 2 vem em socorro.
ASYNC – carregamento de script assíncrono. Isso é feito usando o parâmetro “async”
Há mais detalhes sobre assíncrono aqui.
Um pouco mais de informação sobre JS e sua influência.
Ponto menor.
JS também pode ser compactado. Também mescle em 1 arquivo.

#4 Fotos

Você sempre pode fazer três coisas: olhar para o fogo, olhar para a água e otimizar as fotos.

O tema é bastante extenso, por isso tentarei dar-lhe apenas informações importantes.

Otimize o peso.

Como? Através de um programa ou serviço.

Programa para trabalho em massa com fotos Imagem de Pedra Rápidacom ele você pode
Redimensionar imagens em massa. Como e o que já google não é difícil.
Baixe a imagem Faststone.
Serviço para reduzir o tamanho das imagens - Panda. Ou melhor, TinyPNG e TinyJPG.
A principal vantagem do ONLINE. Basta fazer o upload dos arquivos e voltar em uma versão compactada - A qualidade não sofre nada (é Magic).
Links: tinypng.com e tinyjpg.com

Otimizar Tamanho.

O tamanho como escrevi acima pode ser alterado usando o programa imagem de pedra rápida.
O tamanho é Altura x Peso (Altura por Largura).

Exemplo:

O tamanho	Píxeis	tamanho do arquivo
100 x 100	10 000	39 KB
200 x 200	40 000	156 KB
300 x 300	90 000	351 KB
500 x 500	250 000	977 KB
800 x 800	640 000	2.500 KB

(Se você quiser saber mais sobre isso, você pode ler a ajuda do Google sobre este tópico. ARTIGO do Google, mas eu aviso que é nerd até certo ponto)

Por exemplo, temos 2 imagens:
1) Peso 100kb, Tamanho 500x500
2) Peso 100kb, Tamanho 2500x2500
Parece que que diferença faz, eles pesam o mesmo, portanto, carregá-los deve ser igualmente complicado ou simples, mas não estava lá se você verificar pelo google page speed insgiht, ele ainda jurará em uma resolução mais alta imagem.

Resumindo: Tamanho importa. Peso também. (o resto não é tão importante, mas de acordo com os argumentos de alguns especialistas também tem impacto, agora estou falando de Image Metadata)

Eu realmente não escrevi nada sobre metadados, bem, não há nada para escrever aqui ...
Basta limpar todos os metadados de todas as imagens, de acordo com a legenda, você pode reduzir o tamanho em 2 vezes. descobri recentemente (sobre o efeito do tamanho do arquivo, achei bem insignificante).

Brevemente sobre o lançamento: