Otimização de desempenho da página da web

Ouça este artigo

Os sites geralmente são divididos em duas partes: front-end e back-end. Podemos entender que o fundo é usado para implementar as funções do site, como: realizar o registro do usuário, alterar senhas, comentar artigos e assim por diante. Mas e o front-end? Na verdade, deveria ser uma função de desempenho. A maioria dos fatores que afetam a acessibilidade do usuário estão relacionados à otimização das páginas externas do site. otimização de página – este artigo dará uma visão geral desse processo.

O conteúdo do artigo:

• 1. Otimizando o tempo de carregamento da página
• 2. Comprima todos os recursos compressíveis
• 3. Otimização do Cache do Site
• 4. Caminho crítico de renderização

1. Otimizando o tempo de carregamento da página

Melhor Otimização de Página - é quando os recursos não são carregados. Portanto, tente minimizar o número de recursos desnecessários baixados.

1. Avalie se algumas das dependências do seu site são necessárias e pese os prós e os contras.
2. O caminho de carregamento dependente é confiável e bloqueará a página inteira quando estiver indisponível.

2. Comprima todos os recursos compressíveis

1. O código deve estar todo compactado.
2. Exclua fotos indesejadas.
3. Use css3 em vez de imagens.
4. Use imagens com uma taxa de compactação mais alta. Especialmente GIFs, alguns formatos de vídeo (H.264 ou WebM) são muito menores que os GIFs.
5. Use fontes WordArt, não imagens.
6. Forneça formatos de imagem mais modernos para usuários com navegadores mais recentes (por exemplo: WebP).
7. Bitmaps com várias resoluções para diferentes tamanhos de página.
8. Especifique uma largura e altura para a imagem, caso contrário, poderá ocorrer recorte.
9. Use HTTP/2. Por exemplo, um sprite é uma imagem grande composta de muitas imagens pequenas, o que pode reduzir o número de solicitações HTTP. No entanto, é difícil armazenar em cache e alterar a imagem pequena invalidará o cache de todas as imagens pequenas. HTTP/2, várias solicitações podem ser iniciadas a partir de um link, eliminando a necessidade de sprites.

3. Otimização do cache do site

Mecanismo de cache do navegador:

1. Visite a página, solicite vários recursos e o navegador verifica se existe um cache local.
2. Em caso afirmativo, verifique se o recurso expirou. Não expirou, use o cache diretamente. Quando expira, uma solicitação é feita ao servidor.
3. Os campos de cabeçalho etag e última modificação serão incluídos na solicitação enviada.
4. O servidor usará o Etag e a última modificação para determinar se o recurso armazenado em cache pelo navegador não está disponível.
5. Se o recurso ainda for válido, retorne um código de resposta 304 para instruir o navegador a usar o cache. Caso contrário, retorne o recurso atualizado.

De acordo com esse conjunto de lógica, você pode planejar o cache do seu site.

Como posso notificar o navegador para atualizar um recurso se o recurso expirar antecipadamente?

Isso geralmente não é possível porque o navegador vê que o recurso não expirou e não faz a solicitação. Mas isso pode ser obtido alterando a URL do recurso. Portanto, você precisa adicionar um número de versão ou uma tag aleatória ao nome do arquivo do recurso. Por exemplo style.12.css. Ou seja, não deixe o navegador armazenar em cache o arquivo html, caso contrário, o navegador não consultará o servidor até que ele expire.

4. Caminho crítico de renderização

O navegador exibe a página da Web com as seguintes etapas:

1. Processe a marcação HTML e construa a árvore DOM.
2. Processe a marcação CSS e construa a árvore CSSOM.
3. Combine DOM e CSSOM em uma árvore de renderização.
4. Layout de acordo com a árvore de renderização para calcular as informações de geometria de cada nó.
5. Desenhe cada nó na tela.

Otimizar o caminho crítico de renderização significa otimizar o processo de renderização para que a página da web possa ser renderizada o mais rápido possível.

CSS

Arquivos CSS bloqueiam a renderização. Depois que o navegador cria a árvore DOM, ele deve aguardar a conclusão da árvore CSSOM. Uma tag na parte superior do documento para evitar CSS fora do padrão e permitir que o navegador solicite o arquivo CSS o mais rápido possível.

Evite usar @import em arquivos css porque o navegador só encontrará e carregará o css importado depois que o arquivo contendo a importação for carregado e compilado. Considere o uso de CSS embutido que não requer solicitações adicionais e não bloqueia a renderização do conteúdo principal.

js

O script Java não começará a ser executado até que o CSSOM seja construído. js também impede que a árvore DOM seja construída. Se async não estiver marcado na tag.

Agora você vai entender o que é otimização de página e como ela é construída. Entender esses processos ajudará você a otimizar rapidamente as páginas do seu site, reduzir as solicitações e acelerar o carregamento.

Lendo este artigo:

• Otimização de CSS - 21 maneiras de acelerar seu site
• Otimizando o código do site JS e CSS online - um guia detalhado

Obrigado por ler: AJUDANTE DE SEO | NICOLA.TOP