Dafiti Tech Conference – 2014

Tive o prazer de palestrar na Dafiti Tech conference de 2014 e falar um pouco sobre as ações que foram realizadas para reduzir o pageload do site da dafiti ao longo desses 3 anos derrubando de 9 segundos para uma média de 4.
Abaixo ai os slides utilizados para a apresentação que espero ter agradado a maioria do público.

Front end performance – dos 9 aos 4 segundos – Dafiti Tech Conference from André TagliatiFRONT-END PERFORMANCE
DE 9 A 4 SEGUNDOSAndré Tagliati Mineiro criado no ES perdido em São Paulo
PHP,Ruby,JS e mais…
Aquele que vos fala…

red panda

Breve explicação de cada um e sua carreira. André Tagliati. Nascido em minas, criado em vila velha – es e perdido em são paulo. começou brincando com scripts de irc(sim. irc. não sou tão novo quanto aparento), passando por programação em lua ( mas foi só pra jogos mesmo…) e teve uma temporada em uma faculdade de desenho industrial(quase virei designer). No fim se viu programando no meio de um monte de gente grande principalmente com ecommerce. Ainda tenta encontrar seu lugar no meio de tanta gente.

Business Calendar & Schedule

O que temos pra hoje?
Chegando ao Front Problemas Soluções Futuro
O que tem pra hoje?

TIME IS MONEY

Time is Money

Tempo é dinheiro. Essa é uma das máximas que usamos em nosso dia a dia para justificar nossa pressa ou pra fugir daquela pessoa inconveniente que insiste em chamar pra tomar uma cervejinha e ainda não entendeu que você não quer papo com ela. O ponto é que com dispositivos móveis e melhorias, mesmo que precárias, na velocidade das conexões estamos exigindo cada vez mais velocidade nas entregas. Nos idos de 2006 After a bit of looking, Marissa Mayer ( na epoca google ) explained that they found an uncontrolled variable. The page with 10 results took .4 seconds to generate. The page with 30 results took .9 seconds.

Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction.

This conclusion may be surprising — people notice a half second delay? — but we had a similar experience at Amazon.com. In A/B tests, we tried delaying the page in increments of 100 milliseconds and found that even very small delays would result in substantial and costly drops in revenue.

De frente com o front…

Head to head

Essa poderia ser uma triste história. Quantos aqui são desenvolvedores especializados em fronte end? Quantos aqui não fazem piada com a função do frontend?

O primeiro vilão…

Snail

Javascript, live vs on. Quando disparar eventos? IE8 jogando a média pra baixo… ganhamos 2 segundos nos IEs e 500ms na media geral. Vamos dizer que o IE8 não é lá um grande amigo

PAGE LOAD
Page load time response com cache e sem cache. Nesse caso as versões comparadas são da mesma época do firefox. Muita coisa melhorou pra esses rapazes.

Javascript benchmark
As versões apresentadas são de browsers antigos que seriam os comparativos para o período do IE8. Só pra se ter uma ideia no teste do sunspider chrome e firefox atingem a marca de 280ms

CSS & DOM Performance

Chega disso…

http://www.flickr.com/photos/10442345@N07/4286807594/

Precisa disso tudo?

Tools IMG_0171

Você realmente precisa carregar o jquery ui  ou existem alternativas? Em análise chegamos a conclusão que o jquery era algo completamente dispensável pois era utilizado em apenas 2 pontos ( modais e slider ). Nesse meio tempo já tinhamos uma solução de modal menor e mais simples e o slider pode facilmente ser substituido por uma opção leve. De 280kb~ substituimos por um total de 7kb;

Pixels Imagens Html
Só o necessário…

The wheelbarrows of the street vendors...

Pixels são “imagens” que são carregadas pra ativar ações com parceiros. Um pixel fora do lugar pode travar o carregamento dos demais os elementos e num ecommerce a quantidade varia e a administração desses elementos não é feita por desenvolvedores diretamente. Então como resolver? Pra esse caso o google tag manager cai com uma luva. Todos os pixels são enviados pra lá e nosso amado google faz o trabalho de ativá-los de forma assincrona.
Imagens… Pra que… pra que carregar todas as imagens do catálogo se você não vai utilizá-las? Um belo lazyload faz todo o serviço. Com isso evitamos carregar 100 imagens de uma vez sendo que elas são carregadas de forma assíncrona.
E mais… com a implementação do controlJS conseguimos carregar muitos scripts de forma assíncrona também dando a visão do cliente mais rápida . E lembra que reclamamos nos IEs? Uma simples tabela pode ser problema especialmente no IE8. Nós conseguimos arrancar alguns milisegundos simplesmente definindo as colunas de uma tabela. O IE parece que não se dá muito bem com matemática pra calcular o tamanho das colunas e ter que desenhar então o que fizemos foi definir o tamanho das mesmas. =]

Limpeza

sweep of time, ellora

Css não utilizado. Js não utilizado.

lemon juicer 008

Espremer…
Além disso comprimimos mais as imagens até o limite em que qualidade não fosse perdida.

Gastroback juicer.

…automaticamente
não só imagens de produtos! os sprites também entraram no esquema! Toda vez que regeramos nossos ícones antes de serem enviados pra produção eles passam por um processo de compressão para garantirmos a entrega

CDN

Our New Packaging Arrives!

Melhoramos os serviços contratados de CDN. Com isso as entreas de conteúdo se tornaram mais rápidas colaborando mais ainda com a queda do nosso pageload.

Suricato
um suricato. Alguns podem se perguntar que sistema é esse. é uma técnica? um framework? não. é só um suricato mesmo. Oh, really?

Reorganizando

Geek Books

O que devemos evitar em css e js? Vamos enxugar nossos elementos. No js diga adeus aos múltiplos document.ready. Centralize esse cara. É muito mais limpo. Melhora o desempenho? Nesse caso não maaaaaaaas facilita a vida. e é bom lembrar de manter a galera dentro desse camaradinha. Seja bem cuidadoso

$.live
Sim… ano passado nós ainda tínhamos $.live perdidos no código. Agia de forma bloqueante no page load time pois executava uma série de vezes no catalogo ( pra cada um dos produtos… ) imagine a tristeza ter que esperar…

Mensurando

Scale Ruler

Que ferramentas usamos para mensurar os desempenhos?
New Relic,
WebPageTest

New relic entre suas ferramentas fornece monitoramento de servidores e aplicações. Com eles conseguimos determinar o pageload geral e por browser ( entre uma penca de informações).

https://docs.newrelic.com/docs/features/real-user-monitoring

Esse ai é o painel do newrelic pra aplicações. De cara vemos ali o page load time. E olha como o gráfico é bacana. Ele apresenta na média do page load Page Rendering, DOM Processing, network e Web Application. Dai já podemos fazer uma análise preliminar. Do tempo total o quanto corresponde cada parte?

Browser Trace

Controle de alterações
Estamos de olho

cat watching

Para mensurar melhor o impacto das alterações passamos a monitorar o impacto de cada deploy feito. Pra isso adicionamos marcações no newrelic facilitando assim a identificação de alterações de comportamento e se existe ligação com as mudanças recentes.
O mesmo procedimento foi adotado para alterações de CMS. Essas alterações, agora, são consideradas deploys

Equipe

Teamwork

Uma das mudanças que proporcionou melhoria na qualidade das entregas para front foi a criação de uma equipe de front. Tal equipe foi responsável pela correção dos problemas que afetavam o load. Ficam responsáveis pela manutenção garantido que as entregas subsequentes estejam de acordo com a qualidade mínima para fácil entendimento e de acordo com o desempenho atual

Resultados

17 Mobile Computing Devices

Mais conteúdo com menos impacto. Com todas essas ações conseguimos adicionar muito mais conteúdo. Adicionamos media-query para que o site possa se adequar as versões mobile, tablet e desktop. Praticamente 3 sites pelo load de 1.

Aos poucos

Puzzle

Algo importante aprendido é que pra atingirmos nossos objetivos precisamos aplicar pequenas mudanças.
Pouco a pouco podemos melhorar a eficiência

Planejamento

First Floor Plans

Para o futuro próximo estamos estudando quais os possíveis ganhos além de performance mas de qualidade no desenvolvimento o uso de alguns novos pontos como Ícones como fontes e sass ou less.
Também estamos no processo de refatorar todo o js para que fique mais enxuto, de fácil leitura e testado! Isso mesmo. Estamos partindo para os testes em javascript.

Jasmine é uma framework de testes em bdd para javascript feita pela Pivotal Labs. Vale a pena dar uma espiada nas ferramentas disponibilizadas pela empresa. A experiência tem sido satisfatória e esperamos poder trazer em breve resultados positivos com relação ao seu uso.

rumo aos 2s

20070609 - Chronometer

2s de pageload. Essa é a principal meta atual hoje com relação ao pageload time. Mas com as lições aprendidas sabemos que será uma batalha por cada milisegundo em várias ações distintas.

HTML minificado

Compressed Car

Vamos minificar o html! Da mesma forma que fazemos atualmente com javascript e css vamos minificar o html. Isso fará com que tenhamos menos bytes sendo baixados e melhorando o parser e execução. Essa é uma situação que ainda está em teste. Como muitas das coisas feitas pra se melhorar o desempenho.

inline CSS

inline-skaters

Vamos colocar o css no head aberto. Ao invés de carregar um arquivo vamos eliminar esse load. Ele ficará no corpo do html no head

Bricklayer Mason 1913, Frankford EL Construction, Philadelphia

e muito mais
Mas como sabemos tais medidas são apenas parte de uma longa caminhada.
Novas metodologias vão surgindo e Melhorias nas engines dos browsers.

IE8 e sua performance: http://www.tomshardware.com/reviews/windows-xp-web-browser-performance,3167-6.html https://www.webkit.org/perf/sunspider-1.0.2/sunspider-1.0.2/driver.html http://pivotal.github.io/jasmine/ https://developers.google.com/speed/ http://pivotal.github.io/jasmine/ https://docs.newrelic.com/docs/

http://glinden.blogspot.com.br/2006/11/marissa-mayer-at-web-20.html

Referências
http://blog.kissmetrics.com/loading-time/ http://stevesouders.com/controljs/ http://www.yottaa.com/blog/bid/295062/Page-Load-Time-Is-Not-the-Only-Key-Performance-Metric

Contatos

Phone

Era pra ser uma review do #DevInCachu

O rascunho inicial era pra ser uma resenha do #DevInCachu. Mas depois de ler os posts que rolaram por ai acabou que não vi muito significado em falar sobre as palestras pois muitos outros o fizeram com uma propriedade tal que não seria capaz de me comparar.

Para ler mais sobre as palestras do DevInCachu você pode ler os textos do Leo Hackin e do Jeveaux pra começar.

“Ok, então qual o motivo do post e sua relação com o DevInCachu? Pois que eu saiba você dormiu o evento inteiro”

Não foi assim e as provas apresentadas são contestáveis.

Pra mim o importante do evento foi ver a renovação da motivação para se realizar coisas além da estação de trabalho e a retomada da constante melhoria. No momento pós-evento foi surpreendente ver a vontade das pessoas de criar movimento nas comunidades e estabelecer marcos tal como foi o DevInCachu. Eu acabei indo nessa onda e sendo levado a análisar como estamos guiando nossas carreiras e sobre vestir a camisa da empresa…

O verdadeiro vestir a camisa.

Assunto que vez por outra acabo discutindo e no evento não pode deixar de ser diferente. Da conversa tirei a seguinte conclusão:
Acredito que o que precisamos é vestir a camisa enquanto profissionais tal qual faz um jogador de futebol. A camisa que ele veste é parte o uniforme da equipe da qual ele faz parte e ainda que mude de equipe ( muito que provavelmente ) ele continuará sendo um jogador de futebol que terá de treinar sempre para obter o melhor desempenho, que trabalhará em equipe e abrirá mão de ser qualquer tipo de “rock star” em campo para que a equipe obtenha a vitória.
E a tendência é que seu passe vá ficando cada vez mais valorizado e assim ou o clube investe mais nesse profissional ou ele vai pra uma outra equipe com maiores recursos.
Troca de time mas dificilmente de esporte ( salvo similaridades com outras práticas mas jogador de futebol virando estrela do voley eu nunca vi) e se for um verdadeiro profissional honrará com os compromissos assumidos para aquele uniforme que está vestindo.

E o DevInCachu serviu pra isso. Para que eu pudesse entender o quanto poderia fazer enquanto profissional e saber se estava realmente honrando o uniforme ou se deveria “tirar essa farda preta pois era um moleque” e no fim se tudo der errado ter a certeza de que deu errado não por falta de esforço ou dedicação.

Pois se queixar de que tudo está dando errado e que não se teve oportunidades o suficiente é simples agora encarar os problemas e as possibilidades e tentar solucionar os problemas enquanto se cria as próprias oportunidades, ah isso, isso demanda muito esforço.

E você pretende ser um jogador de elite ou pretene passar o resto da vida como reserva de gandula chorando que nunca teve a chance de jogar em grande time?

Vinicius Teles fala de empreendedorismo e sua trajetória no 12 Encontro Locaweb

Vinicius Teles falou um pouco sobre sua trajetetória e sobre algumas decisões que precisam se tomadas para se encarar o mundo empresarial. Vale a pena ouvir sobre a experiência se você pretende trabalhar com desenvolvimento de aplicações seja como proprietário ou não.

No meu caso ao assistir o que me chamou atenção foi o momento em que Vinicius fala sobre a decisão do uso do plano de negócios e os motivos por não se utilizar. Tenho experiência acadêmica com relação a criação de um plano de negócios como projeto de fim de curso e questiono seu uso para todos os casos listados de uso.

No momento ele fala sobre a implantação de um projeto não pude deixar de lembrar da palestra de Guilherme Silveira sobre “Um produto em 10 dias”. Até onde valeria a pena uma pesquisa mais elaborada ou um projeto que tateie o mercado. De certa forma Vinicius antes faz comentários que para mim respondem tal questão: Para desenvolvedores colaboração, estar no mercado, é fundamental. Logo o mercado te conhecerá e você saberá como está a receptividade.

De forma alguma quero dizer que um plano de negócios é desnecessário mas sim de se fazer um julgamento antes de embrenhar em uma pesquisa avassaladora para algo que talvez poderia ter sido feito “em 10 dias” e dado algumas respostas.

O mais importante ( em ambos os casos ) é não ter medo de errar.

Liberdade Interativa

A comunidade do ES não está de bobeira. Depois do Maré Vix agora teremos o I Liberdade Interativa. Este evento é organizado pela galera do Tux-ES.
Com a proposta de ocorrer em um sábado a cada dois meses o Liberdade Interativa será um espaço para debates e network levantando temas e apresentando soluções que atendem, não somente as pessoas que já utilizam as tecnologias/metodologias citadas, como também a todos aqueles que possuirem interesse em se aprimorar e dialogar.

Para os que possuem interesse em programação Francisco Souza falará sobre python e os que ainda possuem dúvidas (ou não fazem nem ideia ) sobre se devem ou não usar o Ubuntu vale a pena acompanhar a palestra do Alê Borba.
O mais importante aqui é a demonstração de interesse. Por isso se você se interessa por algum dos tema não se preocupe com o quanto você sabe. Apareça.

Data: Sábado, 12 de Junho de 2010

Horário: 09:00 – 11:00

Palestras

Nome: Francisco Souza (http://www.franciscosouza.com.br/)
Título: Quem é Python e por que eu deveria me importar?
Descrição: Palestra introdutória sobre a linguagem de programação Python, visando apresentar o quão simples a linguagem é e por que deveríamos levar em consideração adotar a linguagem.

Nome: Alê Borba
Título: Utilizando Linux em Desktops (foco Ubuntu)
Descrição: Apresentar o Ubuntu como desktop para usuários leigos. Apresentar ferramentas de uso cotidiano como Firefox, BrOffice, Thunderbird, e o quão fácil é fazer a migração para um desktop Linux.

Local: FAESA – Campus I, Rua Anselmo Serrat, 199, próximo a Av. Vitória e Av. Marechal Campus, no bairro Ilha de Santa Maria, em Vitória/ES. Na Sala 9 do Bloco IV (Prédio dos cursos de Ciências e Sistemas)

A entrada é gratuita e sem inscrição. Basta aparecer ao local.

Maré de Agilidade em Vitória

Maré de Agilidade em Vitória

Na onda do Maré de Agilidade em Belo Horizonte, em Maio teremos a Maré de Agilidade em Vitória, ou simplesmente Maré Vix. O evento, que acontecerá na Faesa Campus I, no dia 29 de Maio, conta com apoio e patrocínio da Giran e da Qualidata, além do patrocínio da Highlan, Caelum, GUJ e InfoqBR.

Estarão presentes palestrantes de renome nacional e local, como Guilherme Chapiewski, do Yahoo! Brasil; Guilherme Silveira, da Caelum; Paulo Jeveaux, da Giran; Fabrício Matos, da Qualidata; e Denis Ferrari, da Mindworks.

Para conferir a programação, acesse: http://www.mare-vix.com/index.php/palestras/

Fonte: www.franciscosouza.net