marcel0llEN | PT

Velocidade de carregamento de página

15/12/2020

Introdução

A velocidade com que as páginas web carregam influenciam drasticamente a vida atual. Estamos tão acostumados com a velocidade e conectividade das coisas que se uma página demora para carregar, nossa tendência é mudar de página.

Com isso, é papel do desenvolvedor web estar atento a performance de sua página e não "só" ao conteúdo relevante, interfaces bonitas e experiência do usuário.

Nesse artigo irei usar o termo tempo de carregamento da página de uma forma generalizada, mesclando um pouco o tempo de fato de carregar as referências de uma página com o processamento desses arquivos até que possamos ver e utilizar esta página. Para isso, temos que dar um passo atrás e dissecar o que está acontecendo em nosso navegador, computador e conexão com outros computadores pela internet.

O que acontece ao abrir uma página web

A internet é chamada de teia (web) pela interconectividade que promove.

Cada arquivo HTML de uma página pode fazer referência a infinitos outros arquivos armazenados publicamente em algum computador pelo mundo.

Toda vez que você abre uma página web, você recebe o primeiro arquivo html, normalmente nomeado índice (index.html). A partir do índice você carregará diversos outros arquivos que farão sua página funcionar.

Os principais recursos que são utilizados em uma página web são:

  • Arquivos html, com conteúdo
  • Arquivos css, com estilizações
  • Arquivos js, com funcionalidades complementares às nativas ao html
  • Arquivos bmp, png, jpg, gif, webp, com imagens rasterizadas
  • Arquivos svg, com imagens vetoriais
  • Arquivos ttf, otf, woff, woff2, com fontes para textos
  • Arquivos mp4, webm, ogg, com vídeos

Devido a forma como o browser e o protocolo HTTP funcionam a cada arquivo que sua página faz referência, uma nova requisição é feita a um servidor.

Carregando uma simples página

Vamos analisar o seguinte arquivo index.html:

<!DOCTYPE html>
<html lang="pt">
  <head>
    <title>Exemplo</title>
    <link rel="stylesheet" href="/estilos.css" />
  </head>
  <body>
    <img src="/logo.bmp" alt="logo" />
    <h1>Página exemplar</h1>

    <script src="/lib.min.js"></script>
    <script src="/index.js"></script>
  </body>
</html>

Nessa página simples são necessários no mínimo 5 requisições HTTP:

  1. /index.html
  2. /estilos.css
  3. /logo.bmp
  4. /lib.min.js
  5. /index.js

Escondido nesses arquivos podem existir ainda outras referências, como outras imagens, outros arquivos de css e arquivos de fontes.

weights

Contribuintes ao tempo de carregamento da página

Tudo que adiciona trabalho aumenta o tempo de carregamento da página!

Cada nova referência à um arquivo adiciona custos ao tempo de carregamento da página, pois para cada arquivo adicionamos os seguintes valores ao tempo:

  • abrir requisições HTTP à um servidor (depende da versão do protocolo)
  • tempo de transferência de pacotes com servidor (depende do RTT ao servidor)
  • número de pacotes (depende do tamanho do arquivo)
  • interpretar esse arquivo (depende do tipo de arquivo e ecoding)
  • "executar" esse arquivo (executar o javascript, renderizar o css)
  • E dependendo do conteúdo deste arquivo, fazer novas requisições HTTP

Ou seja, o que afeta o tempo de carregamento da página é:

  • Número de requisições HTTP a servidores
  • Tempo de processamento da requisição no servidor HTTP
  • Distância entre computador do navegador e servidor HTTP
  • Tamanho dos arquivos transferidos
  • Tempo de interpretação dos arquivos
  • Tempo de execução de scripts
  • Tempo de renderização estilos

Reduzindo a carga

Para otimizarmos o tempo de carrregamento da página é simples: faça seu navegador trabalhar menos.

Para reduzirmos a carga existem diversos detalhes que precisamos prestar atenção. Conforme as tecnologias evoluem, também evoluem o que é preciso prestar atenção na hora de otimizar uma página, como por exemplo:

  • Caminho de renderização crítico (critical rendering path)
  • Minificação de código (code minifying)
  • Compressão de arquivos (file compression)
  • Fusão de arquivos (bundling)
  • Redes de distribuição de conteúdo (CDNs)
  • Carregamento preguiçoso (lazy loading)
  • Ordem das tags script e style
  • Controle do número de dependências
  • ...

Em próximos textos irei analisar mais a fundo os tópicos acima.

Lembre de me acompanhar no twitter: @marcel0ll

O que devo fazer?

Em minha experiência o básico que muitos sites ainda não fazem e que também e que irá trazer os maiores retornos são:

1. Otimize suas imagens:

As imagens tiradas com as câmeras fotográficas ou mesmo a de nossos celulares tem resoluções MUITO maiores do que a maioria dos sites irá exibir.

Então antes de enviar para seu servidor lembre de reduzir a resolução da imagem para o tamanho que será exibido no seu site. E lembre que diferentes formatos oferecem diferentes experiêncas, mas de maneira geral .webp é o formato mais indicado hoje em dia com uma segunda opção em .jpeg ou .png caso o navegador não suporte .webp.

2. Comprima seus arquivos

Os navegadores são capazes de abrir arquivos comprimidos e apresentâ-los normalmente para isso você precisa que seu servidor esteja configurado para comprimir seus arquivos na hora que forem requisitados ou você pode previamente comprimi-los e deixá-los esperando sua requisição.

Os dois algoritmos de compressão mais relevantes hoje em dia são gzip e brotli que produzem respectivamente arquivos .gz e .br.

3. Minifique seus arquivos

Enquanto estamos programando, escrevemos código para que humanos leiam esse código e este carrega diversos detalhes que a máquina não se importa. Nunca vi um computador reclamar do caracter que uso para identação.

Quando você vai enviar seus arquivos para o navegador, não mande comentários, espaços, enters ou qualquer outro carácter "estético". Mande somente o necessário.

Para fazer isso existem softwares específicos que minificam o código com a maior eficiência possível: uglifyjs, cssnano, html-minifier...

4. Automatize esse processo

Você irá esquecer! Isso é uma constante na vida, você irá esquecer das coisas! Então anote as coisas, coloque mementos pela casa e automatize seus processos!

Para isso a web já utilizou de diversos recursos:

  • Executores de tarefas, como grunt e gulp (task runners)
  • Scripts
  • Empacotadores, como webpack e parcel (bundlers)

Hoje em dia maioria dos projetos tende utilizar uma combinação de scripts com empacotadores.

Conclusão

Quer sua página carregando mais rápido? Reduza os excessos!

  • Otimize imagens
  • Minifique código
  • Comprima seus arquivos
  • Não envie mais bytes do que você precisa!

Menos trabalho é mais velocidade.

Espero que tenha gostado, continue programando!

marcel0ll


Referências e links interessantes:


Tem dúvida? Quer só bater um papo? Me mande um e-mail: marcelo@lotuz.dev