Performance na web, além do framework
Upcoming SlideShare
Loading in...5
×
 

Performance na web, além do framework

on

  • 291 views

Palestra sobre práticas de desenvolvimento web, com foco em performance para o front-end web, apresentada no Tá Safo em Ação, encontro da comunidade Tá Safo, em Belém do Pará, no dia ...

Palestra sobre práticas de desenvolvimento web, com foco em performance para o front-end web, apresentada no Tá Safo em Ação, encontro da comunidade Tá Safo, em Belém do Pará, no dia 22/11/2013.

Statistics

Views

Total Views
291
Views on SlideShare
267
Embed Views
24

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 24

http://palestrascoletivas.com 24

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Performance na web, além do framework Performance na web, além do framework Presentation Transcript

  • Performance na web, além do framework Tá Safo em Ação! 22/11/2013 Belém – Pará – Brasil
  • Alexandre Cardoso (@accbel) ● Analista de desempenho – InMetrics - SP ● Desenvolvendo software há 13 anos ● Java, Scala, Ruby, Web, Arquitetura, Performance ● TáSafoConf 2012 ● Editor do Scalando.com.br
  • Desenvolvimento para a Web
  • O que (normalmente) está nas preocupações do desenvolvedor web?
  • Linguagem? Framework? SQL? NoSQL? Front-end? UX? SEO? Automated tests? Mobile? Social? Responsive design?
  • Por quê precisamos nos preocupar com isso?
  • “Queremos implementar projetos e produtos de sucesso” “Queremos aproveitar oportunidades profissionais e de mercado” “Queremos ganhar $$$”
  • Fatores técnicos e não-técnicos Isolados ou combinados Determinam o sucesso ou fracasso
  • Um dos mais importantes é: Experiência de Usuário (UX)
  • Experiência de Usuário - UX “Define como pessoas se sentem quando interagem com um sistema (…), incluindo emoções, crenças, preferências, percepções, reações físicas e psicológicas, comportamentos e realizações do usuário que ocorrem antes, durante e após o uso.”' Fonte: http://www.touchpoints.com.br/experiencia-do-usuario
  • “Percepção” “Reação” “Realização”
  • Usuários tendo a melhor percepção de seu site Usuários realizados ao buscar e acessar seu site Usuário reagem com satisfação aos serviços do site
  • “(...) mas ele só carrega rapidamente na internet de 1Gbps do escritório”
  • UX é super importante, assim como outros fatores, mas... “Sites lentos não vivem pra contar histórias”
  • Performance importa pra quem? “33% of broadband shoppers are unwilling to wait more than four seconds for a web page to load, whereas 43% of narrowband users will not wait more than six seconds (Akamai, 2006)” “every 100 ms increase in load time of Amazon.com decreased sales by 1%” Fonte: http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
  • Entretanto... “Brasil está em 72º lugar no ranking de velocidade média de internet” Fonte:http://www.tecmundo.com.br/internet/42327-brasil-esta-em-72-lugar-no-ranking-de-velocidade-media-de-internet.htm
  • Desenvolvimento web para a realidade brasileira, cada vez mais móvel, conciliando inovação, UX e performance, é um grande desafio. O 3G brasileiro é uma “piada” e, mesmo assim, milhões de pessoas vão fechar negócios pelo celular
  • O que você, desenvolvedor web, pode fazer a respeito?
  • Você é livre para fazer escolhas que suportem seu projeto...
  • Para todas elas, hoje e por muito tempo (ainda), o mesmo produto final O front-end
  • Pensar o front-end desde o início, voltado para performance, em 3 pilares Design Código Requisições
  • Design e performance ● Cuidado com imagens (quantidade e tamanho) 650 KB (?!)
  • Design e performance ● Definir imagens de tamanhos distintos e serví-las quando necessário, evitando redimensionamento no navegador. 150x150 71x71 30x30 <img alt="A_picture" src="/images/picture_150_150.jpg"> <img alt="A_picture" src="/images/picture_71_71.jpg"> <img alt="A_picture" src="/images/picture_30_30.jpg"> TIP: Evitar download de uma imagem pesada, onde ela não é necessária
  • Design e performance ● Definir e aplicar a taxa de compressão adequada, sem perda excessiva de qualidade Arquivo original (PNG): 43KB JPEG – Compressão 100% - 24KB JPEG – Compressão 80% - 14KB TIP: Largura de banda é um recurso escasso e não-controlado. Otimizar, sempre que possível.
  • Código e performance ● Evite código inline/embarcado no seu HTML. ● Difícil de manter ● Aumenta o tamanho (KB) do HTML ● Não pode ser “cacheado”
  • Código e performance ● Use referências externas para os assets do HTML. ● Fácil de manter ● HTML menor (KB) e mais enxuto ● Candidato ao cache do navegador
  • Código e performance ● Não custa lembrar: CSS no topo e JS no final! ● CSS links bloqueiam a renderização até o fim do download. Antecipe. ● Tags <script> bloqueiam downloads de outros recursos, como imagens. Deixe por último.
  • Código e performance ● ● ● Javascript? Uma caixinha de surpresas. Saiba o que está fazendo. Várias maneiras de percorrer um array Diferenças absurdas de performance ● Fazer cache evita recálculos durante a execução ● jQuery facilita muito, mas tem seu preço
  • Requests e performance ● Fazer download de white spaces e tabulações? “Minifique!” ● 372 bytes > 284 bytes (- 24%) ● Como? HTML Compressor
  • Requests e performance ● O mesmo também vale para CSS. Comprimir para otimizar. Mesmo efeito e 40% menor. Como? ● Yahoo YUI Compressor ● SAAS “:compressed” ● CSSO
  • Requests e performance ● Javascript, você é o próximo. #minify #compression Como? ● Google Closure Compiler ● Yahoo YUI Compressor ● UglifyJS Mesmo efeito e 49% menor.
  • Requests e performance ● Várias requisições para exibir apenas uma página? Agrupar recursos estáticos (CSS e Javascript), para servir de uma vez só. Download mais eficiente, página renderizada mais rapidamente Como? ● GruntJS + Plugins ● Wro4J
  • Requests e performance ● Layout com muitas imagens (ícones, etc)? Utilize CSS Sprites Como? ● SmartSprites ● Compass Spriting .icon-edit { background-image: url("../img/glyphicons-halflings-white.png"); background-position: -96px -72px; }
  • Requests e performance ● Se algo não muda, pegue uma vez e guarde (até mudar). Utilize o cache do navegador. server { listen 80; server_name www.mysite.com.br; root /path/to/site; ... location ~* .(?:ico|css|js|gif|jpe?g|png)$ { expires 30d; expires max; add_header Cache-Control public; } .... Atenção! Não esqueça de “assinar” as URL's dos assets, para ter controle sobre a renovação do cache ● /assets/main.js?v123 1ª visita ao site ● <script src=”/assets/main.js?v123”> → Requisita o arquivo ao servidor – 200 (OK) 2ª visita ao site ● <script src=”/assets/main.js?v123”> → Utiliza a cópia armazenada no cache local
  • Requests e performance ● Otimize ainda mais o tamanho da resposta. Ative a compressão HTTP http { ... # enable gzip compression gzip on; gzip_min_length 1100; gzip_buffers 4 32k; gzip_types text/html application/x-javascript text/css; gzip_vary on; # end gzip configuration ... } $ curl --header "Accept-Encoding: gzip,deflate,sdch" -I http://www.mysite.com HTTP/1.1 200 OK Server: nginx ... Content-Encoding: gzip
  • Legal. Já entendi que otimizar é muito importante, mas... Como saber se meu site precisa ser otimizado e onde?
  • Monitorar é preciso!
  • Google Page Speed Insights ● Antigo “Google Page Speed” ● Analisa e define um score de uma página web para seu desempenho ● Sugere um conjunto de melhorias para diversas áreas do front-end de uma página web ● Oferece uma API para análise remota. Ideal para integrar ao seu ambiente de CI (Jenkins, etc)
  • Yahoo! YSlow ● Mesmo princípio e objetivo do Google Page Speed Insights ● Possui extensões/plugins para os principais navegadores ● Permite executar uma análise via linha de comando (requer NodeJS/NPM)
  • O assunto é amplo! Referências sobre front-end performance ● Improving UX Through Front-End Performance ● Front-end performance for web designers and front-end developers ● How to lose WEIGHT (in the browser) ● Web Performance Best Practices ● Web Assets – Tips for Better Organization and Performance ● Google :)
  • Linguagem, frameworks, bancos, tecnologias em geral: Suas escolhas. Performance: O produto a ser entregue!
  • Obrigado!