O documento fornece dicas para desenvolver websites de alta performance, como diminuir requisições HTTP, compactar arquivos com CSS sprite e gzip, colocar scripts e CSS externos no início e fim do código HTML, e minimizar scripts para acelerar tempos de carregamento.

1. DESENVOLVIMENTO DE WEBSITES
DE ALTA PERFORMANCE

2. RAPHAEL AGNELI
TECNÓLOGO EM SISTEMAS PARA INTERNET

3. 10 – 20%
BACK-END
80 – 90%
FRONT-END

5. DIMINUA A QUANTIDADE
DE REQUISIÇÕES
HTTP

6. CSS
SPRITE

9. #guarda-chuva {
Width: 16px;
Height: 16px;
Background-image: url(“../images/imagem.png”);
Background-position: -48px -16px;
Background-repeat: no-repeat;
}

10. SCRIPTS E CSS
COMBINADOS

11. DIMINUA O PESO DE SUAS
IMAGENS

12. ADOBE PHOTOSHOP
CTRL+SHIFT+ALT+S

13. GTMETRIX.COM

14. USE UMA REDE
DE DISTRIBUIÇÃO DE
CONTEÚDO

15. WHY?

16. ADICIONE UM
CABEÇALHO
EXPIRES

17. <filesMatch ".( ico | jpg | jpeg | png | gif | swf | css | js )$">
Header set Expires "Sun, 30 Apr 2090 20:00:00 GMT"
</filesMatch>

18. VANTAGENS E
DESVANTAGENS

19. COMPACTE SUAS
RESPOSTAS HTTP COM
G-ZIP

20. COMO
FUNCIONA ?

21. REQUISIÇÃO HTTP NORMAL

22. REQUISIÇÃO HTTP COM GZIP

23. O QUE
COMPACTAR ?

24. IIS APACHE
CONFIGURANDO

25. RESULTADO DA COMPACTAÇÃO
Exemplo Componentes
(HTML, CSS, JS)
Ganho em
tamanho
Tempo de
resposta
Ganho de
tempo
Sem compactação 177.6K - 1562ms -
Compactado com GZIP 46.4K 130.2K (73.8%) 731ms 831ms (53.2%)

26. COLOQUE
AS CSS
NO COMEÇO

27. VISUALIZAÇÃO
PROGRESSIVA

28. TELA BRANCA
VAZIA

29. COLOQUE
OS SCRIPTS
NO FINAL

30. PROBLEMAS COM
SCRIPTS

31. HTML
SCRIPT
CSS
IMG
IMG
IMG
SCRIPT NO INÍCIO
↑
PÁGINA CARREGADA

32. HTML
CSS
IMG
IMG
IMG
SCRIPT
SCRIPT NO FINAL
↑
PÁGINA CARREGADA

33. MANTENHA SCRIPTS E CSS
EM ARQUIVOS EXTERNOS
-PARADOXO-

34. MINIMIZE OS
SCRIPTS

35. MINIMIZAÇÃO VS
OFUSCAMENTO

36. Tamanho do Script Normal Minimizado Ofuscado
Pequeno (50K) 581ms 481ms (17%) 471ms (19%)
Grande (377K) 1092ms 761ms (30%) 751ms (31%)
TEMPO DE CARREGAMENTO

37. REMOVA SCRIPTS
DUPLICADOS

38. POR QUE?

39. DÚVIDAS?

40. OBRIGADO!
raphael_agneli@hotmail.com