Como minificar seus arquivos e obter mais performance para o front-end e SEO

Como minificar seus arquivos e obter mais performance para o front-end e SEO

13/06/2017 às 09:13WordPress

Atualmente esperar 10 segundos para um website ser carregado é quase um crime, ninguém quer esperar tanto tempo para encontrar uma informação ou se divertir, seja um projeto pessoal ou empresarial, o desempenho das suas páginas vai influenciar drasticamente na permanência dos visitantes e no quanto o Google vai “gostar” do seu site.

Se você ainda não conhece, o GTMetrix e Pingdom são duas ferramentas perfeitas para verificar o tempo de carregamento do seu website e ainda conseguir dicas de como otimizar para que ele seja entregue aos seus visitantes no menor tempo possível, entre  essas dicas vamos falar da minificação de arquivos estáticos, que apesar de ser um procedimento muito comum no cenário web atual ainda é deixado de lado por alguns desenvolvedores.

Quantidade de Requisições VS Tamanho dos Arquivos

O primeiro passo para aumentar o desempenho do seu website e aumentar o tempo de navegação do seu visitante é priorizar a exibição da informação, um artigo do seu blog, algum documento para download, imagens do seu portfólio, se você não consegue fazer com que essas informações sejam recebidas sem demoras as chances do seu visitante deixar sua página só aumenta. Quando você tem uma quantidade elevada de requisições e arquivos estáticos grandes o tempo de carregamento pode se tornar exagerado, compactar esses arquivos para a entrega é a melhor solução.

Frameworks vs Performance

Os frameworks de desenvolvimento web são amados por alguns e odiados por outros, ma é indiscutível o tempo que economizamos ao usarmos um modelo já preparado para navegação móvel, otimizado para diversas resoluções, componentes visuais complementares prontos, porém um dos pontos negativos de não saber como usar de forma correta esses benefícios pode acabar atrapalhando, independente de qual framework você use, muitos deles por padrão vem com todos os recursos disponíveis, muitos dos quais você nem mesmo vai usar, então quanto mais linhas maior o arquivo e o seu tempo de carregamento. Dê preferência para os frameworks que trabalham com pré-processadores, sass, less, etc, assim você pode usar apenas os recursos que lhe forem úteis e assim reduzir o tempo de carregamento. Alguns deles oferecem diretamente em seu site ferramentas para configurações personalizadas e download do código já otimizado com os recursos que você vai precisar, como por exemplo: Bootatrap.

Como minificar seus arquivos de forma rápida e útil?

Existem diversos sites que trazem ferramentas para a compactação de arquivos .css e .js, mas as vezes se torna muito mais trabalhoso fazer isso manualmente, o que acaba reduzindo drasticamente sua produtividade no processo de desenvolvimento, no entanto você pode recorrer novamente aos pré-processadores e realizar todo esse processo automaticamente e manter seus arquivos atualizados. A vantagem de usar os pré-processadores é que você mantém um arquivo original, fácil de editar e atualizar e na hora da compilação pode exportar diretamente um arquivo minificado (. min.css), já no caso dos arquivos JavaScript recomendamos o UglifyJS, um conjunto de ferramentas para trabalhar da mesma forma que o SASS e LESS com os arquivos .min.js. Uma dica é você trabalhar com vários arquivos fontes separados, cara um para uma função específica e na hora da compilação unir todos eles no arquivo final, assim você diminui a quantidade de arquivos para realizar requisições no projeto online.

Como essas alterações ajudam no seu posicionamento no Google?

Um dos quesitos para o ranqueamento é a velocidade de navegação, o que não depende unicamente do seu provedor de hospedagem de site, mas da qualidade do seu código. O Google preza a experiência do usuário dentro do seu website, e com toda certeza sites lentos não trazem nenhuma boa experiência durante a navegação aos seus visitantes. Tenha como meta os 10s, menos até, pois mais do que isso os pontos negativos são muito decisivos nos resultados, use o Google PageSpeed para analisar como o Google está te vendo, siga as dicas de otimização, preze pelas altas pontuações, sempre.É claro que esses ajustes vão compor apenas parte da solução, todos sabemos que trabalhar a otimização não é uma tarefa das mais fáceis, mas cada ponto positivo é certamente fundamental.

Conclusão

Está mais do que claro que em 2017 os padrões de desenvolvimento de alta performance (código de qualidade no menor tempo possível) e velocidade de navegação vão se tornar indispensáveis, quem não se adaptar a isso vai acabar ficando para trás,independente de estar começando ou já ter alguma experiência , atender clientes cada vez mais exigentes e conhecimentos mais arrojados vão se tornar algo comum, então porque não começar já a entrar nessa fase? Prepararemos mais artigos como Dicas de SEO para WordPress veja esse e muitos outros em nosso blog.

*A propósito, já viu nossa página de parceiros? Se você leu até aqui porque não visitar nossa página e vê como funciona?

Gostou de nosso post? Compartilhe: