Otimização e performance na Web com Gêngis Khan

“Um grande conquistador de séculos atrás vai te ensinar lições valiosas sobre otimização e performance na Web.”

ge%cc%82ngis-khan_imagem-topo

Gêngis Khan (1162 à 1227) era o título do grande conquistador e imperador Mongol que nasceu sob o nome de Temüjin nas margens do Rio Onon na região hoje conhecida como Mongólia. Enquanto na Europa a baixa idade média chegava ao fim, disputas políticas e religiosas provocavam uma grande instabilidade na região e o sistema de feudos começava a ruir, um garoto de uma tribo mongol, órfão de pai e que quase foi morto várias vezes ao ser exilado e preso, cresceu como um grande senhor da guerra que conquistou uma enorme parte do terreno asiático chegando a ter o segundo maior império da história da humanidade, perdendo apenas para o Império Britânico da era Vitoriana (chamado de “o império onde o sol não se põe”).

Gêngis Khan (título que significa algo como “cã dos cãs”) era um imperador forte e sanguinário não muito diferente dos grandes conquistadores. Dotado de códigos de honra questionáveis (era conhecido por matar os delatores de seus inimigos e por provocar destruições e violência de todas as formas por onde passava) chegou a esse status não apenas pela violência e fidelidade de seus seguidores, mas principalmente por táticas de governo e de guerra.

Unificação das tribos mongóis, da língua escrita (alfabeto Uyghur), um importantíssimo papel feminino tanto no governo (na prática eram elas que governavam) quanto na guerra, um sistema de meritocracia e tolerância religiosa são também atribuídos a ele durante suas conquistas e seu legado foi levado e expandido ainda mais por seus descendentes que chegaram nas portas de Viena onde uma investida poderia ter mudado a história do mundo como ela é. As táticas de guerra e logística de Gêngis Khan, como dito antes, ajudaram enormemente na expansão de seu império, que sem elas seria inviável de acontecer. Até hoje essas táticas podem ser aplicadas em vários campos de trabalho e também na área da computação, especialmente para você entregar seu conteúdo o mais rápido possível, sem perda de qualidade, para seu cliente ávido por informação que espera que seu site o conquiste tão eficientemente como o imperador mongol conquistava seus inimigos

Nós aqui da Samba Tech priorizamos muito a performance de nossos produtos e serviços para entregá-los o mais rápido, seguro e com qualidade para o cliente e para seus usuários finais. Adotamos várias estratégias na área de tecnologia para isso e eu, como todo time do Samba Player, levo esse mantra a risca cada vez que vamos implementar alguma feature nova ou definir nossa arquitetura. Com a eficiência de um Mangudai (os grandes arqueiros montados de Gêngis) e disciplina de um fiel do imperador usamos o que tem de mais moderno na área da Web e arquitetura de sistemas para entregar o seu conteúdo.

Assim, gostaríamos de compartilhar aqui 5 dicas rápidas, porém eficientes, sobre otimização e perfomance Web, que tem paralelo com as táticas de governo e guerra de Temüjin que podem ser usados por você e sua equipe em seu site ou aplicação:

1- Distribua informação de forma rápida e redundante

Se você acha que dominar uma grande região (que chegou ao pico de 24 milhões de quilômetros quadrados) é difícil, imagina gerir isso tudo no começo do milênio passado e conseguir se comunicar em tempo hábil com todo seu império de uma forma rápida e eficiente. Esse era o desafio do império Mongol e que foi resolvido de maneira criativa e até simples: o sistema postal chamado Yam. Com pontos de 24 em 24 quilômetros e quase 50mil cavalos disponíveis, o Yam era um serviço de envio de ordens, informações e suprimentos que eram distribuídos quase que igualmente para cada estação onde qualquer integrante do império mongol poderia parar para descansar, se atualizar e se comunicar com outro a quilômetros de distância sem precisar percorrer todo esse caminho fisicamente. Na prática funcionaria mais ou menos assim: imagine que Gêngis Khan precisasse dar uma ordem de ataque a uma cidade. Essa ordem precisaria chegar corretamente até ao outro lado de seu império para um ataque massivo e eficiente. Assim para simplificar o pensamento, veja o gráfico abaixo:

infografico-1

Interessante, não? E se você já conhece um CDN, deve ter compreendido onde quero chegar.

Segundo a Google o tamanho da banda larga de seu cliente começou a ser menos importante na velocidade de carregamento do seu site, ao passo que a latência é que realmente faz toda a diferença. Podemos definir a latência como o tempo de demora da informação para ir do computador do seu cliente até o servidor e voltar. Por mais rápido que sua banda seja, temos várias limitações para o tráfego desse dado e o geográfico é muito importante. Considerando que o dado tenha a velocidade da luz, mesmo se corresse de forma “livre” ainda teríamos uma enorme diferença se ele viesse de um servidor local ou de outro lado do mundo.

Usando o Wolframalpha vemos que, no vácuo e sem interrupção, a luz demoraria 4ms para ir de Belo Horizonte a São Paulo e voltar enquanto que demoraria 72ms da capital de Minas gerais para um servidor na Estônia, por exemplo. Lembrando que esses números são bem maiores na vida real (o cabo de fibra ótica limita em 40% a velocidade da luz, fora todo processo de roteamento entre servidores) a importância de ter seu conteúdo o mais perto fisicamente possível do cliente é a diferença entre vencer uma guerra ou ser dominado pelos inimigos. Assim procure contratar um serviço de CDN para rodar e distribuir sua aplicação por igual em uma vasta gama de servidores espalhados geograficamente. Uma dica importante é definir seu país alvo antes de contratar esse serviço observando sua eficiência e redundância no local que deseja focar seu produto.

2 e 3- Viaje com o mínimo preciso e de forma compacta

Grandes distâncias a serem percorridas só foram possíveis principalmente por 2 elementos no império de Gêngis: o cavalo mongol e a disciplina de sempre viajar com o mínimo necessário para completar a jornada. O cavalo mongol na verdade é uma espécie de “pônei duplo” que media aproximadamente 1 metro e meio de altura, pesava 300kgs, não precisava de muito alimento e que conseguia percorrer grandes distâncias mesmo que galope em menor velocidade que as outra raças. Normalmente cada integrante do exército tinha 3 a 4 cavalos e revezava entre eles durante a viagem o que permitia percorrer distâncias de até 200 quilômetros por dia.

Tudo era aproveitado do animal assim era possível viajar sempre com o mínimo possível. Normalmente os soldados viajavam com tiras compactas de carne seca chamadas bort sob a montaria que poderia rapidamente se transformar em uma sopa ao ser misturada com água, leite de cavalo ou até mesmo sangue do animal (retirado de uma forma que ele não fosse morto) para manter a energia da tropa durante as jornadas e batalhas. Das cristas dos cavalos eram feitas peças de roupa, armaduras e até cordas para arco. O que importava era o resultado final e este era mostrado cada vez que o império de Gêngis crescia e dominava seus inimigos os vencendo nos detalhes.

Todos sabemos a importância de manter códigos organizados, indentados e repletos de comentários. Assim como é sempre bom fornecer imagens em alta resolução para seus clientes especialmente quando estes carregam seu site em telas retina e com resoluções de 4k. Mas isso vem com um custo, e este pode ser diminuído com ferramentas simples de compactação de código e de imagens que entregam ao seu usuário um produto de qualidade e compacto em relação ao código e arquivos originais.

Muitas imagens costumam vir com informações irrelevantes ao usuário como localização, máquina que foi tirada e até configuração da câmera no momento da foto. Normalmente, isso não é preciso ao apresentá-las no seu site e você pode compactá-las sem percepção real de diferença de qualidade para o usuário final. Faça o teste: tire uma foto com seu celular na mais alta resolução e use o tinyJpg para compactá-la. Você se surpreenderá com o tamanho final da foto e o quanto a qualidade não é afetada.

Do lado do código temos ferramentas como o Gulp e o Grunt que pegam um código comentado e organizado e o transformam, em tempo de deploy, em uma “sopa de letras” de apenas uma linha que será lida apenas pelo browser de seu cliente. Assim seu desenvolvedor pode continuar programando usando as melhores práticas de legibilidade de código enquanto que o código que vai para produção tem apenas o necessário para dominar o território.

Aproveitando a compacta e eficiente raça de cavalos mongóis, é sempre interessante enviar todas as suas informações na menor roupagem possível. E, para isso, hoje a maioria dos servidores fornecem de forma simples o Gzip, que compacta, normalmente em tempo real, seus dados antes de enviar para os browsers onde são descompactados e lidos pelo sistema. O custo dessa compactação e descompactação costuma ser mínimo, tanto de tempo quanto de processamento e, normalmente existe uma lógica em que ele decide se vale a pena a compactação ou não de um dado antes de enviar (normalmente acima de 3kbs). Certifique-se que o Gzip está habilitado e vá a guerra!

4- Modularização e independência para um bem comum

Para comandar um exército do tamanho do mongol que crescia a cada invasão a organização teria que ser descentralizada de uma forma que cada “porção” saiba exatamente o que fazer sem precisar de uma ordem direta de cima. Assim era usado um sistema usando a potência de 10. O exército era dividido em:

  • Arbans: 10 unidades
  • Zuun: 100 unidades
  • Mingghan: 1000 unidades
  • Tumen: 10000 unidades

Assim cada general cuidava de 10 unidades do exército “abaixo” (entre aspas pois não havia exatamente uma hierarquia e diferença, com todos sendo tratados e ouvidos como igual) dele subsequentemente. Por exemplo um Zuun cuidava de 10 Arbans, um Mingghan cuidava de 10 Zuuns e assim por diante. Isso gerava uma rapidez e organização ímpares na época com cada porção totalmente independente entre si conseguindo perfurar o armada inimiga e a separar gerando uma grande confusão do outro lado.

Com a internet cada vez mais dinâmica e interativa é normal sites e aplicações webs com arquivos Javascript inflados, muitos plugins e dependência entre eles. E sem responsabilidade, isso pode pesar demais seu site provocando uma experiência lenta e desagradável para o cliente, especialmente contando que o carregamento desses arquivos costuma ser blocante, o que significa que o browser só vai passar para o próximo carregamento depois de baixar e rodar seu arquivo Javascript. E com tamanhos inflados fica complicado descobrir qual código está sendo usado em cada parte, gerí-los e até testá-los devido a imensa dependência entre si.

Uma dica é a modularização de seus Javascripts deixando-os de uma forma que possam ser carregados de forma assíncrona e independente sem comprometer o funcionamento principal do site, além de permitir que apenas os arquivos realmente necessários sejam realmente carregados em cada parte de seu sistema. Para atingir essa prática procure separar seu código em arquivos individuais que possam ser carregados independentemente e que não dependam muito do carregamento um ou outro. Hoje há várias formas de organizar e “deixar assíncronos” os arquivos e uma bem interessante é o uso do RequireJS. Com essas táticas também conseguimos dividir os setores de sua página e apresentar os mais importantes o quanto antes e isso será discutido no próximo item.

5- Não importa o que você é, e sim o que você parece ser

O exército de Gêngis Khan era enorme. Em batalha, o recorde foi na invasão da Dinastia Xia onde relatos mais otimistas indicam, nada mais nada menos, que 180 mil homens lutaram ao mesmo tempo ao lado do imperador mongol. Porém, esse tamanho não era o suficiente para ele e ele sabia disso, pois o mais importante era fazer o inimigo acreditar em números sempre maiores.

Acampamentos falsos eram feitos para enganar olheiros inimigos com bonecos, crianças e mulheres espalhados e montados fazendo o papel de soldados à distância, inclusive, fazendo exercícios de treinamento. Cada membro do exército tinha a missão de fazer 5 fogueiras espalhadas nas noites do deserto que dariam a impressão de um acampamento muito maior do que ele realmente era especialmente quando os clarões eram avistados de longe na noite do deserto mongol.

Quando se deparava com exércitos maiores também era comum amarrarem galhos nas caudas dos cavalos (normalmente nos que vinham de trás das formações) para levantar mais poeira dando a impressão que os reforços estavam vindo logo atrás. Essa intimidação era bem eficiente para Gêngis Khan e muitas batalhas acabaram sendo impedidas quando o exército inimigo se rendia antes mesmo do confronto.

Juntando todas as dicas acima temos: diminuição da latência, compactação tanto dos arquivos como da forma de transporte deles quando enviados ao cliente e modularização dos componentes. Mas nem sempre vivemos em um cenário ideal. Sabemos das exigências dos designers e de regras de negócios da página, assim como, entendemos que, mesmo que isso custe complexidade, nosso site deve se sobressair aos demais. Então, o que podemos fazer para melhorar ainda mais a velocidade? Finja. Isso mesmo. Assim como Gêngis Khan fazia, não importa o que você é, e sim como parece. No caso, não importa o quão rápido você seja, e sim como parece ser.

O Google Reader era um serviço de leitura de RSS muito usado alguns anos atrás até ser descontinuado. No seu design era característico um fundo azul claro que até servia um pouco como identidade do site. Contudo, isso gerava um custo na percepção da performance já que as telas dos browsers normalmente começam a carregar a página em um background branco até ele ser mudado na leitura do CSS local. Assim, os engenheiros do Google, sempre preocupados com performance, decidiram uma melhora simples: tiraram o background azul adotando o default do browser (no caso, o branco). Dessa forma, o site aparentava carregar mais rápido, mesmo que ele não carregasse, apenas pelo fato do background não mudar do branco para outra cor. Foram feitas pesquisas de opinião na época e, mesmo com números comprovando que tecnicamente a velocidade continuava a mesma, era quase unânime entre os entrevistados que o site realmente tinha ficado mais rápido.

Usando essa dica você pode focar no que o seu site realmente entrega ao usuário. Se for texto, faça de tudo para carregá-lo antes de tudo. Mantenha o usuário preso enquanto todos os outros arquivos estáticos, necessários para uma experiência interativa e agradável, são carregados em paralelo. Se seu foco é e-commerce, tente carregar algum tipo de lista de produtos mínima, mesmo que sem interação, até que o restante do site (busca, listagem de categorias, banners) seja carregado de vez. Foque na entrega de algo “palpável” e na área inicial de visualização da página, para que ela seja carregada o mais rápido possível, e seu usuário vai continuar no site antes de desistir e ir aceitar o domínio do inimigo. Percepção é tudo tanto na arte das guerras milenares como na guerra digital.


Espero que tenha gostado das dicas sobre otimização e perfomance na Web e de conhecer um pouco da história desse fascinante personagem em nossa jornada humana até aqui. Aproveite para deixar nos comentários mais dicas, opiniões e até mesmo críticas sobre os assuntos tratados no texto.

assinatura-01-1

Por: Nathália Tameirão

Coordenadora de Marketing Digital na Samba Tech e especialista em SEO e conteúdo. Formada em Publicidade e Propaganda pela UFMG, é responsável pela estratégia de conteúdo da Samba, com foco em atração e conversão.

Contribua com este post nos comentários