logo webcorporation
Tornando sonhos em realidade
Fatores de influenciam na velocidade de um Site

por: Wesley Belinato - 19 de Fevereiro de 2017

Existem uma infinidade de fatores que influenciam na velocidade de um site, entre eles está relacionado com o cliente, como velocidade de banda e o tipo de conexão que ele usa (fibra, DSL, via rádio, 3G, 4G), mais não abordaremos esses fatores nesse artigo até porque não podemos controlar esses fatores.

Porque preciso de um site rápido?

No mundo contemporâneo as pessoas estão acostumadas com o instantâneo e ninguém gosta de esperar, em pesquisa da Global Dots, é informado que a Walmart obteve 2% de aumento na taxa de conversão diminuindo 1 segundo no carregamento das páginas e a Mozilla, gerou 60 milhões de downloads a mais do navegador Firefox por ano, diminuindo 2,2 segundos no carregamento do site."

Voce deve ter passado por aqueles momentos em dias de BlackFriday em que os sites das lojas ficam lentos e é horrível, e acaba causando "stress" e vamos procurar uma outra loja.

Um outro motivo é o ranking nos buscadores, que procuram mostrar os sites mais rápidos primeiro.

Vamos abordar agora alguns fatores que vão influenciar na velocidade do sei site:

Latência (ping)

Muitas vezes é desconsiderado, mais é muito importante, ainda mais se seu site for moderno, bem programado e com chamadas em cascata.

Um exemplo é o principal servidor que usamos: Fica localizado em Brusque - SC, onde a maioria dos negócios ficam localizados, e temos um ping entre 1ms e 10ms, dependendo do provedor que a pessoa utiliza. Deste mesmo lugar um servidor em SP tem cerca de ~22ms, enquanto um servidor americano o ping fica em torno de 220ms.

Exemplo de árvore:

---index.php
------style.css
---------@import(font.css)
------------font.woff

No exemplo passado temos 4 requisições feitas uma depois da outra

Servidor local: 4 x 1 ~ 10 = 4ms a 40ms

Servidor SP : 4 x ~22 = ~88ms

Servidor EUA: 4 x ~220 = ~880ms

Ou seja, temos quase 1 segundo de diferença, e estamos apenas no primeiro requisito, que não passa de um pequeno detalhe na hora de contratar um serviço de hospedagem.

Hospedagem

Um bom serviço também é importante, nos dias de hoje nos deparamos com muita hospedagem no valor de R$ 9,90 e para o valor valer a pena coloca-se uma quantidade muito grande de sites em um único servidor e o site passa a ser grandemente afetado por causa de outros que compartilham a mesma máquina.

Se o seu negócio demanda de um alto nível de visitas e/ou processamento, um vps ou um servidor dedicado pode valer muito a pena para garantir a disponibilidade e a qualidade do serviço prestado.

Códigos mal otimizados

Um bom programador saberá como organizar o código de um site, caso voce seja um principiante vamos dar algumas dicas bem importantes.

Depois de terminar seu projeto comprima todo js e css, lembre-se sempre de salvar uma versão não compactada, sempre é possível a necessidade de realizar alterações no código oque vai dificultar muito a versão minificada. Para isso voce pode encontrar vários sites que realizam essa compactação.

Evite o css e principalmente js no head da página, coloque somente o essencial para que sua página não carregue toda deformada, essa experiência é bem estranha e desconfortante.

Tome sempre o cuidado de redimensionar as imagens no html, exemplo pegar uma imagem de 800px X 600px inseri-la em um quadro de 400px X 300px, nesse exemplo voce estará usando 4 vezes mais banda que o necessário, mais para frente estaremos ensinando a usar o servidor para realizar essa conversão de imagem de capa desse artigo por exemplo voce vai notar que a resolução é exatamente o tamanho do quadro da qual está inserida.

Configurações básicas do servidor

Se voce usa php como é o meu caso, procure mantê-lo atualizado, principalmente para a versão 7 (sete) que trouxe desempenho de até 9X (nove vezes) maior, é praticamente imperceptível ao usuário, mais em um teste de carga é muito bom o resultado para se obter resultados.

Indicamos o uso de dois módulos que vão trazer uma economia de banda e consequentemente uma velocidade maior ao site, já que uso de banda é um problema grave no Brasil, tanto pelo fato de custar relativamente caro se comparado com outros países, quanto pelo fato de os usuários tem conexões de internet bem limitadas, muitas vezes inferior a 1mb, sem contar os que usam conexões de dados móveis que pagam pelo uso de dados.

mod_deflate é um módulo do Apache que faz a compactação automática da página

mod_expires é um módulo Apache para que possa controlar o cache dos navegadores pelos tipos de arquivos, evitando que arquivos de imagens, js, css entre outros sejam baixados toda vez que o usuário acessa o site.

Esquecer o uso do Flash

No HTML5, CSS3 e o atual Javascript, você vai encontrar suporte para fazer praticamente qualquer coisa, com certeza será mais difícil fazer uma animação.

O flash já não pode mais ser aberto pela maioria dos celulares, e evita a manipulação do navegador o que torna difícil de usá-lo ou modifica-lo na maioria das vezes. E a internet está em constante atualização.

Claro toda regra tem exceção, mais voce não vai encontrar nenhum grande site usando mais flash.

Banners, galerias, carrosséis, manipulação de elementos, animações, cores e imagens podem ser feitas facilmente com o uso de javascript e css. Voce pode inclusive baixar na internet css e js prontos que fazem tudo isso com o uso 1 linha de código, e vai funcionar em quase 100% dos dispositivos e navegadores.

Outro prejuízo do flash é o SEO, que é totalmente perdido, oque vai fazer com que boa parte de seu site fique invisível para o Google ou Bing por exemplo.

Widgets

Os Widgets são aquelas “caixas” com previsão do tempo, rádio, notícias ou qualquer outra informação que não seja do próprio site e com certeza são os piores inimigos do desempenho.

Essas caixinhas não fazem requisições apenas na sua página, mas também em outros sites de onde vem o conteúdo, acaba que você não depende só do desempenho do seu site mas do de terceiros.

Isso joga a velocidade do site lá em baixo porque o caminho a percorrer para encontrar as informações é muito grande, então os elementos que estão abaixo do Widget não serão carregados até que ele esteja pronto.

Procure não usar esses facilitadores. Garanto que seu site vai carregar bem mais rápido e por conta do desempenho você até pode ganhar algumas posições nos motores de busca.

Plugins e scripts

O uso excessivo ou desnecessário de plugins e um mal aterrorizante no carregamento das páginas. Os programadores de usam o wordpress muitas vezes cometem esse erro. São javascript e CSS diferentes para anúncios, banner, carousel, galerias e assim vai fazendo com que a página faça entre 10 e 30 requisições antes de carregar a primeira letra visível ao usuário. Com certeza escrever Js e css para tudo em todas as páginas e desgastante e muitas vezes tornaria o projeto inviável financeiramente.

Bootstrap e Materialize, são dois velozes, padronizados e excelentes auxiliadores na hora de montar um site.

No exemplo atual voce teria:

--bootstrap.min.js
--style.css
--Jquery.min.js
--bootstrap.min.js
--script.js

Caso voce deseje usar um script para criar uma galeria, Maps, Facebook, Twitter por exemplo, voce deve colocá-lo somente na página da qual vai usar o plugin, assim as outras cinco requisições já estarão salvas em cache.

Considerações Finais

Todas as regras a exceção, principalmente no meio web não existe muita coisa totalmente absoluta por isso cada cenário de cada cliente deve ser analisado, oque foi escrito nesse artigo é só o mais usado para a maioria dos casos, vou citar alguns exemplos.

Ping: Se o seu site é de downloads ou de arquivos de vídeo, recomendaria um servidor americano, o valor é bem mais em conta, os limites de banda são bem maiores e para reproduzir um vídeo os 220ms não vão oferecer muita diferença.

flash: se voce precisa fazer um game em rede, um jogo de cartas por exemplo, o flash pode tornar o projeto dezenas de vezes mais barato e dificilmente alguém iria jogar em um celular mesmo (apesar que existe a possibilidade, e eu preferir grandemente usar o js)

Isso se aplica a maioria das regras descritas aqui, um bom profissional é essencial é para que seu projeto fique muito próximo a perfeição, se voce é um iniciante procure seguir as indicações e com o tempo voce vai ver as necessidades de mudanças



Fatores de influenciam na velocidade de um Site

Desenhando uma régua em javascript