O desempenho de renderização da sua página da web atende aos padrões atuais? Renderização é o processo de traduzir a resposta de um servidor na imagem que o navegador 'pinta' quando um usuário visita um site. Um desempenho de renderização ruim pode se traduzir em uma taxa de rejeição relativamente alta.

Existem diferentes respostas do servidor que determinam se uma página é ou não renderizada. Neste artigo, vamos nos concentrar na renderização inicial da página da web, que começa com a análise de HTML (desde que o navegador tenha recebido HTML como resposta do servidor). Exploraremos o que pode levar a tempos de renderização elevados e como corrigi-los.

Caminho de renderização crítico

O caminho crítico de renderização (CRP) é o processo pelo qual seu navegador passa para converter o código em pixels exibíveis na tela. Possui várias etapas, algumas das quais poderiam ser executadas em paralelo para economizar tempo, mas algumas partes devem ser executadas consequentemente. Aqui é visualizado:

Em primeiro lugar, quando o navegador obtém a resposta, ele começa a analisá-la. Quando encontra uma dependência, ele tenta baixá-la.

diferença entre um s corp e c corp

Se for um arquivo de folha de estilo, o navegador terá que analisá-lo completamente antes de renderizar a página, e é por isso CSS é dito ser um bloqueio de renderização .

Se for um script, o navegador deve: parar de analisar, baixar o script e executá-lo. Só depois disso ele pode continuar a analisar, porque os programas JavaScript podem alterar o conteúdo de uma página da web (HTML, em particular). E é por causa disso JS é chamado de bloqueio de analisador .

Uma vez que toda a análise é feita, o navegador tem o Document Object Model (DOM) e o Cascading Style Sheets Object Model (CSSOM) construídos. Combiná-los fornece a Árvore de Renderização. As partes não exibidas da página não fazem parte da Árvore de renderização, porque ela contém apenas os dados necessários para desenhar a página.

A penúltima etapa é traduzir a árvore de renderização em layout. Este estágio também é chamado de Refluxo. É onde cada posição de cada nó da Árvore de Renderização, bem como seu tamanho, são calculados.

Finalmente, a última etapa é o Paint. Envolve literalmente colorir os pixels de acordo com os dados que o navegador calculou durante os estágios anteriores.

Conclusões relacionadas à otimização

Como você pode imaginar, o processo de otimização do desempenho do site envolve mudanças no site que reduzem:

• A quantidade de dados que deve ser transferida
• A quantidade de recursos que o navegador precisa fazer download (especialmente os bloqueadores)
• A duração do CRP

Além disso, vamos nos aprofundar nos detalhes de como isso é feito, mas primeiro, há uma regra importante a ser observada.

Como medir o desempenho

Uma regra importante de otimização é: Meça primeiro, otimize conforme necessário . A maioria das ferramentas de desenvolvedor dos navegadores tem uma guia chamada atuação , e é aí que as medições acontecem. Ao otimizar para a renderização inicial (primeira) mais rápida, a coisa mais importante a se observar é a hora dos seguintes eventos:

• Primeira Pintura
• Primeira pintura com conteúdo
• Primeira pintura significativa

Aqui, “Paint” significa renderização bem-sucedida de uma página, o último estágio no caminho de renderização crítico. Algumas renderizações podem acontecer uma após a outra porque os navegadores tentam exibir algo o mais rápido possível e atualizar mais tarde.

Além do tempo de renderização, há outras coisas a serem levadas em consideração - o mais importante, quantos recursos de bloqueio são usados ​​e quanto tempo leva para baixá-los. Essas informações são encontradas na guia Desempenho após as medições serem feitas.

Estratégias de Otimização de Desempenho

Considerando o que aprendemos acima, existem três estratégias principais para a otimização do desempenho do site:

1. Minimizando a quantidade de dados a serem transferidos pela rede,
2. Reduzir o número total de recursos a serem transferidos pela rede, e
3. Encurtando o caminho crítico de renderização

1. Minimize a quantidade de dados a serem transferidos

Em primeiro lugar, remova todas as partes não utilizadas, como funções inacessíveis em JavaScript, estilos com seletores que nunca correspondem a nenhum elemento e tags HTML que ficam ocultas para sempre com CSS. Em segundo lugar, remova todas as duplicatas.

Então, eu recomendo colocar em prática um processo automático de minimização. Por exemplo, ele deve remover todos os comentários do que seu back end está servindo (mas não o código-fonte) e cada caractere que não contém informações adicionais (como caracteres de espaço em branco em JS).

que tipo de figura de dados é boa para mostrar processos ou ideias complexas?

Depois de feito isso, o que resta pode ser um texto. Isso significa que podemos aplicar com segurança um algoritmo de compactação como o GZIP (que a maioria dos navegadores entende).

Finalmente, existe o cache. Não vai ajudar na primeira vez que um navegador renderizar a página, mas vai economizar muito nas visitas subsequentes. No entanto, é fundamental manter duas coisas em mente:

____ envolve trabalhar com o ponto focal de um projeto.

• Se você usar um CDN, certifique-se de que o armazenamento em cache seja compatível e configurado corretamente.
• Em vez de esperar pela data de expiração dos recursos, você pode querer ter uma maneira de atualizá-los mais cedo de sua parte. Incorporar 'impressões digitais' dos arquivos em seus URLs para poder invalidar cache local .

Obviamente, as políticas de cache devem ser definidas por recurso. Alguns raramente mudam ou nunca mudam. Outros estão mudando mais rápido. Alguns contêm informações confidenciais, outros podem ser considerados públicos. Use o Diretiva “privada” para evitar que os CDNs armazenem dados privados em cache.

A otimização de imagens da web também pode ser feita, embora as solicitações de imagem não bloqueiem a análise ou renderização.

2. Reduza a contagem total de recursos críticos

“Crítico” refere-se apenas aos recursos necessários para que a página da web seja renderizada corretamente. Portanto, podemos pular todos os estilos que não estão envolvidos diretamente no processo. E todos os scripts também.

Folhas de estilo

Para informar ao navegador que arquivos CSS específicos não são necessários, devemos definir media atributos para todos os links que fazem referência às folhas de estilo. Com essa abordagem, o navegador tratará apenas os recursos que correspondem ao atual media (tipo de dispositivo, tamanho da tela) conforme necessário, enquanto diminui a prioridade de todas as outras folhas de estilo (elas serão processadas de qualquer maneira, mas não como parte do caminho de renderização crítico). Por exemplo, se você adicionar media='print' atributo para o style tag que faz referência aos estilos de impressão da página, esses estilos não interferem em seu caminho de renderização crítico quando a mídia não é print (ou seja, ao exibir a página em um navegador).

Para melhorar ainda mais o processo, você também pode fazer alguns dos estilos embutidos. Isso nos economiza pelo menos uma viagem de ida e volta ao servidor que, de outra forma, seria necessária para obter a folha de estilo.

Scripts

Conforme mencionado acima, os scripts bloqueiam o analisador porque podem alterar o DOM e o CSSOM. Portanto, os scripts que fazem não alterá-los não deve ser uma análise de bloco, economizando tempo.

Para implementar isso, todas as tags de script devem ser marcadas com atributos - seja async ou defer.

Scripts marcados com async não bloqueie a construção do DOM ou CSSOM, pois eles podem ser executados antes da construção do CSSOM. Lembre-se, porém, de que os scripts inline bloquearão o CSSOM de qualquer maneira, a menos que você os coloque acima do CSS.

Em contraste, os scripts marcados com defer será avaliado no final do carregamento da página. Portanto, eles não devem afetar o documento (caso contrário, isso acionará uma nova renderização).

Em outras palavras, com defer, o script não é executado até que o evento de carregamento da página seja disparado, enquanto async permite que o script seja executado em segundo plano enquanto o documento está sendo analisado.

qual escola de psicologia desenvolveu o princípio de fechamento

3. Reduza o comprimento do caminho de renderização crítico

Finalmente, o comprimento da CRP deve ser reduzido ao mínimo possível. Em parte, as abordagens descritas acima farão isso.

Consultas de mídia como atributos para as tags de estilo reduzirão a contagem total de recursos que precisam ser baixados. Os atributos da tag de script defer e async impedirá que os scripts correspondentes bloqueiem a análise.

Minificação, compactação e recursos de arquivamento com GZIP irão reduzir o tamanho dos dados transferidos (reduzindo também o tempo de transferência de dados).

A inclusão de alguns estilos e scripts pode reduzir o número de idas e voltas entre o navegador e o servidor.

O que ainda não discutimos é a opção de reorganizar o código entre os arquivos. De acordo com a ideia mais recente de melhor desempenho, a primeira coisa que um site deve fazer mais rápido é exibir o conteúdo ATF. ATF significa acima da dobra. Esta é a área que fica visível imediatamente, sem rolar. Portanto, é melhor reorganizar tudo relacionado à renderização de forma que os estilos e scripts necessários sejam carregados primeiro, com tudo parando - nem análise nem renderização. E lembre-se sempre de medir antes e depois de fazer a alteração.

Conclusão: a otimização abrange toda a sua pilha

Em resumo, a otimização do desempenho do site incorpora todos os aspectos da resposta do seu site, como cache, configuração de um CDN, refatoração, otimização de recursos e outros, no entanto, tudo isso pode ser feito gradualmente. Como um desenvolvedor web , você deve usar este artigo como referência e sempre se lembrar de medir o desempenho antes e depois de seus experimentos.

Os desenvolvedores de navegadores fazem o possível para otimizar o desempenho do site para cada página que você visita, e é por isso que os navegadores geralmente implementam o chamado “pré-carregador”. Esta parte dos programas verifica antes de um recurso que você solicitou em HTML, a fim de fazer várias solicitações de uma vez e executá-las em paralelo. É por isso que é melhor manter as tags de estilo próximas umas das outras em HTML (em linha), bem como as tags de script.

Além disso, tente agrupar as atualizações em HTML para evitar vários eventos de layout, que são disparados não apenas por uma mudança no DOM ou CSSOM, mas também por uma mudança na orientação do dispositivo e um redimensionamento da janela.

Recursos úteis e leituras adicionais:

• PageSpeed ​​Insights
• Lista de verificação de cache
• Um caminho para teste se GZIP estiver habilitado para o seu site
• Rede de navegador de alto desempenho : Um livro de Ilya Grigorik

Compreender o básico

O que é otimização de sites?

A otimização de sites é o processo de análise de um site e introdução de alterações para que ele carregue mais rápido e tenha um melhor desempenho. As medições são uma parte crucial desse processo e, sem elas, não há como decidir se uma determinada mudança melhorou ou piorou as coisas.

qual dessas não é uma razão pela qual a proteção de aplicativos da web do lado do servidor é difícil

Como posso verificar o desempenho do meu site?

Tente usar ferramentas online como o PageSpeed ​​Insights do Google. Você também pode usar seu navegador no modo 'Navegação privada' para carregar o site sem ter nenhum dos dados em cache localmente. Alguns navegadores também permitem que você use o controle de fluxo, o que ajuda a simular uma conexão lenta.

Qual é a velocidade do site?

A velocidade do site pode ser definida como o tempo médio que leva para um site carregar. Alternativamente, pode significar sua taxa de quadros por segundo, especialmente durante operações de computação pesada.

Com que rapidez um site deve carregar?

De preferência, ele deve carregar em menos de um segundo. Obviamente, o tempo até a primeira pintura significativa é mais importante do que o tempo total de carregamento, contanto que mantenha o usuário ocupado com o conteúdo.

Qual é a função de um motor de renderização?

No contexto dos navegadores, um mecanismo de renderização é uma parte do software responsável por desenhar os dados na janela do navegador. Consulte Caminho de renderização crítico acima para obter os detalhes.

O que é o bloqueio de renderização?

O bloqueio de renderização é o que o navegador tem que fazer ao analisar os arquivos de folha de estilo, porque ele não pode renderizar a página até que todos os arquivos de folha de estilo referenciados sejam analisados.