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

E já que estamos de mudança…

Assumi uma solução mais econômica pro meu blog visto que meus projetos estão congelados. Logo Tagliati.com passa a ficar dentro do wordpress.com mesmo.
Como não ganho fortunas em publicidade e a necessidade de customização de layout é zero resolvi me utilizar deste recurso.

Por $30,00 anuais você ganha o direito de configurar seu domínio para apontar para uma conta do wordpress.com que foi o fiz no caso. É uma alternativa boa para aqueles que querem manter o blog com sua url com url customizada mas que não curte fazer alterações em layout

Para os projetos que venho brincando provavelmente seguirei o caminnho de muitos e testarei os serviços da amazon ( for free por um ano. procede ratinho? ). Só preciso estar plenamente estabelecido em sampa pois me falta o básico para sobreviver ainda ( internet ).

Dica rápida pra quem curte quadrinhos e mangá e possui um kindle

As vezes paro pra pra pesquisar e vejo a galera “arrumando muitas confusões” pra colocar seus quadrinhos rodando no ebook reader.
Coisas como criar uma pasta de imagens e enviar as páginas da revista pra lá e coisa do tipo.
Pois bem, já comentei anteriormente que o kindle tem a capacidade de ler arquivos cbz e estes arquivos são muito fáceis de se criar. Basta jogar as imagens dentro de um arquivo zip com a extensão cbz.

No mais para comodidade da leitura mantenha sempre seu kindle atualizado. Agora, por exemplo, ele possui a opção de ajustar pela largura e/ou pela altura da página. Para acessar a opção basta pressionar a tecla Aa durante a leitura como se fosse alterar o tamanho de uma fonte.

É claro que se possível, antes de compactar e enviar os arquivos para o kindle, redimensionar as imagens para um melhor ajuste a telinha do sei leitor evitando que virar páginas se torne lento.

No mais o leitor continua valendo muito o investimento. A quantidade de livros que tenho lido é incomparável com os dias sem o mesmo.
Se você ainda não comprou um ebook reader e ama leitura é melhor parar de perder tempo

E meu kindle estragou…

… e o que comprei pro meu irmão também. O do meu irmão estragou em dezembro. A tela congelou. Simples assim. Não tinha reset que resolvesse o problema. A solução foi entrar em contato com a amazon que se prontificou a trocar o produto. E trocou mesmo. Em uma velocidade quase assustadora.

E eis que depois de um ano de muita leitura o meu segue o mesmo destino. Simplesmente congelou (bem na hora que eu tirei da mochila pra mostrar pra uma amiga alguns txts úteis que eu carrego nele como horários de ônibus e itinerários). Corri pro site da amazon pra ver o que poderia ser feito e ai vem aquela constatação triste, aquele frio na barriga por ter recebido uma informação desagradável, a informação de que a garantia tinha cabado uma semana antes.
Agora pense numa pessoa triste e se sentindo amaldiçoada. Pude provar do que considero o único e maior problema de um ebook reader: estava sem meus livros. Tudo bem que poderia ter acesso aos mesmos no meu computador mas como continuar minhas leituras enquanto estivesse no ônibus ou a sagrada leitura na cama pra cochilar e dormir?

Ok ok… cortando o drama. Mas antes que a esperança cheguasse ao fim eis que o suporte da amazon me dá a feliz notícia de que realizaria a troca. Informações de entrega e bancárias confirmadas e uma semana depois um kindle zero bala chega em meu humilde lar.

Por isso tenho mais motivos para responder Amazon quando alguém me pergunta onde é melhor comprar o kindle. Fuja de mercado paralelo ou qualquer outro vendedor externo pois além de você pagar o mesmo preço que pagaria lá você não teria os benefícios de uma garantia.

Agora só me falta mandar o kindle antigo de volta.

Ah e também o parabéns pra DHL que respondeu prontamente as solicitações que fiz para que a entrega fosse possível ( foram necessárias 3 tentativas pra entregar mas a administração do condomínio onde moro fechava cedo. pode isso? )

You are not so smart

Pra começar o ano.

Tive o “infortúnio de me identificar com alguns elementos que são apresentados no “trailer” deste livro.

No fim das contas além de genial me convenceu a checar sobre o livro e pensar em comprar. Entrou pra lista de leitura de 2012.
Interessados: http://www.amazon.com/You-Are-Not-So-Smart/dp/1592406599

Você pode comprar seu kindle por $114,00 mas…

A amazon não perdeu tempo. Saiu uma nova versão do kindle de 6″ (já faz algum tempo)  que está custando apenas US$114,00. E qual a razão desa diferença de US$25,00?
Eles chamam de kindle with includes Special Offers que no resumo da ópera é Kindle com Progandas.

Além dos US$25,00 de economia ele vem com alguns “benefícios”. Você terá direito a aluns preços “especiais” diretamente no seu kindle.O que não fica claro no site sobre a frequencia de promoções e se serão exclusivas para kindle ( pois receber no kindle não implica em exclusividade).

Agora será que uma economia de US$ 25,00 e ainda não tão certas promoções valem a pena por receber propaganda indefinidamente?
Se ainda assim você acredita que a economia valha a pena vai lá.