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é TagliatiMineiro 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.http://www.flickr.com/photos/42931449@N07/6812481635/
O que temos pra hoje?
Chegando ao FrontProblemasSoluçõesFuturo
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 2006After 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…


Imagem censurada por conta do autor considerar seu uso comercial

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;

PixelsImagensHtml
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.htmlhttps://www.webkit.org/perf/sunspider-1.0.2/sunspider-1.0.2/driver.htmlhttp://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

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s