Como se tornar um viciado em performance em 5 passos

É muito importante focarmos na performance do seu site, para isso apresento 5 passos do que pode ser feito para melhorar a performance da sua aplicação web, deixando você e seu usuário mais felizes

Transcript

1. Como se tornar um
   viciado em performance
   em 5 passos
   Pedro Chaves - 3º PHPMG Talks
   

   View Slide

2. Ninguém elogia um site
   rápido, mas todos reclamam
   de um site lento.
   O primeiro motivo
   

   View Slide

3. Tempo de atraso Reação do usuário
   0 - 100ms Instantânea
   100 - 300ms Atraso perceptível
   300 - 1000ms Computador trabalhando...
   1s+ Começa a perder o foco
   10s+ Eu volto depois...
   

   View Slide

4. 100ms por
   página
   1% de
   receita
   

   View Slide

5. Tempo de
   disparo de
   onLoad
   15% tempo de
   permanência
   

   View Slide

6. Seu site nunca será
   rápido o suficiente
   sozinho.
   O quarto motivo
   

   View Slide

7. Melhorar a
   performance é uma via
   de mão dupla.
   O quinto motivo
   

   View Slide

8. Onde você busca seus
   dados?
   #1
   

   View Slide

9. O MySQL é o lugar mais
   lento para buscar seus
   dados.
   

   View Slide

10. Seus novos melhores
    amigos
    Que tal salvar os dados em lugares alternativos?
    

    View Slide

11. Seus novos melhores
    amigos
    Redis salva em memória RAM ou em disco
    

    View Slide

12. Se dados não mudam
    toda hora, não precisa
    buscá-los toda hora
    

    View Slide

13. Crontab é seu melhor amigo!
    Rotina toda
    madrugada
    Salva um arquivo
    JSON no disco e um
    registro no
    Memcached
    Site busca do
    Memcached
    Se não existe busca
    do arquivo
    

    View Slide

14. Seus novos melhores
    amigos
    Memcached + arquivo em disco gerado por rotina
    

    View Slide

15. Como sua aplicação
    processa os dados?
    #2
    

    View Slide

16. A qualidade do seu código
    interfere na velocidade da
    sua aplicação.
    

    View Slide

17. The KISS principle
    Nem sempre o código mais
    bonito é o mais rápido ou
    eficiente.
    

    View Slide

18. The KISS principle
    

    View Slide

19. KEEP
    IT
    SIMPLE
    STUPID
    

    View Slide

20. Dicas rápidas - Habilite APC
    APC - Alternative
    PHP Cache
    

    View Slide

21. Dicas rápidas - Habilite APC
    __autoload não!
    (confirmado pelo próprio Rasmus)
    

    View Slide

22. Dicas rápidas - Passe parâmetros por referência
    

    View Slide

23. Dicas rápidas - Utilize funções nativas
    

    View Slide

24. Dicas rápidas - Junte técnicas
    

    View Slide

25. The KISS principle
    As vezes é necessário abrir
    mão de conceitos de
    engenharia de software em
    troca de performance.
    

    View Slide

26. Dicas rápidas de performance
    SELECT COUNT(*), a.nome AS nome_artista
    FROM artistas AS a
    INNER JOIN musicas AS m ON m.id_artista = a.id
    WHERE m.id_artista = ?
    GROUP BY m.id_artista
    

    View Slide

27. Dicas rápidas de performance
    SELECT nome, num_musicas
    FROM artistas
    WHERE id_artista = ?
    

    View Slide

28. Quando sua aplicação
    processa os dados?
    #3
    

    View Slide

29. Você realmente precisa
    executar seu código toda
    hora?
    

    View Slide

30. Checkpoint #3
    Que tal colocar uma camada de
    cache no retorno de todas as
    requisições?
    

    View Slide

31. Varnish, seu melhor amigo
    

    View Slide

32. Protocolo HTTP to the rescue!
    O protocolo HTTP está aí para ser
    utilizado da maneira correta!
    Porque nosso navegador também faz
    cache por nós :D
    

    View Slide

33. O servidor só envia o conteúdo da página
    se If-Modified-Since não for enviado ou
    for menor do que Last-Modified.
    304 Not Modified
    Last-Modified + If-
    Modified-Since
    

    View Slide

34. Não busca a página no servidor se o
    tempo do cache não tiver expirado
    Expires
    Expires: Sun, 17-Jan-2038 19:14:07 GMT
    

    View Slide

35. "Versão" daquela requisição.
    Pode conter qualquer conteúdo,
    escolhido por você.
    ETag + If-None-Match
    ETag: JSV1
    

    View Slide

36. Quanto menos
    melhor!
    #4
    

    View Slide

37. A requisição mais
    rápida é aquela que
    não existe.
    

    View Slide

38. View Slide

39. View Slide

40. Checklist
    ● Só um arquivo CSS ✓
    

    View Slide

41. A primeira impressão
    é a que fica.
    

    View Slide

42. View Slide

43. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    

    View Slide

44. View Slide

45. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    

    View Slide

46. Minificar JavaScript e
    CSS!
    Google Closure
    Compiler
    YUI Compressor
    UglifyJS CSSMin
    

    View Slide

47. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    ● Minificar JS / CSS ✓
    

    View Slide

48. Dois JavaScript não
    carregam juntos. A não
    ser que você queira...
    $LAB.js head.js
    RequireJS YepNope
    

    View Slide

49. View Slide

50. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    ● Minificar JS / CSS ✓
    ● JavaScript assíncrono ✓
    

    View Slide

51. Cookies são inúteis
    para arquivos
    estáticos.
    

    View Slide

52. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    ● Minificar JS / CSS ✓
    ● JavaScript assíncrono ✓
    ● Content Delivery Network ✓
    

    View Slide

53. gzip!
    até 80% do tamanho da requisição :D
    

    View Slide

54. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    ● Minificar JS / CSS ✓
    ● JavaScript assíncrono ✓
    ● Content Delivery Network ✓
    ● gzip ✓
    

    View Slide

55. Otimize TODAS as
    imagens!
    jpegoptim faz isso por você ;)
    

    View Slide

56. base64 === -1 hit
    

    View Slide

57. View Slide

58. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    ● Minificar JS / CSS ✓
    ● JavaScript assíncrono ✓
    ● Content Delivery Network ✓
    ● gzip ✓
    ● Imagens otimizadas ✓
    

    View Slide

59. View Slide

60. Checklist
    ● Só um arquivo CSS ✓
    ● JavaScript no rodapé ✓
    ● Poucos arquivos JavaScript ✓
    ● Minificar JS / CSS ✓
    ● JavaScript assíncrono ✓
    ● Content Delivery Network ✓
    ● gzip ✓
    ● Imagens otimizadas ✓
    ● CSS Sprites ✓
    

    View Slide

61. Dicas finais
    #5
    

    View Slide

62. "Existem duas coisas
    difíceis em TI: dar nome às
    coisas e invalidar cache"
    Alguém muito sábio
    

    View Slide

63. Cache incremental
    vs.
    Refazer todo o cache
    vs.
    Excluir o cache
    

    View Slide

64. PHP não possui um
    paradigma só. Se aproveite
    disso.
    

    View Slide

65. Teste sua performance!
    PageSpeed e YSlow podem
    te ajudar.
    

    View Slide

66. Obrigado!
    

    View Slide