Algumas recomendações pontuais sobre como fazer sites carregarem mais rapidamente, voltando para o público de desenvolvedores frontend. As técnicas selecionadas são as mesmas eleitas pelo site WebPageTest.org, permitindo um ciclo de ajustes e mensuração dos resultados de performance.

1. Para ontem:
carregando sites mais
rapidamente
por Thiago Ayub
twitter.com/ayubio

2. Por quê? Para que
tanta pressa?

3. Fonte: https://content.akamai.com/PG1526-PerformanceMatters.html

4. Fonte: https://content.akamai.com/PG1526-PerformanceMatters.html

5. Fonte: Aberdeen.com

6. O tempo de
carregamento das
páginas de seu site
impacta diretamente no
faturamento de sua
empresa
$

7. Precisamos para
ontem fazer nosso
site carregar mais
rapidamente

8. http://WebPageTest.org

13. Principais critérios para pontuação
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN

14. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN
1. Utilizar uma CDN brasileira.
2. Utilizar cache no servidor da
renderização das páginas.
3. Utilizar servidores de DNS
autoritativos brasileiros.
4. Aumentar o TTL das entradas
DNS.

15. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN
1. Ative esta configuração em seu
Apache, nginx etc.
2. Importe para seu servidor web
elementos de terceiros.

16. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN
1. Ative esta configuração em seu
Apache, nginx etc. (gzip)
2. Sirva conteúdos já comprimidos:
/index.html.gz, /results.json.gz,
/button.svg.gz
“Compressão com pressão”

17. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN

19. Resultados do “Content Breakdown” de www.r7.com

20. Como melhorar as imagens?
● JPEG Progressive
● PNG para layout
● SVG para layout
● Adoção de WebP

21. Como melhorar as imagens?
● JPEG Progressive
● PNG para layout
● SVG para layout
● Adoção de WebP
Fonte dos exemplos: https://blog.codinghorror.com/progressive-image-rendering/
Baseline Progressive

22. Como melhorar as imagens?
● JPEG Progressive
● PNG para layout
● SVG para layout
● Adoção de WebP
jpegtran -copy none -optimize original.jpg otimizada1.jpg
jpegtran -copy none -progressive otimizada1.jpg otimizada-final.jpg

23. Como melhorar as imagens?
● JPEG Progressive
● PNG para layout
● SVG para layout
● Adoção de WebP
1. Não utilize JPG para elementos
de layout. Prefira PNG e SVG.
2. Utilize o pngcrush em todos os
seus PNGs.
3. Utilize o SVGO para arquivos
SVG.

25. 283 kB
no PNG original

26. 283 kB
no PNG original
173 kB (-39%)
após pngcrush -brute -reduce

27. Como melhorar as imagens?
● JPEG Progressive
● PNG para layout
● SVG para layout
● Adoção de WebP
1. Converter todas as imagens JPG
e PNG para também WebP.
2. Servir WebP se o browser
suportar.
3. Não é difícil conseguir imagens
80% menores em bytes com
WebP.

28. canIuse.com
Recomendado: https://www.keycdn.com/blog/convert-to-webp-the-successor-of-jpeg/

30. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN

33. Cabeçalhos HTTP para gestão de cache
● Expires: define uma data futura e exata para expirar o conteúdo.
● Cache-Control: define um tempo em segundos para expirar o conteúdo.
● ETag: um fingerprint de validação da versão do conteúdo.
● Last-Modified: declara a data e hora da versão servida.
A presença do ETag e Last-Modified modificam muito o ciclo de comunicação
entre o servidor HTTP e o browser.

34. HTTP
200
HTTP
304
!=

35. Para conteúdos
que mudam
muito
Sirva os cabeçalhos:
● Cache-Control
● ETag
● Expires
● Last-Modified
Para conteúdos
que mudam
pouco
Sirva os cabeçalhos:
● Cache-Control
● ETag
● Expires
● Last-Modified

36. Cache-Control: max-age=3600
● O browser armazenará em cache esse objeto por 1h.
● Recomendo o valor de 7776000 (90 dias).
● Mudou o conteúdo? Mude a URI!

37. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN
● Contrate e implemente uma CDN
com forte presença no Brasil
para servir JS, CSS, imagens e
qualquer outro binário.
● Após se acostumar com uma
CDN, entregue também seu
HTML.
● Utilize o maior valor de
Cache-Control possível em
todos os objetos.

39. Como melhorar cada um?
● Time to First Byte (TTFB)
● Keep-alive enabled
● Compress transfers
● Compress images
● Cache static content
● Effective use of CDN
Melhorando todos estes itens,
teremos um site que carrega
imediatamente, explodindo na
tela, reduzindo o consumo de
servidores e aumentando o
faturamento e a popularidade de
seu negócio.

40. Obrigado!
Twitter: @ayubio
YouTube: “Eu faço a internet funcionar”