Todos os dias, são feitas milhões de pesquisas em ferramentas de busca como Google ou Bing. Geralmente, quando procuramos algum produto ou serviço, tendemos a clicar nos primeiros links. Mas, você já se questionou por que alguns sites estão em primeiras posições (isto é, de forma orgânica). Além do SEO, isso acontece devido às aplicações web. 

Aplicações são rastreáveis por meio dos motores de busca. Existe um rankeamento natural feito por robôs, também conhecido por spiders.  A todo momento, eles rastreiam e indexam as páginas em uma base de dados. 

Uma aplicação Web, independente do framework utilizado sempre carregará arquivos:  

• HTML (Esqueleto da página)  
• CSS (Estilização)  
• JS (Comportamento)  

A grande questão é qual a velocidade com que esses arquivos são carregados e como a aplicação é exibida para o usuário. Isso conta bastante na hora do rankeamento pois, quanto mais rápido e coerente é um site, melhor posicionado no mecanismo de busca ele será. Páginas web geralmente contêm um grande número de imagens, o que contribui para o uso de dados, determinante para o quão rápido uma página pode ser carregada. 

 

Técnicas de otimização 

CLS 

CLS pode ser traduzido como deslocamento repentino no layout de uma página web. É responsável por medir a instabilidade do conteúdo e o seu deslocamento.  

 

Carregamento de Imagens 

Páginas web geralmente contêm um grande número de imagens, o que contribui para o uso de dados, determinante para o quão rápido uma página pode ser carregada. Utilizamos a tag srcset, para determinar qual imagem aparece em cada resolução. (colocar a imagem). 

 

Rede de fornecimento / CDN 

O objetivo principal de uma CDN é entregar conteúdo a partir do servidor mais próximo do usuário final. Assim, o tempo de resposta da requisição será menor.  

Para explicar melhor aos consultores sobre esse assunto, organizamos um workshop gratuito “Melhorando a performance e acessibilidade de aplicações web”, na sede da ModalGR, seguindo todos os protocolos sanitários devido à pandemia da COVID-19. Para quem não pôde comparecer, reservamos uma sala o Teams. O Desenvolvedor Front-end Jr Victor Henrique Azevedo ministrou o workshop. Quem quiser saber mais sobre o tema, clique aqui e acesse o material completo. 

 

Compressão Gzip 

Consiste em códigos do site (HTML, CSS e Javascript) que são armazenados no servidor. Por exemplo, sem a compressão Gzip, um conteúdo em HTML possui 5.15 KB de tamanho. Com a compressão Gzip, ele passa a ser 2.01 KB. 

 

Novo formato para imagens 

Com a relevância da performance nas aplicações Web, o Google desenvolveu um novo formato otimizado para imagens, com a extensão *.webp. Seu intuito é utilizar algoritmos mais agressivos de compressão e otimização do que imagens *.jpg e *.png, sendo até 30% mais leve. 

Uma aplicação web com muitas imagens pode levar muito tempo para carregar, além de gerar muitas requisições ao servidor hospedeiro. Usar Sprite de Imagens irá reduzir o número de requisições e proporcionará economia de dados. 

 

Otimização Above the Fold 

É a primeira sessão que o usuário vai visualizar. E por isso que ela precisa estimular muito a navegação e o principal ser carregada o mais rápido possível. 

Uma estratégia muito utilizada é deixar a folha de estilos inline. Para renderização mais rápida possível (sem aguardar a requisição do *.css para montar o layout). Essa técnica é conhecida como CSS Crítico. 

 

Remova CSS não utilizado 

Quando projetamos uma aplicação tendo em mente um grande grupo de usuários que precisam de recursos diferentes, costumamos escrever todos os códigos de estilo em um único arquivo CSS. 

• Escreva uma folha de estilo para cada página 
• Embutir estilos em componentes 
• Utilizar ferramentas que analisam o HTML e removem as classes não utilizadas. 

Workshop

Para explicar melhor aos consultores sobre esse assunto, organizamos um workshop gratuito “Melhorando a performance e acessibilidade de aplicações web”, na sede da ModalGR, seguindo todos os protocolos sanitários devido à pandemia da COVID-19. Para quem não pôde comparecer, reservamos uma sala o Teams.

O Desenvolvedor Front-end Jr Victor Henrique Azevedo ministrou o workshop. Quem quiser saber mais sobre o tema, clique aqui e acesse o material completo.