Mais técnicas de otimização para melhorar a velocidade do site
O desempenho da Web é um elemento essencial da experiência do usuário. Aqui, veremos algumas técnicas um pouco mais avançadas para melhorar o desempenho da web front-end.
Depois de aplicar todas essas otimizações no meu site, consegui obter uma pontuação perfeita (100/100) do PageSpeed Insights para análises de desempenho da Web para dispositivos móveis e computadores.
Otimizando a estrutura HTML
Por muito tempo, pensei que minhas referências externas de CSS e JavaScript deveriam estar dentro das <head> tags. Fazer referência a recursos JS e CSS no início de documentos HTML fez sentido para mim porque preciso dessas coisas para que minhas páginas da Web tenham aparência e funcionem corretamente.
Mas ter elementos scripte link no início do documento HTML pode bloquear a renderização da página, o que significa que o navegador não processará e exibirá nenhum elemento HTML subsequente até que os recursos tenham sido baixados e processados. Muitos arquivos JavaScript, especialmente aqueles escritos com programação assíncrona em mente, geralmente não precisam ser referenciados dentro da <head> tag e podem ser carregados mais abaixo no documento HTML para que não impeçam o navegador de renderizar o conteúdo da página. Fazer referência a arquivos CSS no final do documento HTML é um pouco mais complicado.
Isso porque quando você carrega arquivos CSS no final do documento, o usuário pode começar a ver o conteúdo da página sem nenhum estilo porque as regras de estilo da folha de estilo externa ainda não foram carregadas e processadas. Essa situação é chamada de flash de conteúdo sem estilo (FOUC).
Fazendo referência a arquivos JavaScript e CSS na parte inferior
Sempre que possível , devemos referenciar recursos externos na parte inferior do documento.
bodyPouco antes da tag de fechamento .
<html> <head> … </head> <body> …
<!– script and link elements ideally go here –> </body> </html>
Lidando com Flash de conteúdo sem estilo
Para resolver o FOUC, o que fiz foi dar ao bodyelemento um atributo de estilo embutido de 0% de opacidade.
<body style=opacity:0>
Então, na minha folha de estilo externa, redefino o bodyelemento de volta para 100% de opacidade.
body { opacity: 1 !important; }
Quando a folha de estilo externa for carregada e processada, o conteúdo será exibido.
O problema com essa técnica é que, se houver uma falha no servidor que impeça o download do arquivo CSS, o usuário verá apenas uma página em branco devido ao atributo de estilo inline fornecido ao bodyelemento.
Inline CSS e JavaScript
Você também pode incluir regras de estilo CSS dentro de <style>tags e scripts JS dentro de <script> tags diretamente em seus documentos HTML. Isso melhora a velocidade da página porque o navegador não precisa solicitar e baixar recursos externos para renderizar a página da web. No entanto, isso só é bom para pequenas quantidades de CSS e JS. Caso contrário, o documento HTML aumentará no tamanho do arquivo e seu JS e CSS não se beneficiarão do cache do navegador.
Durante anos, fomos desencorajados a incorporar nosso CSS e JS porque dificultava a modularização, dimensionamento e manutenção de nossos projetos. No entanto, agora existem muitas ferramentas de compilação que podem lidar com esses problemas. Agora é recomendado que você inline CSS e JS que são essenciais para renderizar seu conteúdo acima da dobra para melhorar o desempenho percebido da página. Abaixo está um script que inline as regras de estilo de uma folha de estilo externa.
Isso é baseado em um exemplo encontrado nos documentos do PageSpeed Insights. O problema com esse método de inserir regras de estilo CSS é que suas regras de estilo não serão renderizadas se o usuário tiver o JavaScript desabilitado.
