Desde a criação da Internet, os tamanhos médios dos arquivos têm crescido. Essa questão sempre é um problema quando se refere a otimizar velocidade do site. O que começou como kilobytes progrediu para megabytes (sim, no plural), e os nossos arquivos só estão crescendo ainda mais. Embora esse fenômeno não é um problema, à primeira vista, o impacto que tem sobre o desempenho e facilidade de manutenção é horrível. Somado a isso dispositivos ultrapassados, restrições de banda, falta de conectividade etc… nós temos um problema muito maior. Felizmente, temos controle, não só, sobre os nossos tamanhos de arquivos, mas também a forma como as nossas páginas são renderizadas no navegador. Este tipo de controle permite aos desenvolvedores web a oportunidade de ajudar a aliviar este problema, e otimizar o nosso código para um melhor desempenho no processo.

Por que se preocupar?

Todos sabemos que a maioria das conexões de internet no Brasil ainda está bem abaixo das encontradas nos EUA, Europa e Asia. Desempenho é mais do que a rapidez com que se pode baixar um arquivo ou conteúdo. Observar a melhor forma de construir o código, escolher os melhores formatos de imagens, plugins, filtrar a quantidade de informação, também podem ajudar a melhorar o desempenho do sei site.

---

Pensamento Modular

Aqui, queremos pensar modular, em termos de combinação de partes comuns de nosso código. Aconselha-se, quando possível, combinar duas classes CSS em um só e usar menos código para fornecer o mesmo resultado. A modularidade não é tão importante quando se trata de HTML básico e CSS, mas quando você entrar em um mundo mais complexo como JavaScript, ter muito inchaço pode prejudicá-lo – especialmente no celular .

Mininizar HTTP e a dependência solicitações

Solicitações de dependência são, de longe, os maiores fatores de diminuição da velocidade de carregamento de uma página. Cada pedido adicional acrescenta “peso” e representa outra camada de complexidade ao processo de análise e download.

Na maioria das vezes, esquecemos que as imagens são carregadas a partir de uma folha de estilo e isso também conta, você pode utilizar métodos de otimização alternativos, como sprites ou SVG, quando possível. Enquanto nós estamos tratando do tema da dependência externa, se o site é grande o suficiente para exigir algumas dezenas de pedidos, então é hora de considerar o uso de um CDN (Content Delivery Network ou Rede de Distribuição de Conteúdo). Usando um CDN para distribuir o seu conteúdo não vai diminuir os tamanhos dos arquivos e/ou tempos de carga, tanto quanto a remoção de solicitações HTTP extras todos juntos, mas ele provavelmente pode remover todas as conexões que estão tornando o servidor lento e fora da equação.

Arte gráfica e Ambiente de desenvolvimento

É muito interessante que cada arquivo a ser carregado na página esteja no formato correto, ou mais indicado e com o menor tamanho possível. Encontrar a relação entre tamanho e qualidade pode ser uma tarefa que leva tempo, porém com a prática acaba-se adquirindo um certo knowhall.

Para reduzir os tamanhos das imagens, aconselha-se utilizar ferramentas como o Photoshop com a opção “Save for Web” para a compressão de imagens, isso pode ser um bom ponto de partida. Existem uma infinidade de conhecimentos a serem explorados em outros lugares também tratando sobre formatos de imagem, algoritmos de compressão, controle de qualidade e boas práticas.

Para o código, o melhor uso de compressão geralmente depende da linguagem que você está trabalhando. Também é altamente discutível se a compressão de código ajuda ou prejudica outras pessoas tentando entender o seu código, mas isso é uma conversa para um outro momento. Quando se trata de HTML simples e CSS, pode-se utilizar serviços como HTML Compressor do Google e YUI Compressor para CSS.

Escreva Inteligentemente – código mais legível

Às vezes, o próprio código que está escrevendo é o elo mais fraco da cadeia.Um CSS ineficiente ou JavaScript pesado pode interferir nos tempos de carregamento de uma página mais do que você pensa. Este post do Mozilla conta em grandes detalhes sobre a importância de escrever códigos seletores em CSS leves e explica como navegadores os renderizam.

Mantenha o HTML bem simples

Você ter como objetivo escrever códigos CSS mais leves é muito importante. Mas também, é imprescindível que os códigos HTML também sejam menores e de fácil compreensão. Quando falamos em códigos menores, não é que você tem que escrever pouco código porque sua página não pode ter muito código, estamos colocando em questão os códigos / tags HTML que não são necessários, ou seja, estamos tratando de uma análise ao seu código a fim de otimizá-lo.

A grande importância de ter um código HTML limpo está ligada diretamente aos motores de buscas, como Google, Bing, Yahoo, etc. Uma de nossas missões quando falamos em otimizar o código, é também melhorar a semântica do código e então dar significado a cada bloco HTML para orientar os motores de buscas informando quais conteúdos da página tem mais ou menos relevância.

O Google gosta quando nós escrevemos código mais limpo

Google tornou a organização do código uma prioridade para otimizar a internet de uma forma muito interessante. Para ocupar posições de destaque dentro de seus resultados de pesquisa, as páginas devem agora prestar atenção para muitos atributos diferentes. Chamando muitos recursos externos, tendo imagens absurdamente grandes, ou até mesmo ter escrito mal JavaScript pode levar um site para baixo no ranking de visualizações. Felizmente, essa atitude tem uma boa intenção, pois suas exigências para uma boa classificação de pesquisa são construídos em torno de boas práticas de desenvolvimento. O Google também oferece um guia muito aprofundado para otimizar diferentes aspectos do seu site para melhor SEO – o que também promove práticas de desenvolvimento fantásticas.

Nós do Wime temos um construtor de site onde você já cria seu site aplicando todos esses conceitos sem precisar por a mão no código, e o Google adora isso. Crie seu site conosco é rápido e fácil. E assim poremos aprender mais sobre esses e muitos outros conceitos.